Get the HTML content of the first child node of an <ul> element:
The result of x will be:
More "Try it Yourself" examples below.
The firstChild property returns the first child node of the specified node, as a Node object.
The difference between this property and firstElementChild, is that firstChild returns the first child node as an element node, a text node or a comment node (depending on which one's first), while firstElementChild returns the first child node as an element node (ignores text and comment nodes).
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.
Property | |||||
---|---|---|---|---|---|
firstChild | Yes | Yes | Yes | Yes | Yes |
Return Value: | A Node object, representing the first child of a node, or null if there are no child nodes |
---|---|
DOM Version | Core Level 1 Node Object |
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:
The result of x will be:
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:
The result of x will be:
Get the text of the first child node of a <select> element:
The result of x will be:
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