<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>
How to get the child element of
a parent using JavaScript ?
</
title
>
<
style
>
.parent {
background: green;
color: white;
}
.child1 {
background: blue;
color: white;
margin: 10px;
}
.child2 {
background: red;
color: white;
margin: 10px;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
h3
>
Click on the button select
the child node
</
h3
>
<
div
class
=
"parent"
id
=
"parent"
> Parent
<
div
class
=
"child child1"
> Child1 </
div
>
<
div
class
=
"child child2"
> Child2 </
div
>
</
div
>
<
br
>
<
button
onclick
=
"GFG_Fun()"
>
click here
</
button
>
<
h1
id
=
"result"
style
=
"color: green;"
></
h1
>
<
script
>
let res = document.getElementById('result');
function GFG_Fun() {
let parent = document.getElementById('parent');
let children = parent.querySelectorAll('.child');
res.innerHTML = "Text of child node is - '" +
children[0].innerHTML + "' and '" +
children[1].innerHTML + "'";
}
</
script
>
</
body
>
</
html
>