Today I learned about document object model(DOM), which is something I’ve been using on practically all of the JavaScript projects I’ve worked on so far. However, I didn’t understand what was really going on. The video I watched to gain information about DOM was Traversy Media.

The DOM is a tree of nodes/elements created by the browser. The top object is the document which is on the window object the browser itself. The nodes/elements represent the elements in the HTML files. Elements in the HTML file such as head, title, body, h1, a, href, etc.

The JavaScript engine has been upgraded over time and with such updates, the engine itself is able to do things that do not require jQuery. Powers such as examining the document type, get element by ID, get element by class name, get element by tag name, and query selectors.

Here are some examples of examining document types.

console.log(document.domain);

console.log(document.domain);

console.log(document.URL);

Here are some examples of getting element by ID.

console.log(document.getElementById(‘header-title’));

var header = document.getElementById(‘header-title’)

After setting the variable into memory you are able to change elements by using the value you gave as the element before the dot operator. I used header-title as an example. So all you would need to do is headerTitle.textContent = ‘Hello’; This would automatically update the text content with whatever you set the input. This is such an easy and powerful method to change things in the DOM.

Another use case would be getting elements by class name. Here are some example use cases.

var items = document.getElementByClassName(‘list-group-item’);

console.log(items);

console.log(items[1]);

items[1].textcontent = ‘Hello World’;

The variable was set into memory in the first line then called by console.logging then you can easily change elements afterward. This is a recurring theme with what I’ve seen so far researching into the DOM. This method is also used for getting element by tag name. The querySelector() method returns the first element that matches a specified¬†CSS selector(s)¬†in the document.

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: