<div id="page">
<h1 id="header">TO DO LIST</h1>
<ul>
<h2>DataFlair’s JavaScript Tutorial</h2><DataFlair’s>
<li id="one" class="mandatory">Learning the concepts</li>
<li id="two" class="mandatory">Practising the codes</li>
<li id="three">Taking quizzes</li>
<li id="four">Solving Interview Questions</li>
</ul>
<!-- JavaScript code -->
</div>1. Creation of the DOM tree 2. Manipulation of the DOM tree
Every element, attribute, and text content in the HTML creates its own DOM node in the tree. A DOM tree consists of four main types of nodes:
Document node:
This is added at the top of the tree and represents the entire page in the browser. As stated above, it is the starting point in the DOM tree; you need to navigate via the document node to access any other node in your DOM tree.
Element nodes:
All the HTML elements like heading tags (<h1> to <h6>) and paragraph tags (<p>) in the page create an element node in the tree. You use these nodes to gain access to the elements’ attribute and text nodes.
Attribute nodes:
When the opening tags in the HTML document contain attributes, the tree represents them as attribute nodes. These are not the children of the element nodes but a part of them.
Text nodes:
Once you have access to the element node, you can reach the text content within that element, stored inside the text nodes of the DOM tree. These nodes cannot have child nodes. Thus, a text node always creates a new branch in the DOM tree, and no further branches come out of it.
Methods to Select an INDIVIDUAL Element Node
Following are the methods to select an individual element in the tree:
getElementById(‘id’): Uses the unique value of the element’s id attribute. The HTML must have an id attribute for the method to select it.
For example – getElementById(‘one’)
querySelector(‘css selector’): Uses a CSS selector, returns the first matching element.
For example – querySelector(‘h1’)
<script type="text/JavaScript">
document.getElementById('one').style.color="maroon"; //change font color
document.querySelector("h1").style.backgroundColor = "blue"; //change background color
</script>Methods to Select Multiple Elements (NodeLists)
There are three common ways to select multiple elements in the tree:
getElementsByClassName(): Selects all the elements that have a specified value for the class attribute.
For example – getElementsByClassName(‘mandatory’)
getElementsByTagName(): Selects all the elements that have the specified tag names.
For example – getElementsByTagName(‘h1’)
querySelectorAll(): Uses a CSS selector, returns all the matching elements.
For example – querySelectorAll(‘li.mandatory’)
<script type="text/JavaScript">
var list_qs = document.querySelectorAll("li.mandatory"); //NodeList
list_qs[0].style.backgroundColor = "blue"; //change background color
var list_cn = document.getElementsByClassName('mandatory'); //NodeList
list_cn[0].style.color="white"; //change font color
var list_tn = document.getElementsByTagName('h1'); //NodeList
list_tn[0].style.color="gray"; //change font color
</script>innerText, textcontent, innerHTML
Both these properties replace the entire content of the element, including all the markup present. But you should avoid using innerText since it is not part of any standard. Also, this method slows the speed of content loading on the page.
The innerHTML property gets the content of the element and returns it as one long string, including the markup it contains. But you should be careful of where you use this property since there are some security risks associated with it.
* innerText was non-standard, textContent was standardized earlier. * innerText returns the visible text contained in a node, while textContent returns the full text. -For example, on the following HTML <span>Hello <span style="display: none;">World</span></span>, innerText will return 'Hello', while textContent will return 'Hello World'. * As a result, innerText is much more performance-heavy: it requires layout information to return the result. * innerText is defined only for HTMLElement objects, while textContent is defined for all Node objects. * Another difference in behavior between innerText and textContent: If you change the text-transform of an element by CSS, it will affect the result of 'innerText', but not the result of textContent. For example: innerText of <div style="text-transform: uppercase;">Hello World</div> will be "HELLO WORLD", while textContent will be "Hello World"
<div id = "page">
<h3>Accessing and Updating Element Content</h3>
<p id = "p"><em>DataFlair</em> tutorial</p>
<p><em id = "p1"></em></p>
<p><em id = "p2"></em></p>
<p><em id = "p3"></em></p>
<!-- JavaScript Code -->
<script>
document.write("<b>Accessing elements:</b></br>");
var x = document.getElementById('p').textContent;
document.write("textContent: " + x + "</br>");
var y = document.getElementById('p').innerText;
document.write("innerText: " + y + "</br>");
var z = document.getElementById('p').innerHTML;
document.write("innerHTML: " + z + "</br>");
//updating elements
document.getElementById('p1').textContent = "<strong>JavaScript</strong> tutorials";
document.getElementById('p2').innerText = "<strong>JavaScript</strong> quizzes";
document.getElementById('p3').innerHTML = "<strong>JavaScript</strong> interview questions";
</script>
</div>add/remove HTML content is DOM Manipulation.
Another technique to add/remove HTML content is DOM Manipulation. To add HTML content to your webpage, you need to follow the three steps discussed below:
Create a new element using createElement().
Give it content by creating a text node using createTextNode() and adding it to the element using the appendChild() method.
Add the element to the DOM tree by finding the location and then using appendChild().
To remove an element from the webpage, the steps are as follows:
Store the element you want to remove in a variable.
Store the parent of that element in another variable.
Remove the element from its containing element using the removeChild() method.
Let’s implement these methods with the help of a code. We will use the same HTML and CSS code we discussed at the beginning of this tutorial. All you need to do is change the JavaScript in your program. In this example, we will add a paragraph <p> tag in the page, and remove the <h1> tag from it.
<script type="text/JavaScript">
//Adding new element
var newEl = document.createElement('p'); //create element node
var newText = document.createTextNode('Node added using DOM manipulation.'); //create text node
newEl.appendChild(newText); //add text node to element node
var position = document.getElementById("page"); //find the position where you want to add the node
position.appendChild(newEl); //add element in that position
//Removing an element
var removeEl = document.getElementById('header'); //store the element you want to remove
var containerEl = document.getElementById('page'); //find the element which contains the above element
containerEl.removeChild(removeEl); //remove the element
</script>