DEV Community

Ethan Goddard
Ethan Goddard

Posted on

Software Dev Update #12: The World Of DOM

looking up at sky and buildings

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.


  • 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

//Select by class

//You can also chain on other CSS style selectors

//We can add multiple selectors. In this example we are selecting by type (anchor tag) and attribute (title="java")

//And an example of querySelectorAll, this will create a collection of all paragraphs

//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'));
Enter fullscreen mode Exit fullscreen mode
//This will only show what's actually shown on the page at the moment. If an Element is hidden, innerText will not capture it

//Notice the spacing in the console which is from the actual HTML markup because textContent returns every Element, hidden or not

//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>";
Enter fullscreen mode Exit fullscreen mode
//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 = "";

//Now we'll append the image to the body as a child

//Now lets apply a class so css will have an effect

//We'll combine a few things we've leanred
const newH3 = document.createElement("h3");
newH3.innerText = "I am a new H3!"

const p = document.querySelector("p");
p.append("I can be a full sentance!", "And I can be a second added Element!");

const newBold = document.createElement("b");
newBold.innerText = "Hello!";

const h2 = document.createElement("h2");
h2.innerText = "I am insertAdjacentElement";

const h1 = document.querySelector("h1");
h1.insertAdjacentElement("afterend", h2);

const h4 = document.createElement("h4");
h4.innerText = "I am an 'after' H4";


const firstLi = document.querySelector("li");
const ul = firstLi.parentElement;

//Now we can pass in the child we want to remove by selecting the parent

//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");
Enter fullscreen mode Exit fullscreen mode

Week In Review

building foundation construction
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!

Latest comments (0)