2.1 Usage of Document Object Model (DOM)

JavaScript
Learning outcome1:
Use Fundamental Features of JavaScript
CHAP X:
Manipulation of Browser DOM –
Usage of Document Object Model (DOM)
Table of Contents
1. Usage of Document Object Model (DOM).....................................................................................2
1.1. Introduction...........................................................................................................................2
1.2. DOM Tree..............................................................................................................................3
1.2.1. HTML DOM Tree of Objects...........................................................................................3
1.3. DOM Functions......................................................................................................................3
1.3.1. getElementById()...........................................................................................................4
1.3.2. querySelector()..............................................................................................................4
1.3.3. getElementsByClassName()...........................................................................................5
1.3.4. getElementsByTagName()..............................................................................................5
1.3.5. createElement().............................................................................................................6
1.4. JavaScript DOM for HTML and CSS........................................................................................6
1.4.1. JavaScript DOM for HTML..............................................................................................6
1.4.2. JavaScript DOM for CSS..................................................................................................7
1.5. Inner HTML and Inner Text Properties...................................................................................8
1.6. Exercises................................................................................................................................8
1. Usage of Document Object Model (DOM)
1.1. Introduction
The Document Object Model (DOM) is a programming interface for web documents. It represents
the structure of HTML, XML, or XHTML documents, enabling dynamic access and manipulation of
content using scripting languages like JavaScript.
1.2. DOM Tree
The backbone of an HTML document is tags.
According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are
“children” of the enclosing one. The text inside a tag is an object as well.
All these objects are accessible using JavaScript, and we can use them to modify the page.
For example, document.body is the object representing the <body> tag.Running this code will make
the <body> red for 3 seconds:
document.body.style.background = 'red'; // make the background red

setTimeout(() => document.body.style.background = '', 3000); // return back
1.2.1. HTML DOM Tree of Objects
The HTML DOM model is constructed as a tree of Objects
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
 JavaScript can change all the HTML elements in the page

 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page
1.3. DOM Functions
DOM Functions are JavaScript methods that allow you to interact with the DOM
Here is a more detailed explanation:
 The DOM is a tree-like structure that represents the HTML document.

 DOM Functions allow you to access and modify the DOM tree, which means you can change
the content, structure, and style of the web page.
 DOM Functions are a powerful tool for JavaScript developers, and they are used in many
web applications.
 It allows developers to access and manipulate the elements and content of a web page
dynamically
1.3.1. getElementById()
This retrieves an element by its unique ID attribute:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<div id="myDiv">Hello, World!</div>
<script>
const element = document.getElementById('myDiv');
console.log(element.textContent); // Output: "Hello, World!"

</script>
</body>
</html>
1.3.2. querySelector()
Retrieves the first element that matches a specific CSS selector.
<!DOCTYPE html>
<html>
<head>
JavaScript
</head>DOM for HTML and CSS
<body>
Inner HTML and Inner Text Properties
<div class="myClass">Hello, World!</div>
<script>
const element = document.querySelector('.myClass');
console.log(element.textContent); // Output: "Hello, World!"
</script>
</body>
</html>
1.3.3. getElementsByClassName()
Retrieves a collection of elements with the given class name.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="myClass">Hello</div>
<div class="myClass">World</div>
<script>
const elements = document.getElementsByClassName('myClass');
for (const element of elements) {
console.log(element.textContent);
}
// Output: "Hello"
// Output: "World"
</script>
</body>
</html>
1.3.4. getElementsByTagName()
Retrieves a collection of elements with the given tag name.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script>
const elements = document.getElementsByTagName('p');
for (const element of elements) {
console.log(element.textContent);
}
// Output: "Paragraph 1"
// Output: "Paragraph 2"
</script>
</body>
</html>
1.3.5. createElement()
Creates a new HTML element.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container"></div>
<script>
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph';
const container = document.getElementById('container');
container.appendChild(newElement);
</script>
</body>
</html>
1.4. JavaScript DOM for HTML and CSS
1.4.1. JavaScript DOM for HTML
The HTML DOM allows JavaScript to change the content of HTML elements. The easiest way to
modify the content of an HTML element is by using the innerHTML property.
To change the content of an HTML element, use this syntax:
document.getElementById(id).innerHTML = new HTML
This example changes the content of a <p> element:
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
JavaScript can create dynamic HTML content
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
In JavaScript, document.write() can be used to write directly to the HTML output stream:
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Notes: Never use document.write() after the document is loaded. It will overwrite the document.
1.4.2. JavaScript DOM for CSS
The HTML DOM allows JavaScript to change the style of HTML elements. To change the style of an
HTML element, use this syntax:
document.getElementById(id).style.property = new style
The following example changes the style of a <p> element:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
1.5. Inner HTML and Inner Text Properties
Two commonly used properties for manipulating content within HTML elements are innerHTML and
innerText.
 innerHTML returns the text content of an element, including all spacing and inner HTML
