The difference between parentnodes, childNodes and children

"ParentNode"

Used to get the parent node of an element. Parentnodes is understood as a container with a child node in the container.

Cases:
<div id= "Parent" >
<b id= "Child" >my text</b>
</div>

In the above code, you see the "Father" as a div container, the container has a "child", is the bold text part. If you are going to use the getElementById () method to get the bold element and want to know who it "Dad" is, the information returned will be a Div. show the script below and you'll know what's going on ...

"Children"

There are times when you find that calling ChildNodes belongs without getting the value you expect. Like what:

Html:

<a href= "javascript:void (0);" onclick= "selectcategory (' 1,this);" >
<span>apple</span>
</a>

Js:

function Selectcategory (val,obj) {
var text = obj.children[0].innerhtml;

}

The value we want to get for the Text property is "Apple", but the actual value is undefined, which means that the fetch failed.

Reason:

The ChildNodes property return value contains the element node and the text node, in this case obj.children[0] is actually a space returned.

Solution:

1) Remove the space between <span> and <a>.

2) switch to obj.children[0].innerhtml. The Children property returns only the element nodes.

"ChildNodes"

That returns a collection of child elements of the specified element, including the HTML node, all attributes, and text.

Example:

function SetCount (count) {
var counts = Count.split (",");
for (var i = 0; i < counts.length; i++) {
var j = i + 1;
document.getElementById (' Text ' + j). InnerText = Counts[i];
}
}
function settable () {
var table = document.getElementById ("BODYTB");
var n = 1
for (var i = 2; I <= 7; i++) {
var row = table.rows (i);
if (i = = 3) {
for (var j = 2; J <=, J + +) {
Row.insertcell (j). InnerHTML = "<span style= ' width:100% ' id= ' Text" + n + "' ondblclick= ' excdwe (this) ' ></span > ";
n++;
}
}
else {
for (var j = 1; J <=; J + +) {
Row.insertcell (j). InnerHTML = "<span style= ' width:100% ' id= ' Text" + n + "' ondblclick= ' excdwe (this) ' ></span > ";
n++;
}
}
}
}

The difference between parentnodes, childNodes and children