javascript check if child node is element or text node

Question

i have problem with childNodes as below :

 <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
 </ol>
 //childNodes.length = 7

but

<ol><li> Coffee </li><li> Tea </li><li> Coca Cola </li></ol>
//childNodes.length = 3

It seems each \n or textnode is considered a child ,how can i remove these from childNodes?

You can use nodeType. Text Nodes will have nodeType = 3. Demo. — Harry
– Harry, Commented Jul 26, 2014 at 12:49
@Harry - Your comment actually qualifies as an answer. Why not post it as one? — techfoobar
– techfoobar, Commented Jul 26, 2014 at 12:54
@Harry - Ok. But your answer is an accurate solution for the question title "javascript check if child node is element or text node" — techfoobar
– techfoobar, Commented Jul 26, 2014 at 12:58

Community · Accepted Answer · 2023-11-25 06:35:36Z

61

You can check if a given child node is a text node or not using the nodeType. Text nodes will have the nodeType as 3. We can either use the number or the constant Node.TEXT_NODE for checking.

window.onload = function() {
  var el = document.getElementsByTagName('ol')[0].childNodes; // using [0] as there is only one ol in the demo
  console.log('Print with text nodes');
  for (let i = 0; i < el.length; i++) { // will output all nodes with "undefined" for text nodes
    console.log(el[i].innerHTML);
  }
  console.log('Print without text nodes');
  for (var i = 0; i < el.length; i++) { // will output only non text nodes.
    if (el[i].nodeType !== Node.TEXT_NODE) // or if (el[i].nodeType !== 3)
      console.log(el[i].innerHTML);
  }
}

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

edited Nov 25, 2023 at 6:35

CommunityBot

11 silver badge

answered Jul 26, 2014 at 13:00

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A1rPun Over a year ago

Hey good answer, you can also use the constant Node.TEXT_NODE instead of the meaningless 3.

Harry Over a year ago

@A1rPun: Nice suggestion. Will update into the answer. Thanks :)

Scott Wager · Accepted Answer · 2022-03-30 13:57:02Z

5

Text nodes can also be checked for using nodeName

node.nodeName === '#text'

answered Mar 30, 2022 at 13:57

Scott Wager

88814 silver badges10 bronze badges

Comments

user23643048 · Accepted Answer · 2024-04-02 16:56:08Z

0

While the other answers discuss how it's technically possible to detect if a child node is a text node or not, in your example case given it would appear you want to simply get the element node types, in which case you can simply use the children property.

In the question itself, it doesn't say why childNodes is necessary.

Element.children includes only element nodes. To get all child nodes, including non-element nodes like text and comment nodes, use Node.childNodes.

answered Apr 2, 2024 at 16:56

user23643048

Comments

budamivardi · Accepted Answer · 2014-07-26 12:58:54Z

-5

try to use jquery children method
$("#test").children().size()

http://jsfiddle.net/72Ya3/2/

answered Jul 26, 2014 at 12:58

budamivardi

7605 silver badges10 bronze badges

2 Comments

techfoobar Over a year ago

This trivial requirement does not need jQuery. The other answer is way more correct as well as informative.

nickiaconis Over a year ago

This can be done with plain JavaScript: element.nodeType === 3 // true when element is a text node. See @Harry's answer, which should likely be the accepted one, and the MDN article on nodeType.

Collectives™ on Stack Overflow

javascript check if child node is element or text node

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related