In this article, we will learn to extract the first child element of an element in JavaScript.
Use Extract the first child element of an element in JavaScript
Returns the first child of the node in the tree, and returns null if the node has no child. This is the read-only firstChild property of the Node interface.
grammar:
For example, we have a paragraph tag that shows Hello World!. The text inside it is in another span tag.
HTML code:
<p >
<span>Hello World!</span>
</p>JavaScript code:
const firstPara = ('firstPara');
();Output:
"#text"
When you run the above code in any browser, the browser's console will display #text. This is because a text node is inserted by default to leave blanks between the paragraph end marker and the span start marker.
Each blank automatically creates a #text node, from a single space to multiple spaces, line breaks, tabs, etc.
To avoid text node issues, you can remove spaces from the source or return only the first element node using
Use the first child of an element to extract the element in JavaScript
Returns the active NodeList of the child of the specified element, index 0 is assigned to the first child node. This is the read-only childNodes property of the Node interface.
Children contain items, text, and comments.
The elements of the node collection are objects, not strings. To retrieve data from node objects, use their properties.
For example, to get the name of the first child node, you can use [0].nodeName.
By default, ChildNodes includes all child nodes, including elements and non-elements. It returns an active NodeList containing node children.
For example, we have a paragraph tag that shows Hello World!. The text inside it is in another span tag.
HTML code:
<p >
<span>Hello World!</span>
</p>JavaScript code:
const firstPara = ('firstPara');
([0]);Output:
"#text"
Similar to the previous section, by default, a text node is inserted to leave blank space between the end of the paragraph mark and the beginning of the span mark.
Use Extract the first child element of an element in JavaScript
The property returns a real-time HTML collection containing all the child elements of the element that called it.
The only difference between and is that only contains element nodes, while obtaining all child nodes, including non-element nodes such as text and comments.
HTML collections are active, ordered collections of children of DOM elements of nodes. You can use the item() method to access each child node of the collection.
For example, we have a paragraph tag that shows Hello World!. The text inside it is in another span tag.
HTML code:
<p >
<span>Hello World!</span>
</p>JavaScript code:
const firstPara = ('firstPara');
([0]);Output:
"Hello World!"
When you run the above code in any browser, the browser's console will display "Hello World!". This is because this property returns only the DOM element of the calling node.
This is the article about the implementation method of the first child element in JavaScript extracting element. For more related content of JavaScript extracting child elements, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!