Skip to content

DOM childNodes

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

Childnodes example

    <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

childNodes example
<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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: