What is the DOM?

Masud Ahmed
Sep 4, 2018 · 4 min read

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).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade