What is the DOM?
What is the DOM?
Stands for Document Object Model. It can be thought of as a tree of nodes/elements created by the browser. Javascript can be used to read/write/manipulate to the DOM. Object-Oriented Representation.

There are parent nodes and child nodes forming a data structure.
// Examining the Document Object //
We can right click on a webpage, and click “Inspect” to open our browser’s console where we can use Javascript to manipulate the DOM, or we can write our javascript inside of a text editor like so:
—
Inside of our typical index.html file, we can include a script tag to link a javascript source file like so:
<script src=“index.js”></script>
—
Now, from inside our index.js file, we can manipulate the DOM using javascript.
console.log(document.domain); → outputs domain IP address
console.log(document.URL); → outputs the entire URL
console.log(document.title) → outputs the document title
console.log(document.head) → gives the head
console.log(document.body) → gives the body
console.log(document.forms) → gives all the forms
console.log(document.links) → gives all the links
console.log(document.images) → collection of all images
console.log(document.all) → gives an array collection of everything that is in the DOM
console.log(document.all)[10]
// Can also execute changes to the DOM within our script //
document.title = ‘123’
// Selectors //
***GET ELEMENT BY ID
console.log(document.getElementbyId(‘header-title’));
var headerTitle = document.getElementbyId(‘header-title’);
headerTitle.textContent = ‘Hello’ ;
headerTitle.innerText = ‘Goodbye’; → pays attention to the styling (main diff btwn .textContent and .innerText)
headerTitle.innerHTML = ‘<h3>Hello</h3>’; → places the HTML code inside of the element
header.style.borderBottom = ‘solid 3px #000’ → sets the style
*** GET ELEMENT BY CLASS NAME
var items = document.getElementsByClassName(‘list-group-item’);
console.log(items);
console.log(items[1]);
items[1].textContent = ‘Hello2’;
items[1].style.fontWeight = ‘bold’;
*** GET ELEMENT BY TAG NAME
document.getElementsByTagName(‘li’);
// Query Selector //
With query selector, we can use any CSS selector choose.
var header = document.querySelector(‘#main-header’); → **we are using the # because we are referring to an id name**
header.style.borderBottom = ‘solid 4px #ccc’;
// Query Selector All //
var titles = document.querySelectorAll(‘.title’);
console.log(titles);
— — — — — — — — — — — — — — — — — — — —
// Traversing the DOM //
What we mean by traversing the DOM is looking at the parent nodes, child nodes, and sibling (same level, next to each other, neither is inside the other) nodes.
//parentNode
console.log(itemList.parentNode);
console.log(itemList.parentNode.parentNode); → can stack them on top of each other and keep chaining these on
//parentElement
//childNodes
console.log(itemList.childNodes); → also shows link breaks, etc. which are annoying.
//children
console.log(itemList.children)
//firstChild → includes any whitespace, link breaks, etc. which is also annoying
//firstElementChild → gives us the first child element
//lastChild
//lastElementChild
//nextSibling
//nextElementSibling
//previousSibling
//previousElementSibling
— — — — — — — — — — — — — — — — — — — —
// Creating Elements and Inserting Them into DOM //
//createElement
//create a div
var newDiv = document.createElement(‘div’);
console.log(newDiv);
newDiv.className = ‘hello’; → adds the class
newDiv.id = ‘hello1’; → adds id
newDiv.setAttribute(‘title’, ‘Hello Div’); → adds attribute
var newDivText = document.createTextNode(‘Hello World’);
newDiv.appendChild(newDivText);
— — — — — — — — — — — — — — — — — — — —
// Event Listeners //
Event listeners allow us to detect user actions, such as mouse movements, clicks, submissions, typing, copying/pasting, etc.
Syntax:
element.addEventListener(event, function, useCapture);
Example:
element.addEventListener(“click”, myFunction);
function myFunction() {
alert (“Hello World!”);
}
The first parameter is the type of the event (like “click” or “mousedown”).
The second parameter is the function we want to call when the event occurs.
The third parameter is a boolean value specifying whether to use event bubbling or event capturing. This parameter is optional. (default = false, which will use bubbling). Bubbling/Capturing refers to the two ways to propagate an event.
There are two ways of event propagation in the HTML DOM, bubbling and capturing.
Event propagation is a way of defining the element order when an event occurs. If you have a <p> element inside a <div> element, and the user clicks on the <p> element, which element’s “click” event should be handled first?
In bubbling the inner most element’s event is handled first and then the outer: the <p> element’s click event is handled first, then the <div> element’s click event.
In capturing the outer most element’s event is handled first and then the inner: the <div> element’s click event will be handled first, then the <p> element’s click event.
With the addEventListener() method you can specify the propagation type by using the “useCapture” parameter (true or false).