HTML DOM childNodes Property Last Updated : 13 Jun, 2023 Comments Improve Suggest changes Like Article Like Report The childNodes property returns a node's child nodes as a nodeList object. White spaces and comments are also considered as nodes. The nodes are assigned index numbers, starting from 0. Searching and sorting operations can be performed using index number on the node list. Syntax: elementNodeReference.childNodes; Return Value: It returns a collection of child nodes of a particular node as a nodeList object (including white spaces, texts, and comments, which are considered as nodes). Properties: length property: It determines the number of child nodes of the object. It is a read only property. Syntax:elementNodeReference.childNodes.length;elementNodeReference.childNodes[index_number].length;Example-1: Showing length property. html <!DOCTYPE html> <html> <body> <h1><center>Geeks <button onclick="node()">Press</button> </center> </h1> <h4>Clicking on the 'Press' button will return the length of childNodes[0].</h4> <p id="gfg"></p> <script> function node() { // Return the length of child node. var c = document.getElementsByTagName( "BUTTON")[0]; var x = c.childNodes[0].length; document.getElementById("gfg").innerHTML = x; } </script> </body> </html> Output: Before clicking on the button: After clicking on the button: nodeName property: It returns the name of the specified node. If the node is an element node, it will return the tag name else if the node is an attribute node, it will return the attribute name else for different node types, different names will be returned. Syntax:elementNodeReference.childNodes[index_number].nodeName;Example-2: Showing nodeName property html <!DOCTYPE html> <html> <body> <h1><center>Geeks <button onclick="node()">Press </button></center> </h1> <h4>Clicking on the 'Press' button will return the node name of childNodes[0].</h4> <p id="gfg"></p> <script> function node() { // Return the name of specific node name. var c = document.getElementsByTagName( "BUTTON")[0]; var x = c.childNodes[0].nodeName; document.getElementById("gfg").innerHTML = x; } </script> </body> </html> Output: Before clicking on the button: After clicking on the button: nodeValue property: It sets or returns the node value of the specified node. Syntax:elementNodeReference.childNodes[index_number].nodeValue;Example-3: Showing nodeValue property html <!DOCTYPE html> <html> <body> <h1><center>Geeks <button onclick="node()">Press </button></center> </h1> <h4>Clicking on the 'Press' button will return the node value of childNodes[0].</h4> <p id="gfg"></p> <script> function node() { // Return the node value. var c = document.getElementsByTagName("BUTTON")[0]; var x = c.childNodes[0].nodeValue; document.getElementById("gfg").innerHTML = x; } </script> </body> </html> Output: Before clicking on the button: After clicking on the button: Browser Support: The listed browsers support DOM childNodes property: Google Chrome 1+Edge 12+Firefox 1+Internet Explorer 5+Opera 7+Safari 1.2+ Comment More infoAdvertise with us R riarawal99 Follow Improve Article Tags : Web Technologies HTML HTML-DOM HTML-Property Similar Reads HTML | DOM Style position Property The position property sets or returns the type of positioning method used by the element. It may be static, relative, absolute or fixed. Syntax: Return position syntax: object.style.position Set position syntax: object.style.position = "static | absolute | fixed | relative | sticky | initial | inher 4 min read HTML | DOM Style textDecorationLine Property The Style textDecorationLine property in HTML DOM used to set the decoration for a line. We can specify any number of decorations for a line. It returns the decoration that is given to the text. Syntax: It returns the textDecorationLine property. object.style.textDecorationLineIt is used to set the 2 min read HTML | DOM Style borderImageSlice Property The borderImageSlice property is used to specify the inward offsets of the image border. The user can specify the value of this property in terms of percentage, number or global values. Syntax: object.style.borderImageSlice = "number|%|fill|initial|inherit" Return Values: It returns a string value, 3 min read HTML | DOM Style clear Property The DOM Style clear property in HTML is used to set or get the position of the specific element relative to floating objects. Syntax To get clear property:object.style.clearTo set clear property:object.style.clear = "none|left|right|both|initial|inherit" Properties Value: valuedescriptionleftDoes no 2 min read HTML DOM Table Object The HTML DOM Table object represents an HTML <table> element in the Document Object Model (DOM). It provides properties and methods to manipulate tables, such as adding or deleting rows and columns, accessing individual cells, or modifying the table's structure dynamically.Syntax:To access tab 3 min read HTML | DOM MouseEvent offsetX Property The MouseEvent offsetX property is a read-only property which is used for returning the x-coordinate of the mouse pointer, relative to the target element. Syntax : event.offsetX Return Value: It returns a number which represents the horizontal coordinate of the mouse pointer, in pixels. Below progra 1 min read HTML | DOM Style columns Property HTML DOM Style columns Property is used to set the width of the column & column count. Syntax: To Return the column property: object.style.columns To Set the column property: object.style.columns= "auto|columnwidth columncount| initial|inherit" Property Values: Auto: Sets both values of width 2 min read HTML | DOM Style height Property HTML DOM Style height Property is similar to CSS Height Property but it is used to set or get height of an element dynamically. Syntax : To set the height property : object.style.height = auto|length|%|initial|inherit;To get height property value: object.style.height Property Values: ValueDescriptio 2 min read HTML DOM Base Object The Base Object in HTML DOM is used to represent the HTML <base> element. This tag is used to set or get the properties of <base> element. This element can be accessed by using getElementById() method. Syntax: document.getElementById("Base_ID"); This "Base_ID" is assigned to HTML <bas 2 min read HTML | DOM Meta Object The DOM Meta Object is used to represent the HTML <meta> element. The Meta element is accessed by getElementById().Properties: Name attribute: This attribute is used to define the name of property.http-equiv attribute: This attribute is used to get http response message header.Scheme attribute 2 min read Like