Menu
I have been working with javascript for a week now. I am currently working on making things work/change through nodes. But I have been noticing something strange, well for an unskilled javascripter it is.
I have a structure in my site like this:
<html>
<head>
<title>....</title>
<link/>
<script></script>
</head>
<body>
<div 1>
<div 2></div>
</div>
</body>
</html>
When I am trying to find a childnode with the next function:
var headerBox = document.body.childNodes;
var txt = "";
for (var x = 0; x < headerBox.length; x ++) {
txt =txt+"Childnode["+x+"]: "+headerBox[x].localName+" ("+headerBox[x].className+")<br>";
}
var x = document.getElementById(box);
x.innerHTML = txt;
I get a list with a couple of undefined "NULL" coupled with the reali DIV's
But when I simply change the "document.body.childNodes" to "document.body.children" everything comes uit perfectly, the "NULL" values even change.
What I am wondering is what does the "NULL" values represent in the HTML file, since there are no elements at where the "NULL" value is standing. In my head it is giving me a representation of something that is not there, visible, but yet it is...
Could anyone please explain to me what is going on?
Ps: I am sorry for maybe reposting this but I couldn't find a suitable other question regarding this matter!
Pss: Found a repost (What is the difference between children and childNodes in JavaScript?). But it is not answering why it still recognizes unseen childnodes as undefined.
420
Any subnode of a given node is called a child node, and the given node, in turn, is the child's parent. Sibling nodes are nodes on the same hierarchical level under the same parent node.
parentNode gives the parent, while . parentElement gives undefined.
So, in a nutshell, a node is any DOM object. An element is one specific type of node as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...). The DOM consists of a hierarchy of nodes where each node can have a parent, a list of child nodes and a nextSibling and previousSibling.
In the HTML DOM (Document Object Model), an HTML document is a collection of nodes with (or without) child nodes. Nodes are element nodes, text nodes, and comment nodes. Whitespace between elements are also text nodes. Elements are only element nodes.
childNodes will give you all kinds of nodes while children will give you only element nodes. You can use nodeType to check what kind of node the current node is:
document.body.childNodes[0].nodeType
This will give you an integer:
1 ELEMENT_NODE
2 ATTRIBUTE_NODE
3 TEXT_NODE
4 CDATA_SECTION_NODE
5 ENTITY_REFERENCE_NODE
6 ENTITY_NODE
7 PROCESSING_INSTRUCTION_NODE
8 COMMENT_NODE
9 DOCUMENT_NODE
10 DOCUMENT_TYPE_NODE
11 DOCUMENT_FRAGMENT_NODE
12 NOTATION_NODE
As you can see, using childNodes will give you a list, that contains text nodes (even if they are filled with whitespaces), comments and all kinds of other node types, you probably don't have to worry too much about.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
