HTML DOM Element firstElementChild attribute
- Previous page firstChild
- Next page focus()
- Go back to the previous level HTML DOM Elements Object
Definition and Usage
firstElementChild
The attribute returns the first child element of the specified element.
firstElementChild
The attribute is read-only.
firstElementChild
The attribute returns the value of children[0]
the same value.
See also:
Example
Example 1
Get the HTML content of the first child element:
let text = element.firstElementChild.innerHTML;
Example 2
Get the tag name of the first child element of "myDIV":
let text = document.getElementById("myDIV").firstElementChild.tagName;
Example 3
Get the text of the first child element of the <select> element:
let text = document.getElementById("mySelect").firstElementChild.text;
HTML nodes and elements
In HTML DOMIn the (Document Object Model), an HTML document is a collection of nodes that have (or do not have) child nodes.
NodeRefers to element nodes, text nodes, and comment nodes.
ElementThe whitespace between them is also a text node.
And elements are just element nodes.
Child nodes vs. child elements
childNodes ReturnsChild nodesElement nodes, text nodes, and comment nodes.
children ReturnsChild elementsReturns the first one
firstChild vs. firstElementChild
firstChild Returns the first oneChild nodesElement nodes, text nodes, or comment nodes. The whitespace between elements is also a text node.
firstElementChild Returns the first oneChild elementsDoes not return text nodes and comment nodes.
lastChild vs. lastElementChild
lastChild Returns the last oneChild nodesElement nodes, text nodes, or comment nodes. The whitespace between elements is also a text node.
lastElementChild Returns the last oneChild elementsDoes not return text nodes and comment nodes.
Syntax
element.firstElementChild
Return value
Type | Description |
---|---|
Node | The first child element of the element. Returns null if there are no children. |
Browser support
element.firstElementChild
It is a DOM Level 3 (2004) feature.
All browsers fully support it:
Chrome | IE | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Chrome | IE | Edge | Firefox | Safari | Opera |
Support | 9-11 | Support | Support | Support | Support |
- Previous page firstChild
- Next page focus()
- Go back to the previous level HTML DOM Elements Object