revision:
It returns a collection of an element's child elements (HTMLCollection object).
Syntax:
element.children : the collection of element nodes; the elements are sorted as they appear in the document.
property value:
none :
example
tagnames of DIV's children are :
number of elements in DIV :
<div> <p>tagnames of DIV's children are : <span id="prop1"></span></p> <p>number of elements in DIV : <span id="prop2"></span></p> </div> <script> const collection = document.getElementById("DIV").children; let text2 = ""; for (let i = 0; i < collection.length; i++) { text2 += collection[i].tagName + " , "; } document.getElementById("prop1").innerHTML = text2; let count = document.getElementById("DIV").children.length; document.getElementById("prop2").innerHTML = count; </script>
Click "Change" to change the background of all child elements of DIV1.
<div id="DIV1" > <p>Click "Change" to change the background of all child elements of DIV1.</p> <button onclick="firstFunction()">Change</button> <h3>I am a h3 element</h3> <div>I am a div element</div> <span>I am a span element</span> </div> <script> function firstFunction() { const collection = document.getElementById("DIV1").children; for (let i = 0; i < collection.length; i++) { collection[i].style.backgroundColor = "red"; } } </script>