Cara menggunakan javascript first child of-type

Question

JavaScript – Number of Child Elements of HTML Element

To get the count or number of child elements of a specific HTML Element using JavaScript, get reference to this HTML element, and read the childElementCount property of this HTML Element.

Table of Contents Show

JavaScript – Number of Child Elements of HTML Element
1. Use the contains method
2. Go up from the child until see the parent
Get the first child element
Get the last child element
How do you check if an element is a child in JavaScript?
How do you find the element of a child?
How do you know if an element is a child of the parent?
Which JavaScript function is used to select the child tag from the parent element?

Table of Contents

JavaScript – Number of Child Elements of HTML Element
1. Use the contains method
2. Go up from the child until see the parent
Get the first child element
Get the last child element
How do you check if an element is a child in JavaScript?
How do you find the element of a child?
How do you know if an element is a child of the parent?
Which JavaScript function is used to select the child tag from the parent element?

Table of Contents

JavaScript – Number of Child Elements of HTML Element
1. Use the contains method
2. Go up from the child until see the parent
Get the first child element
Get the last child element
How do you check if an element is a child in JavaScript?
How do you find the element of a child?
How do you know if an element is a child of the parent?
Which JavaScript function is used to select the child tag from the parent element?

childElementCount property returns the number of child elements in this HTML Element.

In the following example, we will get the number of child elements of the HTML Element which is selected by id "myElement".

example.html

There are three children for HTML element with id myElement, namely, a <p>, a <ul>, and a <div>.

Conclusion

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

Assume that we want to find out if the child element is a descendant of the parent element.

1. Use the contains method

const isDescendant = parent.contains(child);

2. Go up from the child until see the parent

// Check if `child` is a descendant of `parent`
const isDescendant = function (parent, child) {
    let node = child.parentNode;
    while (node) {
        if (node === parent) {
            return true;
        }        // Traverse up to the parent
        node = node.parentNode;
    }
    // Go up until the root but couldn't find the `parent`
    return false;
};

Get the first child element

To get the first child element of a specified element, you use the firstChild property of the element:

let firstChild = parentElement.firstChild; 
Code language: JavaScript (javascript)

If the parentElement does not have any child element, the firstChild returns null. The firstChild property returns a child node which can be any node type such as an element node, a text node, or a comment node. The following script shows the first child of the #menu element:

let content = document.getElementById('menu');
let firstChild = content.firstChild.nodeName;
console.log(firstChild);
Code language: JavaScript (javascript)

Output:

#text



Code language: CSS (css)

The Console window show #text because a text node is inserted to maintain the whitespace between the openning <ul> and <li> tags. This whitespace creates a #text node.

Note that any whitespace such as a single space, multiple spaces, returns, and tabs will create a #text node. To remove the #text node, you can remove the whitespaces as follows:

<article id="content"><h2>Heading</h2><p>First paragraph</p></article>
Code language: HTML, XML (xml)

Or to get the first child with the Element node only, you can use the firstElementChild property:

let firstElementChild = parentElement.firstElementChild;
Code language: JavaScript (javascript)

The following code returns the first list item which is the first child element of the menu:

let content = document.getElementById('menu');
console.log(content.firstElementChild);
Code language: JavaScript (javascript)

Output:

<li class="first">Home</li>
Code language: HTML, XML (xml)

In this example:

First, select the #menu element by using the getElementById() method.
Second, get the first child element by using the firstElementChild property.

Get the last child element

To get the last child element of a node, you use the lastChild property:

let lastChild = parentElement.lastChild; 
Code language: JavaScript (javascript)

In case the parentElement does not have any child element, the lastChild returns null. Similar to the the firstChild property, the lastChild property returns the first element node, text node, or comment node. If you want to select only the last child element with the element node type, you use the lastElementChild property:

let lastChild = parentElement.lastElementChild;
Code language: JavaScript (javascript)

The following code returns the list item which is the last child element of the menu:

let menu = document.getElementById('menu');
console.log(main.lastElementChild);
Code language: JavaScript (javascript)

Output:

<li class="last">About Us</li>
Code language: HTML, XML (xml)

To get a live NodeList of child elements of a specified element, you use the childNodes property:

let children = parentElement.childNodes;
Code language: JavaScript (javascript)

The childNodes property returns all child elements with any node type. To get the child element with only the element node type, you use the children property:

let children = parentElement.children;



Code language: JavaScript (javascript)

The following example selects all child elements of the element with the Id main:

let menu = document.getElementById('menu');
let children = menu.children;
console.log(children);
Code language: JavaScript (javascript)

Output:

Summary

The firstChild and lastChild return the first and last child of a node, which can be any node type including text node, comment node, and element node.
The firstElementChild and lastElementChild return the first and last child Element node.
The childNodes returns a live NodeList of all child nodes of any node type of a specified node. The children return all child Element nodes of a specified node.

Was this tutorial helpful ?

How do you check if an element is a child in JavaScript?

To check if an HTML element has child nodes, you can use the hasChildNodes() method. This method returns true if the specified node has any child nodes, otherwise false . Whitespace and comments inside a node are also considered as text and comment nodes.

How do you find the element of a child?

To get the first child element of a specified element, you use the firstChild property of the element:.

let firstChild = parentElement.firstChild; ... .

let content = document.getElementById('menu'); let firstChild = content.firstChild.nodeName; console.log(firstChild); ... .

#text..

How do you know if an element is a child of the parent?

To check if an element is a child of a parent with JavaScript, we can use the parent element's contains method. const contains = (parent, child) => { return parent !== child && parent. contains(child); };

Which JavaScript function is used to select the child tag from the parent element?

jQuery children() function. jQuery children() method is used to get the direct children of the selected HTML element. You can use children() method to traverse through the child elements of the selected parent element.

kode javascript JavaScript next child