Document Object Model

October 25, 2022

DOM

The Document Object Model provides a representation of your HTML to the browser in a tree data structure, allowing us to conduct element selection, document traversal, attribute setting, and document modification.

Sample Doc

<html>
    <head>
        <title>Sample Document</title>
    </head>
    <body>
        <h1>An HTML Document</h1>
        <p>This is a <i>simple</i> document.</p>
    </body>
</html>

Terms

node - an object in a tree; an element or piece of text parent - the node directly above a node in the tree child - a node one level lower than the current node descendents - all nodes below a node ancestors - all nodes above a node

Select Elements

DOM Selection

DOM selection will allow us to locate and retrieve elements from the DOM.

Select Element

document.getElementById(id) - gets an element by the provided id

Select Elements

document.getElementsByName(name) - gets a NodeList of multiple elements by the provided name (acts like an array of Elements)

document.getElementsByClassName(name) - gets a NodeList of multiple elements by the provided name

document.getElementsByTagName(tag) - gets a NodeList of multiple elements by the provided tag

Selecting Elements

This is a CSS-based selector string so “#item” matches the id of “item”, “.banded” matches the class of “banded”, etc.

document.querySelector(selector) - returns the first element matching the specified selector

document.querySelectorAll(selector) - returns a NodeList of multiple elements matching the specified selector

Selection Example

const paras = document.getElementsByTagName('p');
for (let i = 0; i < paras.length; i++)
    paras[i].style.display = 'none';

Selection Example

Limiting Search

The previous methods do not need to be limited to “document”. You can also specify them off of another element to limit your selection to just that element’s children.

cost parasDiv = document.querySelector('#parasDiv');
const paras = parasDiv.getElementsByClassName('banded');

paras would be a list of elements that had the class “banded” that were children of the #parasDiv element. Non-children with the “banded” class would not be in the NodeList.

Limit Search

Traversal

Document Traversal

DOM traversal allows us to traverse from an element through the DOM to find related portions of the document. This is good when we have an element and we need to do something to tis parent, siblings, or children.

Element.parentNode - the element’s parent node

Element.childNodes - a list of the element’s children (access like an array)

Element.firstChild -the first child of an element

Element.nextSibling - the next sibling in document order

Element.nodeValue - the text in a Text node

Element.nodeName - the tag name of an element

Delete Row Example

Attributes

With an element reference, we can get/set an Element’s attributes:

ele.id = 'newId';
ele.style.color = 'LightBlue';

DOM Modification

DOM MODIFICATION

The DOM provides many methods to modify the DOM structure. This is very useful for having interactive client-side components.

Element Creation

First, create the node and set its inner HTML:

const para = document.createElement('p');
para.innerHTML = 'Hello, world!';

Then, we need to add it somewhere in the DOM with append:

document.querySelector('#paras').append(para);

Prepending is also possible, which makes the added element the first child of the calling element:

document.querySelector('#paras').prepend(para);

Element Removal

const elementToRemove = document.querySelector('.banded');
elementToRemove.remove();