Home > Developer > JavaScript
Definitions and usage
The ChildNodes property returns a collection of child nodes of a node to nodelist the object.
Tip: You can use the Length property to determine the number of child nodes, and then you can iterate through all of the child nodes and extract the information you need.
Browser support
All major browsers support the ChildNodes property.
Grammar
Element.childnodes
Technical details
Return value: The NodeList object that represents the node collection.
DOM version Core Level 1
That's the definition again. w3cschool.com
Types of nodes in the DOM
There are 12 types in the DOM. But we use only a few.
First, what do we know about the types of nodes that are commonly found in the DOM?
1, Element node
The atoms in the DOM are element nodes, such as <body><table><div>, and so on.
If a document on the web is compared to a building, the element is the masonry that makes up the building. A document is made up of n elements. Elements can contain other elements.
2, text node
Any text, space, newline, blank line is a text node.
3, attribute node
Attribute node, so name incredible is the property of other nodes. For example, all elements have the title attribute, and the title= ' Title1 ' is an attribute node.
4. Annotation node
is the annotation.
What nodes are included in the childnodes?
The array returned by the ChildNodes property contains all types of nodes, and all the attribute nodes and text nodes are included. (This point is questionable, explained below)
In fact, almost everything in the document is a node, and even spaces and line breaks are interpreted as nodes. and are included in the array returned by the ChildNodes property.
Chidnoeds returns the set of things node,
Each node contains a NodeType attribute.
NodeType Value:
ELEMENT nodes: 1
Attribute node: 2
Text nodes: 3
Note nodes: 8
Test
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<script>
Window.onload = function () {
Console.log ("Body of the ChildNodes");
var oitems = document.body.childNodes;
for (var i = 0; i < oitems.length; i++) {
Console.log ("NodeType:" + oitems[i].nodetype);
Console.log ("nodename:" + oitems[i].nodename);
Console.log ("NodeValue:" "+ Oitems[i].nodevalue +" ");
}
Console.log ("H1 's ChildNodes");
GETCHILDNODESATRR (document.getElementsByTagName ("H1") [0]);
Console.log ("span of childnodes");
GETCHILDNODESATRR (document.getElementsByTagName ("span") [0]);
Console.log ("ChildNodes of Div");
GETCHILDNODESATRR (document.getElementsByTagName ("div") [0]);
};
function GETCHILDNODESATRR (DOM) {
var oitems = dom.childnodes;
for (var i = 0; i < oitems.length; i++) {
Console.log ("NodeType:" + oitems[i].nodetype);
Console.log ("nodename:" + oitems[i].nodename);
Console.log ("NodeValue:" "+ Oitems[i].nodevalue +" ");
}
}
</script>
<body>
<span>span</span>
<!--This is a note-->
123
<div class= "Class1" title= "Title1" ></div>
</body>
Output result of the final console:
The childnodes of the body
Nodetype:3
NodeName: #text
NodeValue: '
'
Nodetype:1
Nodename:h1
NodeValue: ' null '
Nodetype:3
NodeName: #text
NodeValue: '
'
Nodetype:1
Nodename:span
NodeValue: ' null '
Nodetype:3
NodeName: #text
NodeValue: '
'
Nodetype:8
NodeName: #comment
NodeValue: ' This is a note '
Nodetype:3
NodeName: #text
NodeValue: '
123
'
Nodetype:1
Nodename:div
NodeValue: ' null '
Nodetype:3
NodeName: #text
NodeValue: '
'
H1 's ChildNodes
Nodetype:3
NodeName: #text
NodeValue: ' H1 '
span of the ChildNodes
Nodetype:3
NodeName: #text
NodeValue: ' Span '
Div's ChildNodes
Result Analysis
1, analysis of the results, which can be found
NodeValue: '
123
'
This is actually nodevalue:\n123\n, with quotes just to see the wrapping effect.
This means that spaces and newline characters are actually treated as a single text receipt.
2. When the element contains text, the nodevalue of the element node itself is null, and the text it contains becomes a separate text node, and the nodevalue of the text node is the value that we set before. The H1 and span are the same in the previous example, and the childnodes length is 1. and DIV because there is no content, so the length of the div childnodes is 0.
3, did not find a NodeType 2 node type
Summary
When using native ChildNodes, include the provided Nodevalue,firstchild (), LastChild (), and so on. All need to be aware of the impact of other element types, because we usually manipulate element nodes. And the ChildNodes return collection contains a lot of things that are not intended to be used in practice and are prone to causing errors.
Therefore, it is recommended that when using childnodes, it is best to filter the return set by NodeType and then use it to avoid many unnecessary problems.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
