The node is an interface that is inherited by a large number of DOM API objects. These types provide similar treatment. If the methods and properties are not relevant, it returns a null value.

• childNodes: The childNodes method returns a live NodeList containing all its children.
• firstChild: Returns the first child of the connected node. Returns null if the node does not have a child.
• lastChild: Returns the last child of the connected node. Returns null if the node does not have a child.
• parentNode: This method returns a parent node of the specified node as the Node object. This property is read-only.
• nextSibling: Represents the next node of the connected node. If there is no such node, it returns null.
• previousSibling: Represents the previous node of the connected node. If there is no such node, it returns null.
• textContent: Returns the text content of an element.
• parentElement: This method returns the parent element of the node. If the node has no element, null is returned.
• isConnected: Checks whether the node is connected to the element. Returns true if bound. Returns false if it is not connected.

HTML DOM childNodes()

The element.childNodes property returns an array of subnodes bound to the element node.
These elements are kept as reference, not as a string, but as a reference point. In other words, the element itself is held. The HTML DOM is a document object that has only a single HTML element in its HTML element.

Syntax:

element.childNodes

childNodes Examples

Example 1

    <div class="text">
        <p >Text 2</p>
        <p >Text 3</p>
    </div>

    <button onclick="childFunction()">SHOW</button>
    <div id="show"></div>

    <script>

        function childFunction() {
            let txt = document.querySelector(".text");
            if (txt.hasChildNodes()) {
                let child = txt.childNodes;
                for (let i = 0; i < child.length; i++) {
                    document.getElementById("show").innerHTML = child[i].nodeName;
                }

            }
        }

    </script>

#text

Example 2

    <div id="box">
        <p >Text 1</p>
        <p >Text 2</p>
    </div>

    <button onclick="childFunction()">SHOW</button>

    <script>

        function childFunction() {
            let box = document.getElementById("box").childNodes;
            box[1].style.backgroundColor = "red";
            box[2].style.backgroundColor = "orange";
        }

    </script>

Example 3

<p>Click the button get info about the body element's child nodes.</p>
    <button onclick="childFunction()">Try it</button>

    <p></p>
    <div></div>

    <p id="demo"></p>

    <script>
        function childFunction() {
          var c = document.body.childNodes;
          var txt = "";
          var i;
          for (i = 0; i < c.length; i++) {
            txt = txt + c[i].nodeName + "<br>";
          }
          document.getElementById("demo").innerHTML = txt;
      }
    </script>

Published by Truecodes

Instagram: codeblogger website: truecodes.org View all posts by Truecodes