Javascript this first child

HTML DOM Element firstElementChild

Get the tag name of the first child element of «myDIV»:

Get the text of the first child element of a element:

Description

The firstElementChild property returns the first child element of the specified element.

The firstElementChild property is read-only.

The firstElementChild property returns the same as children[0].

See Also:

Nodes vs Elements

In the HTML DOM terminology:

Nodes are all nodes (element nodes, text nodes, and comment nodes).

Whitespace between elements are also text nodes.

Elements are only element nodes.

childNodes vs children

childNodes returns child nodes (element nodes, text nodes, and comment nodes).

children returns child elements (not text and comment nodes).

firstChild vs firstElementChild

firstChild returns the first child node (an element node, a text node or a comment node). Whitespace between elements are also text nodes.

firstElementChild returns the first child element (not text and comment nodes).

lastChild vs lastElementChild

lastChild returns the last child node (an element node, a text node or a comment node). Whitespace between elements are also text nodes.

lastElementChild returns the last child element (not text and comment nodes).

Syntax

Return Value

Browser Support

element.firstElementChild is a DOM Level 3 (2004) feature.

It is fully supported in all modern browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11

Источник

Node: firstChild property

The read-only firstChild property of the Node interface returns the node’s first child in the tree, or null if the node has no children.

If the node is a Document , this property returns the first node in the list of its direct children.

Note: This property returns any type of node that is the first child of this one. It may be a Text or a Comment node. If you want to get the first Element that is a child of another element, consider using Element.firstElementChild .

Value

A Node , or null if there are none.

Example

This example demonstrates the use of firstChild and how whitespace nodes might interfere with using this property.

p id="para-01"> span>First spanspan> p> script> const p01 = document.getElementById("para-01"); console.log(p01.firstChild.nodeName); script> 

In the above, the console will show ‘#text’ because a text node is inserted to maintain the whitespace between the end of the opening

and tags. Any whitespace will create a #text node, from a single space to multiple spaces, returns, tabs, and so on.

Another #text node is inserted between the closing and

tags.

If this whitespace is removed from the source, the #text nodes are not inserted and the span element becomes the paragraph’s first child.

p id="para-01">span>First spanspan>p> script> const p01 = document.getElementById("para-01"); console.log(p01.firstChild.nodeName); script> 

Now the console will show ‘SPAN’.

To avoid the issue with node.firstChild returning #text or #comment nodes, Element.firstElementChild can be used to return only the first element node.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML DOM Element firstChild

Get the text of the first child node of a element:

Description

The firstChild property returns the first child node of a node.

The firstChild property returns a node object.

The firstChild property is read-only.

The firstChild property is the same as childNodes[0] .

Important!

firstChild returns the first child node: An element node, a text node, or a comment node.

Whitespace between elements are also text nodes.

Alternative:

The firstElementChild property returns the first child element (ignores text and comment nodes).

See Also:

Node Properties

Nodes vs Elements

In the HTML DOM terminology:

Nodes are all nodes (element nodes, text nodes, and comment nodes).

Whitespace between elements are also text nodes.

Elements are only element nodes.

childNodes vs children

childNodes returns child nodes (element nodes, text nodes, and comment nodes).

children returns child elements (not text and comment nodes).

firstChild vs firstElementChild

firstChild returns the first child node (an element node, a text node or a comment node). Whitespace between elements are also text nodes.

firstElementChild returns the first child element (not text and comment nodes).

lastChild vs lastElementChild

lastChild returns the last child node (an element node, a text node or a comment node). Whitespace between elements are also text nodes.

lastElementChild returns the last child element (not text and comment nodes).

Syntax

Return Value

More Examples

This example demonstrates how whitespace may interfere.

Try to get the node name of the first child node of «myDIV»:

However, if you remove the whitespace from the source, there are no #text nodes in «myDIV»:

Browser Support

element.firstChild is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

Источник

How to Get First Child of an HTML Element in JavaScript?

To get the first child of a specific HTML Element, using JavaScript, get reference to this HTML element, and read the firstElementChild property of this HTML Element.

firstElementChild property returns the first child of this HTML Element as Element object.

