Javascript DOM HTML Node firstChild Property with whitespace

Introduction

In this example, we demonstrate how whitespace may interfere with this property.

Get the node name of the first child node of a <div> element:

Click the button get the node name of the DIV's first child node.

Whitespace inside elements is considered as text, and text is considered as nodes.

Therefore, in this example, the first, third and fifth child of the div element is a #text node.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {// w w w. java2 s.c  o m
  border: 1px solid black;
  margin: 15px;
}
</style>
</head>
<body>


<div id="myDIV">
  <p>A P element - Second child in div</p>
  <span>A Span element - Fourth child in div</span>
</div>

<button onclick="myFunction()">Test</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myDIV").firstChild.nodeName;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>



PreviousNext

Related