What is the difference btween children to childNodes?

JavaScript
1

I have read this here:

childNodes returns child nodes (element nodes, text nodes, and comment nodes).
children returns child elements (not text and comment nodes)

I understand that both properties output DOM Element nodes === HTML source elements.

But what are the former’s “text nodes” exactly?
Are they textContnet or innerHTML or both?

Also, what are the former’s “comment nodes” here?
I never heard the term comment nodes. Are they simply Markup Comments such as HTML comments (<!-- -->) or something else?

2

Nodes and elements are different things. An element is just one type of node.

The many different types of nodes can be found at https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

2 Likes
3

I think I would change the term node to DOM deity.

  • DOM by itself
  • HTML element
  • TextContent of an HTML element (coming between the two tags of the HTML element)
  • HTML element’s attribute, likely with a value
  • HTML comments

Is that a nice summary of what “nodes” are?

4

Let’s suppose the following HTML:

<div>
   Hello
   <strong>world</strong>
   <!-- and everyone on it! -->
<div>

Here the div contains three nodes:

  • a text node “hello”
  • a strong element, that itself contains a text node “world”
  • a comment node “and everyone on it!”

All of these are nodes, but only strong is an element.

As for your question, the DOM is not a node, it the entire model that contains nodes. HTML is a node, but only because it is an element. It’s not a special kind of node. Lastly, attributes are not nodes, they are attributes of a node.

3 Likes
5

So I conclude that in the “Web Development Discourse” a “node” is any of the following DOM deities:

  • An HTML element
  • The textContent of an HTML element
  • Html comments

Is that correct?

6

:wink:

Node is the base (abstract) class for all things that implement its methods and properties. This does include the vast majority of things in a webpage; they extend Node into their own interface abstraction classes, like Document, Element, Attr, and all the flavors of CDATA floating around.

7

So in general, in any webpage, a “node” is anything that we can edit in the DOM tree of that webpage:

  • An HTML element
  • An HTML attribute and possibly a value for that attribute
  • The textContent of an HTML element
  • An HTML comment

Is that correct?

8

Not entirely. In my example above the textContent of the div is “Hello world”, but there is no node that only has that content. There is one with “Hello” and one with “world”.

1 Like
9

Alright, so it is something in the DOM which is editable.

Can’t we philosophize to make the term broader to cover textContents as well?

:slight_smile:

That said, I think that one thing common to all nodes is that they are all children of the DOM.

10

Remember that DOM stands for Document Object Model. A node then is a base class in that object model that contains properties common which all the other objects then extend. Perhaps if you skim through that actual DOM specification, it’ll make things clearer.

Alternatively, remember the DOM is structured in a tree format. A node then represents any potential branching point on that tree.

textContent is not a single thing like a node. It’s a property that when accessed runs through a particular algorithm to determine what the textual content of a node is. It’s like a function essentially, but disguised as a property.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.