In the following example, we will get the first child of the HTML Element, which is selected by id «myElement» , and change the font color of this first child to red.

example.html

Try this html file online, and click on the Click Me button. The script gets the first child of the HTML Element #myElement , and changes its color to red.

Conclusion

In this JavaScript Tutorial, we learned how to get the first child of an HTML Element, using JavaScript.

Related Tutorials

• How to Change Border Color of HTML Element in JavaScript?
• How to Change Border Radius of HTML Element in JavaScript?
• How to Change Border Style of HTML Element in JavaScript?
• How to Change Border Width of HTML Element in JavaScript?
• How to Change Bottom Border of HTML Element in JavaScript?
• How to Change Font Color of HTML Element in JavaScript?
• How to Change Font Family of HTML Element in JavaScript?
• How to Change Font Size of HTML Element in JavaScript?
• How to Change Font Weight of HTML Element in JavaScript?
• How to Change Height of HTML Element in JavaScript?
• How to Change Left Border of HTML Element in JavaScript?
• How to Change Margin of HTML Element in JavaScript?
• How to Change Opacity of HTML Element in JavaScript?
• How to Change Padding of HTML Element in JavaScript?
• How to Change Right Border of HTML Element in JavaScript?
• How to Change Text in HTML Element to Bold in JavaScript?
• How to Change Text in HTML Element to Italic in JavaScript?
• How to Change Top Border of HTML Element in JavaScript?
• How to Change Width of HTML Element in JavaScript?
• How to Change the Background Color of HTML Element in JavaScript?
• How to Change the Border of HTML Element in JavaScript?
• How to Clear Inline Style of HTML Element in JavaScript?
• How to Get Children of an HTML Element in JavaScript?
• How to Get Class Names of an HTML Element as List in JavaScript?
• How to Get Class Names of an HTML Element as String in JavaScript?
• How to Get Height of an HTML Element in JavaScript?
• How to Get Last Child of an HTML Element in JavaScript?
• How to Get Next Sibling of an HTML Element in JavaScript?
• How to Get Previous Sibling of an HTML Element in JavaScript?
• How to Get Width of an HTML Element in JavaScript?
• How to Hide HTML Element in JavaScript?
• How to Insert Element in Document after Specific HTML Element using JavaScript?
• How to Iterate over Children of HTML Element in JavaScript?
• How to Tag Name of an HTML Element in JavaScript?
• How to Underline Text in HTML Element in JavaScript?
• How to get Attributes of HTML Element Element in JavaScript?
• How to get Number of Child Elements of this HTML Element in JavaScript?
• JavaScript – Change Style of HTML Element

Источник

How to get first and last children of an element using JavaScript

To get the first child node of an HTML element, you can use the firstChild property. This property returns a node’s first child, as a Node object.

Let us say you have the following HTML code snippet:

ul id="langs"> li>JavaScriptli> li>Nodeli> li>Javali> li>Rubyli> li>Rustli> ul> 

const ul = document.querySelector('#langs'); // get first child const first = ul.firstChild; console.log(first.innerText); 

You might encounter a weird behavior with firstChild if there is whitespace between the parent node and the first child node.

For example, the above code snippet might print undefined on the console. This is because whitespace inside elements is considered as text, and text is considered as nodes.

One way to handle this situation is to remove all whitespace between elements. Alternatively, you could use the firstElementChild property that ignores whitespace and comments, and returns the first element node:

// get first element node const first = ul.firstElementChild; console.log(first.innerText); // JavaScript 

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

const ul = document.querySelector('#langs'); // get last child const last = ul.firstChild; console.log(last.innerText); 

Similarly, there is another property called lastElementChild to get the last element node by ignoring all whitespace and comments:

const last = ul.lastElementChild; console.log(last.innerText); // Rust 

If you want to get all child nodes of an element, use the childNodes or children property:

const ul = document.querySelector('#langs'); // get all children const childern = ul.childNodes; // iterate over all child nodes childern.forEach(li =>  console.log(li.innerText); >); 

Take a look at this article to learn more childNodes and children properties in JavaScript.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник