DOM Model¶

DOM - Document Object Model, which is a way to present XML and HTML documents as an object model. The DOM links these documents to a script that can manipulate it. This model is platform and programming language independent.

The W3C DOM defines a set of classes and interfaces that allow access to the document structure and its modification by creating, removing and modifying so-called nodes.

Let's consider the following HTML code:

<!DOCTYPE html>
<html lang="pl">
<body>
    <p class="class-name">Lorem ipsum dolor.</p>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

While the web page is loading, the browser creates a DOM model. The following graphical representation shows what the DOM model looks like for the above example. The model has a Parent-child relationship (one to many).

dom model

`document` object¶

JavaScript is one of the languages that allows you to manipulate the DOM model using scripts in your browser. The document object is the main object in the DOM model. It represents the entire current document, e.g. a website in a browser. If you want to access any HTML element, always start referencing with object document. You can then choose from a number of available methods.

Selecting elements¶

The document object allows the selection of elements using available methods. These methods include:

getElementById, which allows to select an element, by its identifier (i.e., by the value of the id attribute), e.g:

<div id="ex1">Hello</div>

const element = document.getElementById('ex1');
console.log(element); // <div id="ex1">Hello</div>
console.log(element.innerText); // Hello

getElementsByClassName, which returns all elements containing the class, e.g:

<div class="c1">Hello</div>
<div class="c1">World</div>

const elements = document.getElementsByClassName('c1');
console.log(elements.length); // 2

getElementsByTagName, which returns all elements with a given tag name, e.g:

<ul>
    <li>Hello From</li>
    <li>DOM</li>
</ul>

const elements = document.getElementsByTagName('li');
for (let idx = 0; idx < elements.length; idx++) {
    console.log(elements[idx]); // <li>Hello From</li> and then <li>DOM</li> will appear on the screen 
}

querySelector, which finds at most one element, using a specific CSS selector.
querySelectorAll, which finds all elements that fall under a given CSS selector.

The next example shows the use of these methods:

<div>
    <p class="big-text">Query selector example</p>
    <section class="big-text">This is some section</section>
</div>

const element = document.querySelector('.big-text');
console.log(element); // <p class="big-text">Query selector example</p>

const elements = document.querySelectorAll('.big-text');
console.log(elements); // NodeList(2) [p.big-text, section.big-text]

DOM manipulation¶

The document also has many methods to manipulate the DOM. These methods include

createElement(type), which creates an HTML element, e.g:

const element = document.createElement("div");

appendChild(element), which adds an element as the last child of a parent, e.g:

For a given HTML code:

<div id="some-id">
    <p>Hello</p>
</div>

by executing the following code:

const father = document.getElementById("some-id");
const child = document.createElement("div");

father.appendChild(child);

we will get:

<div id="some-id">
    <p>Hello</p>
    <div></div>
</div>

removeChild(element), which removes the child of an element, e.g:

<ul id="langs">
    <li>Java</li>
    <li>JS</li>
    <li>HTML</li>
</ul>

var list = document.getElementById("langs");

if (list.hasChildNodes()) {
    list.removeChild(list.childNodes[0]);
}

By fetching an element, we can then use certain properties to retrieve and change its content. These properties are:

innerHTML, which is used to retrieve and set the HTML code in an element
innerText, which is used to retrieve and set text in an element

The next example shows the use of these properties:

Let's consider the following HTML code:

<div id="father">
    <ul id="langs">
        <li id="child-a">Java</li>
        <li>JS</li>
        <li>HTML</li>
    </ul>
</div>

let element = document.getElementById('father');
console.log(element.innerHTML); // <ul id="langs"> <li id="child-a">Java</li> <li>JS</li> <li>HTML</li> </ul>

element = document.getElementById('child-a');
console.log(element.innerText); // Java

element.innerText = 'Lets change text'; // changing text inside the HTML element

element = document.getElementById('child-a');
console.log(element.innerText); // Lets change text

classList API¶

classList API allows you to work with many classes of HTML elements in a comfortable way. You can read their lists, add or remove them.

Let's consider the following HTML code:

<div id="father main container" class="c0"></div>

The collection containing information about classes can be accessed using the classList property. Then we can use the following methods:

contains - checks if an element has a particular class given as an argument
add - adds a class to the element given as an argument
remove - removes a certain class of element given as an argument

const classes = document.getElementById('father').classList;
console.log(classes.length); // 3

if (classes.contains('container')) {
    console.log('YES I contain class named container'); // this line will be displayed on the screen
}

classes.add('c1');
classes.remove('c0');

classes.forEach(elem => console.log(elem)); // main, container, c1

DOM Model¶

document object¶

Selecting elements¶

DOM manipulation¶

classList API¶

`document` object¶