DOM Manipulation

What is DOM ?

DOM = Document object model

Structured representation of an HTML document

Tree of Node and elements

We can use javascript to manipulate these node and elements and hence can bring interactivity to our pages.

Each element in dom has its own set of properties. So we can add, modify, remove the properties to any node/element of the DOM using javascript.

 

Given below is a representation of DOM tree

So you can see in above image we have document node, under document node we have html node, inside html tag we have head and body node. You can see head and body are at the same level. So we can say that they are siblings node.

So in this tutorial we will have two files

app.js and index.html

we will write our javascript code in app.js and since we have linked it into our index.html file, whenever we open index.html into browser we can see implementation of our javascript code as written in app.js

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript DOM Manipulation</title>
</head>
<body>
    
    <script src="app.js"></script>
</body>
</html>

 

app.js

let a;
a = document;
console.log(a);

Now when we open index.html file in chrome browser and go to console, we will see output like this

as you can see above document object is shown in console.

Now we will expand the document object

You can see document gives us the whole html as given in our index.html

You can implement this example and see it by expanding different nodes.

Now if you do slight change in your app.js

let a;
a = document.all;
console.log(a);

See row number 2 , instead of document you have put document.all , it will give you list (HTMLCollection)

Now let say you want 3rd elment from this html collection, which is head element, what you can do is you can change

a = document.all;

to 

a = document.all[2];

and you will get output as

If you want to see how many elements are there in dom , you can use the length property

a = document.all.length;

You can access other document properties too, given below are some examples

console.log(document.head);
console.log(document.body);
console.log(document.title);
console.log(document.doctype);
console.log(document.URL);
console.log(document.domain);
console.log(document.characterSet);
console.log(document.contentType);

Here is the output of above codes

Now let's look at another interesting example

First let's change our index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript DOM Manipulation</title>
</head>
<body>
    <h1>Links example</h1>
    <a href="http://www.a1.com">Link 1</a>
    <a href="http://www.a2.com">Link 2</a>
    <a href="http://www.a3.com">Link 3</a>
    <script src="app.js"></script>
</body>
</html>

Now see how we can get Link 3 using javascript

let a;
a = document.links;
console.log(a[2].href);

output in console will look like this

DOM Selectors

Dom selector are of two type

1. single element dom selectors

2. Multiple element dom selectors

 

 

Explaining how to use document.getElementById()

First let's change index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript DOM Manipulation</title>
</head>
<body>
    <h1 id="heading1">Get Element by ID 1</h1>
    <h2 id="heading2">Get Element by ID 2</h2>
    <script src="app.js"></script>
</body>
</html>

When we open above html document in browser it will look like this

 

Now let say we want to change color of h2 element which has id=heading2 and the new color is red, how we can do that using javascript ?

Let's look into our app.js file and do the changes as given below

let a;
a = document.getElementById("heading2");
a.style.color = "red";

Now the webpage will look as given below

 

Change content of a node

There are three properties you can edit for a node which will change content  of a node

let a;
a = document.getElementById("heading2");
a.textContent = "This is changed heading";
a.innerText = "Changed heading with innerText"
a.innerHTML = "<span style='color:green'>Heading in green color</span>"

 

 

document.querySelector()

To explain how to use querySelector, let's first change our index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript DOM Manipulation</title>
</head>
<body>
    <ol>
        <li>First Row</li>
        <li>Second Row</li>
        <li>Third Row</li>
        <li>Fourth Row</li>
        <li>Fifth Row</li>
    </ol>
    <script src="app.js"></script>
</body>
</html>

When you open this page in browser it will look like 

 

Now we will do changes to app.js file

document.querySelector('li').style.color = 'red';

querySelector will pick the first li element it find into the webpage and change tect color to red so now the web page will look like

If you want to change last li element on webpage, how you can do that ? 

document.querySelector('li:last-child').style.color = 'blue';

If you want to change 3rd li element

document.querySelector('li:nth-child(3)').style.color = 'green';

to change first even li element

document.querySelector('li:nth-child(even)').style.color = 'pink';

webpage will look something like this

 

 

document.getElementsByClassName()

First change the index.html file 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript DOM Manipulation</title>
</head>
<body>
    <ol>
        <li>First Row</li>
        <li class="special">Second Row</li>
        <li>Third Row</li>
        <li>Fourth Row</li>
        <li class="special">Fifth Row</li>
    </ol>
    <script src="app.js"></script>
</body>
</html>

As you can see above we have added class=special to two list items.

Webpage looks like

Now we will use javascript to change text color of these two list items.

let items = document.getElementsByClassName('special');

for (var i = 0; i < items.length; i++) {
    items[i].style.color = 'red';
}

Now the webpage will look like this

Similarly we have other selectors like 

document.getElementsByTagName()
document.querySelectorAll();