Differencebetween Children and Childnodes in JavaScript

What is the difference between children and childNodes in JavaScript?

Understand that .children is a property of an Element. ¹ Only Elements have .children, and these children are all of type Element. ²

However, .childNodes is a property of Node. .childNodes can contain any node. ³

A concrete example would be:

let el = document.createElement("div");
el.textContent = "foo";

el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0;   // No Element children.

Most of the time, you want to use .children because generally you don't want to loop over Text or Comment nodes in your DOM manipulation.

If you do want to manipulate Text nodes, you probably want .textContent instead. ⁴

^{1. Technically, it is an attribute of ParentNode, a mixin included by Element.}

^{2. They are all elements because .children is a HTMLCollection, which can only contain elements.}

^{3. Similarly, .childNodes can hold any node because it is a NodeList.}

^{4. Or .innerText. See the differences here or here.}

What is the difference between firstChild and childNodes[1]?

.firstChild is equivalent to childNodes[0].

firstChild returns the first child node
childNodes returns a collection of all child nodes
firstElementChild returns the first child element
children returns a collection of all child elements

can we substitute using first child and child node

Yes, if you only want to access the first one.

Demo:

var d = document.getElementById('myDiv');

var firstChild = d.firstChild;
var childNodes0 = d.childNodes[0];
var firstElementChild = d.firstElementChild;
var children0 = d.children[0];

console.log("d.childNodes.length is", d.childNodes.length);
console.log("firstChild",             firstChild.nodeName,        firstChild.textContent);
console.log("childNodes[0]",          childNodes0.nodeName,       childNodes0.textContent);
console.log("d.children.length is",   d.children.length);
console.log("firstElementChild",      firstElementChild.nodeName, firstElementChild.textContent);
console.log("children[0]",            children0.nodeName,         children0.textContent);

<div id="myDiv">Some text<b>Some bold text</b>Some more text</div>

Difference between javascript .childNodes & .children

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.

Best way to get child nodes

Sounds like you're overthinking it. You've observed the difference between childNodes and children, which is that childNodes contains all nodes, including text nodes consisting entirely of whitespace, while children is a collection of just the child nodes that are elements. That's really all there is to it.

There is nothing unpredictable about either collection, although there are a couple of issues to be aware of:

IE <= 8 do not include white space-only text nodes in childNodes while other browsers do
IE <= 8 includes comment nodes within children while other browsers only have elements

children, firstElementChild and friends are just conveniences, presenting a filtered view of the DOM restricted to just elements.

What are parent and child nodes in practical use in html?

Yes, <div> is the parent and <p> is the child

To understand it a bit more let's add another <p>

<div>
    <p id='first-paragraph'></p>
    <p id='second-paragraph'></p>
</div>

Now <p id='first-paragraph'> and <p id='second-paragraph'> are both children of <div>

And one more fact is that they are siblings, since they are on the same level sharing the same parent (<div>)