Introduction to the DOM

Introduction

The Document Object Model usually referred to as the DOM, is an essential part of making websites interactive. It is an interface that allows a programming language to manipulate the content, structure, and style of a website. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.

What is the DOM?

At the most basic level, a website consists of an HTML document. The browser that you use to view the website is a program that interprets HTML and CSS and renders the style, content, and structure into the page that you see.

JavaScript is an interactive language, and it is easier to understand new concepts by doing. Let’s create a very basic website. Create an index.html file and save it in a new project directory.

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>

a website document — a doctype, and an HTML tag with the head and body nested inside.

The Document Object A document object is a built-in object that has many properties and methods that we can use to access and modify websites. To understand how to work with the DOM, you must understand how objects work in JavaScript. Review Understanding Objects in JavaScript if you don’t feel comfortable with the concept of objects.

In Developer Tools on index.html, move to the Console tab. Type document into the console and press ENTER. You will see that what is output is the same as what you see in the Elements tab.

document;

output

Output#document
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>

Let’s demonstrate how the DOM can be modified by client-side JavaScript. Type the following into the console:

document.body;

The console will respond with this output:

<body>
  <h1>Document Object Model</h1>
</body>

a document is an object, the body is a property of that object that we have accessed with dot notation. Submitting document. body to the console outputs the body element and everything inside of it.

In the console, we can change some of the live properties of the body object on this website. We’ll edit the style attribute, changing the background color to fuchsia. Type this into the console:

document.body.style.backgroundColor = 'fuchsia';

for more examples the following link contains a few examples and we are going to try some dom examples in the console https://javascript.info/

//1.Selecting all the anchor (a) elements on the page and write down the length of elements.
let ancher = document.querySelectorAll('a');
ancher.length
243

//2.Changeing the text color of all the anchor elements to red color
a.forEach((val)  => {
val.style.color = "red";
})

//3. Selecting the first h1 element on the page using querySelectorAll
let h1 = document.querySelectorAll(`h1`);
alert(h1);

//5.Select all the paragraph elements on the page and write down the length of the elements.
let p = document.querySelectorAll('p');
p.length
//the length is 7

//6. Change the text color of alternate paragraph element to tomato

p.forEach((val)  => {
val.style.color = "tomato";
});
//Selecting all the li element and change the background color of alternate li elements to be black
let li =  document.querySelectorAll('li')
li.forEach((val)  => {
val.style.backgroundColor = "black";
})

ravindra

ravindra

Introduction to the DOM