X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML DOM firstChild Property

Element Object Reference Element Object

Example

Get the HTML content of the first child node of an <ul> element:

var x = document.getElementById("myList").firstChild.innerHTML;

The result of x will be:

Coffee

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

The firstChild property returns the first child node of the specified node, as a Node object.

Note: In HTML, the document itself is the parent node of the HTML element, HEAD and BODY are child nodes of the HTML element.

Note: Whitespace inside elements is considered as text, and text is considered as nodes (See "More Examples").

This property is read-only.

Tip: Use the element.childNodes property to return any child node of a specified node. childNodes[0] will produce the same result as firstChild.

Tip: To return the last child node of a specified node, use the lastChild property.


Browser Support

Property
firstChild Yes Yes Yes Yes Yes


Syntax

node.firstChild

Technical Details

Return Value: A Node object, representing the first child of the node, or null if there is no child nodes
DOM Version Core Level 1 Node Object


Examples

More Examples

Example

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

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

<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->

<div id="myDIV">
  <p>Looks like first child</p>
  <span>Looks like last Child</span>
</div>

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

The result of x will be:

#text

Try it yourself »

Example

However, if we remove the whitespace from the source, there are no #text nodes in <div>, which will make the <p> element the first child node:

<div id="myDIV"><p>First child</p><span>Last Child</span></div>

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

The result of x will be:

P

Try it yourself »

Example

Get the text of the first child node of a <select> element:

var x = document.getElementById("mySelect").firstChild.text;

The result of x will be:

Volvo

Try it yourself »

Example

Get the node name of the first child node of the document:

document.firstChild.nodeName;

The result of x will be:

html

Try it yourself »


Related Pages

HTML DOM reference: node.lastChild Property

HTML DOM reference: node.childNodes Property

HTML DOM reference: node.parentNode Property

HTML DOM reference: node.nextSibling Property

HTML DOM reference: node.previousSibling Property

HTML DOM reference: node.nodeName Property


Element Object Reference Element Object


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook