Traverses the DOM
The DOM is the foundation of almost everything JavaScript work with the browser and web documents. It is the interface that allows us to interact with web-page's content, and it's essential to understand how to get around within that model. Traversing the DOM means "move through", are used to "find" HTML elements (DOM Node) based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire. The document object is the root of every node in the DOM. DOM represents the HTML page as a tree, in much the same way you might represent your ancestry as a "family tree" . Learning how to navigate up and down the DOM tree and move from branch to branch is essential to understanding how to work with JavaScript and HTML. The root object in tree structure is the document object, which can have parents, children, and siblings and this determines by its position in the tree structure. Each element in the tree structure is called a Node.
<!DOCTYPE html>
<html>
<head>
<title>The DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
<p id="pr">Test Paragraph</p>
</body>
</html>
DOM Nodes
Each node in the DOM tree is an object representing a single element on the page. Nodes understand their relationship to other nodes in their immediate vicinity , and contain a good deal of information about themselves. The parent of any node is the node that is one level above it, or closer to the document in the DOM hierarchy .The children of a node are the nodes that are one level below it. The siblings of a node are any node on the same tree level in the DOM. All properties, except childNodes, contain a reference to another node object. The childNodes property contains a reference to an array of nodes. There are several standard methods one can use to select one or more nodes from an HTML document. The three most popular are:- getElementById
- getElementsByClassName
- getElementsByTagName
<!DOCTYPE html>
<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col1">Sunday</li>
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="findDay()">Try it</button>
<script>
function findDay() {
var fChild = document.getElementById("days").childNodes[1].innerHTML;
alert("First Child :" + fChild);
}
</script>
</body>
</html>
Browser ViewDays:
- Sunday
- Monday
- Tuesday
- Wednesday
<!DOCTYPE html>
<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col1">Sunday</li>
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="findElements()">Try it</button>
<script>
function findElements() {
var childNodes = document.body.childNodes;
for(var i=0; i<=childNodes.length; i++) {
alert(childNodes[i].innerHTML)
}
}
</script>
</body>
</html>
Browser ViewDays:
- Sunday
- Monday
- Tuesday
- Wednesday
Related Topics