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

<!DOCTYPE html>
<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>

Preview

childNodes & children

Access the child nodes or elements of an element.

Example

<!DOCTYPE html>
<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>

Preview

Example

<!DOCTYPE html>
<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>

Preview

firstChild & lastChild

Access the first and last child nodes of an element.

Example

<!DOCTYPE html>
<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>

Preview

2.Traverse between sibling elements:

Next & Previous Sibling

Access the next and previous sibling nodes.

Example

<!DOCTYPE html>
<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>

Preview

Next & Previous ElementSibling

Access the next and previous sibling elements.

Example

<!DOCTYPE html>
<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>

Preview

3. Search for specific elements:

querySelector() & SelectorAll()

Retrieve elements using CSS selectors.

Example

<!DOCTYPE html>
<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>

Preview

getElementById(), ClassName(), & TagName()

Retrieve elements based on their ID, class name, or tag name.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript getElementById() Method</h1>
<p id="demo"></p>

<script>
    var name = "Webtutor.dev";
    document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Preview

Example

<!DOCTYPE html>
<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>

Preview

Example

<!DOCTYPE html>
<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>

Preview

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.

DOM Event Listener

DOM Nodes

HTML DOM Navigation

parentNode & Element

Example

childNodes & children

Example

Example

firstChild & lastChild

Example

Next & Previous Sibling

Example

Next & Previous ElementSibling

Example

querySelector() & SelectorAll()

Example

getElementById(), ClassName(), & TagName()

Example

Example

Example

Links

Tutorials

Connect with us