HTML DOM Navigation
DOM Navigation in JavaScript refers to the process of traversing and navigating through the Document Object Model (DOM) tree structure to access and manipulate elements within an HTML document.
The DOM provides a hierarchical representation of the HTML document, where each element is considered a node in the tree. DOM Navigation allows you to move between these nodes, targeting specific elements or collections of elements based on their relationships within the tree.
1. Traverse between parent and child elements:
parentNode & Element
Access the direct parent of an element.
Example
<html>
<body>
<h1>JavaScript ParentNode & Element Properties</h1>
<ul>
<li id="lang">HTML</li>
<li>CSS</li>
</ul>
<script>
let pNode = document.getElementById("lang").parentNode.nodeName;
document.write("ParentNode: ", pNode + "<br>")
let pElement = document.getElementById("lang").parentElement.nodeName;
document.write("ParentElement: ", pElement)
</script>
</body>
</html>
childNodes & children
Access the child nodes or elements of an element.
Example
<html>
<body>
<h1>JavaScript children Properties</h1>
<script>
let coll = document.body.children;
let txt = "";
for (let i = 0; i < coll.length; i++) {
txt += coll[i].tagName + " ";
}
document.write("children: ", txt)
</script>
</body>
</html>
Example
<html>
<body>
<h1>JavaScript childNodes Properties</h1>
<script>
let nodeList = document.body.childNodes;
let txt = "";
for (let i = 0; i < nodeList.length; i++) {
txt += nodeList[i].nodeName + " ";
}
document.write("childNodes: ", txt)
</script>
</body>
</html>
firstChild & lastChild
Access the first and last child nodes of an element.
Example
<html>
<body>
<h1>JavaScript firstChild & lastChild Properties</h1>
<ul id="lang">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<script>
let fChild = document.getElementById("lang").firstChild.innerHTML;
document.write("firstChild: ", fChild + "<br>")
let lChild = document.getElementById("lang").lastChild.innerHTML;
document.write("lastChild: ", lChild)
</script>
</body>
</html>
2.Traverse between sibling elements:
Next & Previous Sibling
Access the next and previous sibling nodes.
Example
<html>
<body>
<h1>JavaScript Next & Previous Sibling Properties</h1>
<ul>
<li id="lang1">HTML</li>
<li id="lang2">CSS</li>
<li id="lang3">JavaScript</li>
<li id="lang4">jQuery</li>
</ul>
<script>
let nSibling = document.getElementById("lang2").nextSibling.innerHTML;
document.write("nextSibling: ", nSibling + "<br>")
let pSibling = document.getElementById("lang4").previousSibling.innerHTML;
document.write("previousSibling: ", pSibling)
</script>
</body>
</html>
Next & Previous ElementSibling
Access the next and previous sibling elements.
Example
<html>
<body>
<h1>JavaScript Next & Previous ElementSibling Properties</h1>
<ul>
<li id="lang1">HTML</li>
<li id="lang2">CSS</li>
<li id="lang3">JavaScript</li>
<li id="lang4">jQuery</li>
</ul>
<script>
let nEleSibling = document.getElementById("lang1").nextElementSibling.innerHTML;
document.write("nextElementSibling: ", nEleSibling + "<br>")
let pEleSibling = document.getElementById("lang4").previousElementSibling.innerHTML;
document.write("previousElementSibling: ", pEleSibling)
</script>
</body>
</html>
3. Search for specific elements:
querySelector() & SelectorAll()
Retrieve elements using CSS selectors.
Example
<html>
<body>
<h1>JavaScript querySelector() & SelectorAll() Methods</h1>
<p>This is a p element.</p>
<ul>
<li class="lang">HTML</li>
<li>CSS</li>
<li class="lang">JavaScript</li>
</ul>
<script>
document.querySelector("p").style.border = "1px solid red";
let list = document.querySelectorAll(".lang");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "green";
}
</script>
</body>
</html>
getElementById(), ClassName(), & TagName()
Retrieve elements based on their ID, class name, or tag name.
Example
<html>
<body>
<h1>JavaScript getElementById() Method</h1>
<p id="demo"></p>
<script>
var name = "Webtutor.dev";
document.getElementById("demo").innerHTML = name;
</script>
</body>
</html>
Example
<html>
<body>
<h1>JavaScript getElementsByTagName() Method</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p id="demo"></p>
<script>
const lang = document.getElementsByTagName("li");
document.getElementById("demo").innerHTML = lang[2].innerHTML;
</script>
</body>
</html>
Example
<html>
<body>
<h1>JavaScript getElementsByClassName() Method</h1>
<ul class="lang-list">
<li class="lang">HTML</li>
<li class="lang">CSS</li>
<li class="lang">JavaScript</li>
</ul>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
const lang = document.getElementsByClassName("lang-list")[0];
lang.getElementsByClassName("lang")[2].innerHTML = "jQuery";
}
</script>
</body>
</html>
By utilizing these navigation methods and properties, you can dynamically locate and manipulate elements within the DOM tree, enabling dynamic content updates, event handling, and interaction with the HTML document structure.