The nodes in the node tree have a hierarchical relationship with each other.
Parents, children and siblings are used to describe relationships.
- In a node tree, the parent node is called the root node.
- Each node has an exact parent element outside the root.
- A node can have several children.
- Brothers are nodes of the same parent.
ChildNodes [ nodenumber ]
The DOM allows you to do everything with the elements and their contents, but first we need to access the corresponding DOM object and assign it to a variable, and then we can change it.
All operations on the DOM begin with the document object. From there we can access any node.
An example diagram of links that allow navigation between DOM nodes.
The ParentNode property returns the parent node of the specified node as a Node object.
Note: In HTML, the document is the parent node of the HTML element, HEAD and BODY are the child nodes of the HTML element.
var x = document.querySelector('#test'); var name= x.parentNode.nodeName; alert(name);
The ChildNodes property returns a collection of child nodes as a NodeList object. The nodes in the collection are sorted as they appear in the source code and can be accessed with index numbers. The index starts at 0.
Note: The space in elements is treated as text and the text is treated as a node. Comments are also considered as nodes.
Tip: You can use the length property of the NodeList object to determine the number of child nodes, then navigate through all child nodes and get the information you want.
Tip: Use the children property to return a collection of item nodes (except text and comment nodes) of a node.
Tip: element.childNodes  will produce the same result as the firstChild property.
var x= document.querySelector("#test").childNodes.length; alert(x); //output:1