This week's update covers the major topic of DOM (Document Object Model). I'm going to breakdown some of the most important pieces to understand and share some examples to illustrate those concepts.
Definitions
DOM: Known as the Document object model, it is a Javascript representation of a webpage. It's your JS "window" into the content of the webpage. It is essentially a bunch of objects that you can interact with via JS. It's how we do things such as creating drop down menus.
JavaScript Element: An Element in Javascript is an object with properties that represents a single HTML Element. You can select elements in three different ways, those being getElementById, getElementsByTagName, and getElementsByClassName
HTML Collection: Is an array like object that displays HTML Element properties and methods. Is Generated when we use getElementById, getElementsByTagName, and getElementsByClassName.
Attributes, Properties, & Methods
- Query Selector: A newer addition to the DOM, querySelector is an all-in-one method to select a single Element.
//Select by ID
console.log(document.querySelector('#banner'));
//Select by class
console.log(document.querySelector('.square'));
//You can also chain on other CSS style selectors
console.log(document.querySelector('img:nth-of-type(2)'));
//We can add multiple selectors. In this example we are selecting by type (anchor tag) and attribute (title="java")
console.log(document.querySelector('a[title="java"]'));
//And an example of querySelectorAll, this will create a collection of all paragraphs
console.log(document.querySelectorAll('p'));
//Here's an example of nested selectors. We'll create a colletion of all anchor tags inside a paragraph tag.
console.log(document.querySelectorAll('p a'));
- innerHTML, textContent, innerText: These are DOM properties that can be used to set or update the content of an Element.
//innerText
//This will only show what's actually shown on the page at the moment. If an Element is hidden, innerText will not capture it
console.log(document.querySelector('p').innerText);
//textContent
//Notice the spacing in the console which is from the actual HTML markup because textContent returns every Element, hidden or not
console.log(document.querySelector('p').textContent);
//innerHTML retrieves the full contents (including the tag names) of the Element between the opening and closing tags
//We can overwrite an Element's HTML. Example will be the first h1 of the page
document.querySelector("h1").innerHTML = "<i>Silkie Chickens</i>";
- getAttribute and setAttribute: Gets or sets the value of an attribute on the specified element.
- JavaScript Style Object: It will not display any style attributes set in another file (like a .css file) but it will display any in-line styles found in the HTML. Those are pretty uncommon so we use the Style object to override those values from the .css file using JavaScript.
- classList: Is an object that we can interact with to control the classes on an element and to retrieve or manipulate them. It has useful methods such as .add, .remove, and .toggle
- Traversing: All of these properties allow us to navigate from one Element to a relative (parent/child/sibling). parentElement, childElementCount, children, nextSibling, nextElementSibling, previousSibling, and previousElementSibling
- Append and Remove: appendChild, append, prepend, insertAdjacentElement, after, removeChild, and remove
//Append Child---------------------------------------------------------------
//We are creating a new image with a source, but it's not on the page yet
const newImage = document.createElement("img");
newImage.src = "https://i.imgur.com/Gz7nBcv.jpg";
//Now we'll append the image to the body as a child
document.body.appendChild(newImage);
//Now lets apply a class so css will have an effect
newImage.classList.add("square");
//We'll combine a few things we've leanred
const newH3 = document.createElement("h3");
newH3.innerText = "I am a new H3!"
document.body.appendChild(newH3);
//Append---------------------------------------------------------------------
const p = document.querySelector("p");
p.append("I can be a full sentance!", "And I can be a second added Element!");
//Prepend--------------------------------------------------------------------
const newBold = document.createElement("b");
newBold.innerText = "Hello!";
p.prepend(newBold);
//insertAdjacentElement------------------------------------------------------
const h2 = document.createElement("h2");
h2.innerText = "I am insertAdjacentElement";
const h1 = document.querySelector("h1");
h1.insertAdjacentElement("afterend", h2);
//After----------------------------------------------------------------------
const h4 = document.createElement("h4");
h4.innerText = "I am an 'after' H4";
h2.after(h4);
//removeChild------------------------------------------------------------
const firstLi = document.querySelector("li");
const ul = firstLi.parentElement;
//Now we can pass in the child we want to remove by selecting the parent
ul.removeChild(firstLi);
//remove-----------------------------------------------------------------
//Remove is newer and allows you to directly select the Element you want to rmeove instead of needing to select the parent
//first and then defining the child Element to be removed
const image = document.querySelector("img");
image.remove();
Week In Review
Understanding the basics of the DOM seems to be a foundational knowledge that is going to build upon itself in the next several sections of my bootcamp. I'm looking forward to playing around with this more as we learn about DOM Events coming next!
Bootcamp lessons completed: 253/579
I hope you enjoyed the read!
Feel free to follow me on GitHub, LinkedIn and DEV for more!
Top comments (0)