DOM Node Properties
A DOM node is an object with methods and properties containing information about node itself. Some of the properties are read-only and some can be update.
nodeType
Every HTML DOM Node have the nodeType property.
nodeType property is the read-only property, Simply we can not modify nodeType property.
HTML have the 12 types of the node, which listed below:
const ELEMENT_NODE = 1; const ATTRIBUTE_NODE = 2; const TEXT_NODE = 3; const CDATA_SECTION_NODE = 4; const ENTITY_REFERENCE_NODE = 5; const ENTITY_NODE = 6; const PROCESSING_INSTRUCTION_NODE = 7; const COMMENT_NODE = 8; const DOCUMENT_NODE = 9; const DOCUMENT_TYPE_NODE = 10; const DOCUMENT_FRAGMENT_NODE = 11; const NOTATION_NODE = 12;
Every nodeType have the some number value, and we can not change the value of it.
Most time we are using the ELEMENT_NODE which have the value 1 and the TEXT_NODE which have the value 3.
nodeType is property which returns the type of the HTML node.
The output of the nodeType always will be from the above list. Which indicates which type of node this.
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
<div>I am element node 1</div>
I am text node.
<div>I am element node 2</div>
<script type="text/javascript">
var childs = document.body.childNodes;
for (var i = 0; i < childs.length; i++) {
if (childs[i].nodeType == 1) {
console.log(childs[i].nodeName + " : " + childs[i].innerHTML.trim());
} else {
if (childs[i].nodeValue.trim() != "") {
console.log(childs[i].nodeName + " : " + childs[i].nodeValue.trim());
}
}
}
</script>
</body>
</html>
//DIV : I am element node 1
//#text : I am text node.
//DIV : I am element node 2
//SCRIPT : var childs = document.body.childNodes;
//
//for (var i = 0; i < childs.length; i++) {
// if (childs[i].nodeType == 1) {
// console.log(childs[i].nodeName + " : " + childs[i].innerHTML.trim());
// } else {
// if (childs[i].nodeValue.trim() != "") {
// console.log(childs[i].nodeName + " : " + childs[i].nodeValue.trim());
// }
// }
//}
All the HTML tag likes div, h1, small, b, i, u, span, p and etc come under the ELEMENT_NODE nodeType.
We wrote the text in the HTML document without the any HTML tag so it comes under the TEXT_NODE nodeType.
nodeName, tagName
nodeName and tagName returns the name of the HTML tag, every element tag and non-element tag have the name.
nodeName always returns the tag name in the uppercased, no matter in which case we wrote the tag.
For the element nodes nodeName and tagName are the same.
Both the nodeName and the tagName are read-only, so we can not modify it.
The difference is only that nodeName is also exist in the non-element tag, whereas the tagName does not exist in the non-element tag.
nodeName returns the special value for the non-element tag, like the #text for the TEXT_NODE. but the tagName always returns the undefined for the non-element tag.
The tagName property is undefined on most node types.
So always use the nodeName to get the name of the any node.
nodeName Example
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
<h2>Hello World</h2>
<p>I am here!!!</p>
JavaScript is awesome.
<script type="text/javascript">
var childs = document.body.childNodes;
for (var i = 0; i < childs.length; i++) {
console.log(childs[i].nodeName);
}
</script>
</body>
</html>
//#text
//H2
//#text
//P
//#text
//SCRIPT
tagName Example
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
<h2>Hello World</h2>
<p>I am here!!!</p>
JavaScript is awesome.
<script type="text/javascript">
var childs = document.body.childNodes;
for (var i = 0; i < childs.length; i++) {
console.log(childs[i].tagName);
}
</script>
</body>
</html>
//undefined
//H2
//undefined
//P
//undefined
//SCRIPT
So you can spot the difference in the above example, where the nodeName returns the name of the element tag as well as for the non-element tag, but the tagName only returns the name of the element tag not for the non-element tag, tagName returns the undefined for the non-element tag.
So always use the nodeName to get the name of the any DOM.
innerHTML
The innerHTML property help us to get or set the contents of the any HTML tag.
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
<h2>Hello World</h2>
<script type="text/javascript">
alert(document.body.innerHTML);
document.body.innerHTML = "<h2>Bye Bye!!!</h2>";
</script>
</body>
</html>
When we run the above code, one alert popup will be display with the below text.
<h2>Hello World</h2>
<script type="text/javascript">
alert(document.body.innerHTML);
document.body.innerHTML = "<h2>Bye Bye!!!</h2>";
</script>
After that below message will be display in the browser.
Bye Bye!!!
The innerHTML should contain a valid HTML, But when we set the any invalid HTML in the innerHTML than browser will automatically parsed the HTML and display in the browser
The innerHTML property will work with any HTML node.
Append the new contain to the BODY
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
<h2>Hello World</h2>
<script type="text/javascript">
document.body.innerHTML += "<h2>Bye Bye!!!</h2>";
</script>
</body>
</html>
//Hello World
//
//Bye Bye!!!
In above example, I added the Bye Bye!!! into the body tag using the innerHTML, So it will display in the screen.
But the problem is that actually we can not append the contain to the body, When we append something to the body than the whole body will be recreated and reloaded into the browser.
So all the contain of the body will reloaded, all the images and all the contain will be reloaded.
nodeValue
nodeValue is the same as the innerHTML. But the innerHTML is works only for the element nodes.
For the other types of the node nodeValue will be worked, like the TEXT_NODE.
nodeValue will be not works for the element nodes. If we used the nodeValue on the element node than it will be returns the null.
Example of the nodeValue
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
I am text node.
<h2>I am element tag.</h2>
<script type="text/javascript">
var childs = document.body.childNodes;
for (var i = 0; i < childs.length; i++) {
console.log(childs[i].nodeValue);
}
</script>
</body>
</html>
// I am text node.
// null
// null
If you see in the above example, you will found that only the value of the text node is displayed. The value for the h2 and the script tag will be not displayed because it is the element node.
If we use the nodeValue on the element node than it will returns the null. Like the output of the above example, the value of the h2 and script tag is null.
Example of the innerHTML
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
I am text node.
<h2>I am element tag.</h2>
<script type="text/javascript">
var childs = document.body.childNodes;
for (var i = 0; i < childs.length; i++) {
console.log(childs[i].innerHTML);
}
</script>
</body>
</html>
// undefined
// I am element tag.
// var childs = document.body.childNodes;
//
// for (var i = 0; i < childs.length; i++) {
// console.log(childs[i].innerHTML);
// }
As you seen in the above innerHTML example, the value of the TEXT_NODE is not displayed, but the value for all the element node is displayed.