This site is mobile accessible. Press the "Tap Here" button to use a larger font-size.
Smartphone icons created by Freepik - Flaticon
With the HTML DOM, you can navigate the node tree using node relationships.
Image courtesy www.W3Schools.com
Image courtesy www.W3Schools.com
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
A common error in DOM processing is to expect an element node to contain text.
<title id="demo">DOM Tutorial</title>
var myTitle = document.getElementById("demo").innerHTML;
Accessing the innerHTML property is the same as accessing the
of the first child:var myTitle = document.getElementById("demo").firstChild.nodeValue;
Accessing the first child can also be done like this:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
All the (3) following examples retrieves the text of an
element and copies it into a element:<html> <body> <h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML; </script> </body> </html>
<html> <body> <h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue; </script> </body> </html>
<html> <body> <h1 id="id01">My First Page</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue; </script> </body> </html>
<html> <body> <p>Hello World!</p> <div> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>document.body</b> property.</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
<html> <body> <p>Hello World!</p> <div> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>document.documentElement</b> property.</p> </div> <script> alert(document.documentElement.innerHTML); </script> </body> </html>
<h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName; </script>
Note: nodeName always contains the uppercase tag name of an HTML element.
The nodeType property is read only. It returns the type of a node.
<h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType; </script>
The most important nodeType properties are:
Node | Type | Example |
---|---|---|
ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
TEXT_NODE | 3 | W3Schools |
COMMENT_NODE | 8 | <!-- This is a comment --> |
DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Type 2 is deprecated in the HTML DOM (but works). It is not deprecated in the XML DOM.
Eventually the navigation links, above, will be replaced by these (previous) and (next) buttons below.
JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon