2016/11/13

Notes for JavaScript Tutorial for Beginners - Traversing The DOM


The 12 different HTML DOM node types

Source: http://www.w3schools.com/jsref/prop_node_nodetype.asp


Traversing The DOM

Traversing the Child Nodes Under the <body> Tag

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<html>
  <body>
    <div>
 Allowed readers:</div>
    <ul>
      <li>Bob</li>
      <li>Alice</li>
    </ul>
    <!-- 
 a comment node -->
    <script>  
      function go() {
        var childNodes = document.body.childNodes
        for(var i=0; i<childNodes.length; i++) {
            alert(childNodes[i])
        }
      }
    </script>
 <!-- 
 a comment node -->
    <button onclick="go()" style="width:100px">
 Go!</button>
 <!-- 
 a comment node -->
  </body>
</html>
Source: http://javascript.info/tutorial/traversing-dom

Result


In the example document above, document.body.childNodes[1] is DIV in all browsers except IE<9. In older IEs, there are no whitespaces, so document.body.childNodes[1] is UL.

Note, there is a text object immediately after the <body> tag and another one immediately before the </body> tag.
--------------------------------------------------------------------------------------------------------------------------

Traversing the Child Nodes Under Specific id
traverse.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<script src="jscode.js"> </script>
<link type="text/css" rel="stylesheet" href="stylesheet1.css">
</head>
<body>
<div id="main">
<p>
1.After defeating the Romans at the Battle of Lake Trasimene, Hannibal 
now moved his forces down south.
</p>
<!-- 
My personal comment goes here..  -->
<p>
2.The Romans were then forced to retreat to Rome. It was a total defeat.
</p>
<p>
3.After the horrific defeat at the Battle of Cannae, the Romans reinstituted 
Fabius' avoidance strategy.
</p>
<p>
4.The avoidance strategy worked but it took forever. It took almost two long 
decades to drive Hannibal out of Italy. 
</p>
<!-- 
My personal comment goes here..  -->
</div>
<p id="demo"></p>
&nbsp&nbsp
<button onclick="myFunction()"> Try It </button>
</body>
</html>

stylesheet1.css

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
body {
background-color: #9c9f84;
margin: 0px;
font-family: Verdana, Georgia, serif;
font-size: 14px;
}
 
#main {
background-color: #e5e4d7;
margin-left: 10px;
margin-right: 320px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 5px;
padding: 20px;
font-size: 110%;
}

jscode.js


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function myFunction() {
 var c = document.getElementById("main").childNodes;
 var d = document.getElementById("main");
    var txt = "";
    var i;
    for (i = 0; i < c.length; i++) {
  txt = txt + d.childNodes[i] + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
}

Result

-------------------------------------------------------------------------------------------------------------------------

Sample 2 - Traversing The Children Elements

The code below only traverses the element nodes (text nodes are skipped).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<html>
  <body>
    <div>
 Allowed readers:</div>
    <ul>
      <li>Bob</li>
      <li>Alice</li>
    </ul>
    <!-- 
 a comment node -->
    <script>  
      function go() {
        var children = document.body.children
        for(var i=0; i<children.length; i++) {
            alert(children[i])
        }
      }
    </script>
 <!-- 
 a comment node -->
    <button onclick="go()" style="width:100px">
 Go!</button>
 <!-- 
 a comment node -->
  </body>
</html>
Source: http://javascript.info/tutorial/traversing-dom

Result


References:

Traversing the DOM
http://javascript.info/tutorial/traversing-dom

JavaScript Tutorial for Beginners - 40 - Traversing the DOM
https://youtu.be/T_89UCU8PQU?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)