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,
Here are some examples of examining document types.
Here are some examples of getting element by ID.
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’);
items.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.
<div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-155635758-381-5ce3d4a1948e4' data-src='https://widgets.wp.com/likes/#blog_id=155635758&post_id=381&origin=trilamanila.com&obj_id=155635758-381-5ce3d4a1948e4' data-name='like-post-frame-155635758-381-5ce3d4a1948e4'><h3 class="sd-title">Like this:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class="loading">Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>