Preview:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>children - DOM</title>
  </head>
  <body>
    <ul id="result">
        <li>Apple</li>
        <li>Orange</li>
        <li>Banana</li>
        <li>Pear</li>
        <li>Tamato</li>
    </ul>

    <div id="parent">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non laboriosam
        quas fuga libero vero autem vel maiores animi rerum! Ab quod quo sunt
        beatae et veniam suscipit praesentium fuga maxime?
      </p>
      <span
        >Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facere
        ipsa at adipisci dolorem iure qui nostrum odio, vero ducimus debitis
        sapiente quis iste aperiam odit fugiat velit aut necessitatibus?
      </span>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias eum
        excepturi reprehenderit quisquam dignissimos cum temporibus non omnis
        sequi quasi obcaecati consequatur cupiditate possimus eius, beatae,
        dolores accusantium maiores ipsum.
      </p>
    </div>

    <script src="children.js"></script>
  </body>
</html>



const result = document.getElementById("parent");

//---------- All Children with white spaceas ---------- //
const allChildren = result.childNodes;
console.log(allChildren);

//---------- Only Tags Nodes without White space ---------- //
const chilDren = result.children;
console.log(chilDren);

//---------- First child (text) ---------- //
const first_Child = result.firstChild;
console.log(first_Child);

//---------- First child (Node) ---------- //
const first_Child = result.firstElementChild;
console.log(first_Child);


//---------- Last child (text)---------- //
const last_Child = result.lastChild;
console.log(last_Child);

//---------- Last child (Node)---------- //
const last_Child = result.lastElementChild;
console.log(last_Child);
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter