DOM model¶

The DOM is the so-called Document Object Model, which is a way of presenting XML and HTML documents in the form of an object model. The DOM links these documents to a script that can manipulate it. This model is platform and language independent.

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

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 the DOM. The graphical representation below shows how the DOM model for the example above looks like. In this model there are parent-child (one to many) relationships.

dom model

Object `document`¶

JavaScript is one of the languages that allow you to manipulate the DOM through scripts in your browser. The document object is the main object in the DOM. It represents the entire current document, e.g. a web page in a browser. If you want to access any HTML element, you should always start the reference with object document. Then we can choose from a number of available methods.

Selecting items¶

The document object allows you to select elements using any of the available methods. These methods are:

getElementById, which allows you to select an element by its identifier (i.e. the value of theid 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 given 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 the 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]); // on the screen there will be displayed <li>Hello From</li> and then <li>DOM</li>
}

querySelector, which finds at most one item using a particular CSS selector.
querySelectorAll, which finds all items that fall under the given CSS selector.

Another 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 object also has many DOM manipulation methods. These methods include:

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

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

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

For a given HTML code:

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

using the following code:

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

father.appendChild(child);

otrzymamy:

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

removeChild(element), which removes the child of the given 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 downloading an element, we can then use certain properties to download and change their content. These properties are:

innerHTML, which is used to get and set the HTML code in a given element
innerText, which is used to get and set text in a given element

Another example shows the use of these properties:

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'; // change the text inside an HTML element

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

classList API¶

The classList API allows you to conveniently work with multiple classes of HTML elements. It allows you to read their list, add or delete.

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 the specified class given as an argument
add - adds the specified class to the element given as an argument
remove - Removes the specified item class 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
}

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

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

DOM model¶

Object document¶

Selecting items¶

DOM manipulation¶

classList API¶

Object `document`¶