tags.
 innerText returns just the text content of the element, without CSS hidden text spacing and
tags, except <script> and <style> elements
1.6. Exercises
1. What are the main functions of the DOM?

 Access and modify the content of an HTML document.
 Add, remove, and move elements in an HTML document.
 Style elements in an HTML document.
 Respond to user events.
2. What is the DOM Tree?
The DOM Tree stands for Document Object Model Tree. It represents the hierarchical structure of an
HTML/XML document, where each element is a node in the tree
3. How do you create a new element in the DOM?
You can create a new element using the createElement() method.
const newElement = document.createElement('div');

4. How can you add a newly created element to the DOM?
You can use the appendChild() method to add the new element as a child of another
const newElement = document.createElement('div');

const parentElement = document.getElementById('parent');
parentElement.appendChild(newElement);
5. How do you remove an element from the DOM?
You can remove an element using the remove() method.
const elementToRemove = document.getElementById('elementId');

elementToRemove.remove();
6. How do you get the value of an input element using JavaScript?
You can use the value property to get the value of an input element
const inputValue = document.getElementById('inputId').value;
7. How can you change the CSS style of an element using JavaScript?
You can modify the style property of an element to change its CSS styles.
const element = document.getElementById('elementId');

element.style.color = 'red';
element.style.fontSize = '16px';
8. How can you set the HTML content of an element using innerHTML?
You can set the HTML content of an element using the innerHTML property.

element.innerHTML = '<p>This is a <strong>bold</strong> text.</p>';
9. How do you get the text content of an element using innerText?
You can retrieve the text content of an element using the innerText property.

const textContent = element.innerText;
10. What is the difference between innerHTML and innerText?
The innerHTML property represents the entire HTML content of an element, including the element's
tag name, attributes, and child nodes. The innerText property represents the text content of an
element, excluding the element's tag name and attributes.
11. What is the code to get the value of an attribute of an element?

const element = document.getElementById("myElement");
const attributeValue = element.getAttribute("attribute-name");
12. What is the code to set the value of an attribute of an element?

element.setAttribute("attribute-name", "new-value");
13. What is the code to listen to an event on an element?

element.addEventListener("click", function() {
console.log("The element was clicked");
});

2.1 Usage of Document Object Model (DOM)

Uploaded by

Copyright:

Available Formats

You might also like

2.1 Usage of Document Object Model (DOM)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2.1 Usage of Document Object Model (DOM)

Uploaded by

Copyright:

Available Formats

JavaScript

Use Fundamental Features of JavaScript

1.2. DOM Tree

The backbone of an HTML document is tags.

document.body.style.background = 'red'; // make the background red

1.2.1. HTML DOM Tree of Objects

The HTML DOM model is constructed as a tree of Objects

 JavaScript can change all the HTML elements in the page

1.3. DOM Functions

Here is a more detailed explanation:

 The DOM is a tree-like structure that represents the HTML document.

This retrieves an element by its unique ID attribute:

console.log(element.textContent); // Output: "Hello, World!"

Retrieves the first element that matches a specific CSS selector.

Retrieves a collection of elements with the given class name.

Retrieves a collection of elements with the given tag name.

for (const element of elements) {

Creates a new HTML element.

1.4.1. JavaScript DOM for HTML

To change the content of an HTML element, use this syntax:

document.getElementById(id).innerHTML = new HTML

This example changes the content of a <p> element:

JavaScript can create dynamic HTML content

document.getElementById(id).style.property = new style

The following example changes the style of a <p> element:

1.5. Inner HTML and Inner Text Properties

1. What are the main functions of the DOM?

3. How do you create a new element in the DOM?

You can create a new element using the createElement() method.

const newElement = document.createElement('div');

const newElement = document.createElement('div');

5. How do you remove an element from the DOM?

You can remove an element using the remove() method.

const elementToRemove = document.getElementById('elementId');

6. How do you get the value of an input element using JavaScript?

const inputValue = document.getElementById('inputId').value;

const element = document.getElementById('elementId');

const element = document.getElementById('elementId');

9. How do you get the text content of an element using innerText?

const element = document.getElementById('elementId');

10. What is the difference between innerHTML and innerText?

11. What is the code to get the value of an attribute of an element?

12. What is the code to set the value of an attribute of an element?

const element = document.getElementById("myElement");

13. What is the code to listen to an event on an element?

const element = document.getElementById("myElement");

You might also like