Javascript DOM HTML Element children Property

Introduction

The children property returns a collection of an element's child elements, as an HTMLCollection object.

Get a collection of the <body> element's children: 

var c = document.body.children;

Click the button to get the tag names of the body element's children.

View in separate window 

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Test</button>

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

<script>
function myFunction() {/*from   w  w  w . j av a 2 s .  c om*/
  var c = document.body.children;
  var txt = "";
  var i;
  for (i = 0; i < c.length; i++) {
    txt = txt + c[i].tagName + "<br>";
  }

  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

The elements in the collection are sorted as they appear in the source code.

They can be accessed by index numbers. The index starts at 0.

The childNodes property contain all nodes, including text nodes and comment nodes.

The children property only contain element nodes.




PreviousNext

Related