revision:
In web development, particularly when working with HTML and CSS, parent and child elements refer to the hierarchical relationship between HTML elements. This relationship is crucial for structuring content, applying styles, and manipulating the DOM (Document Object Model) using JavaScript.
A parent element is an HTML element that contains other elements within it. These contained elements are referred to as child elements.
A child element is any element that is nested inside another element. The element that directly contains it is called its parent .
example
<div class="parent">
<p class="child">This is a child paragraph.</p>
<span class="child">This is another child element.</span>
</div>
You can have multiple levels of nesting, creating relationships like grandparent-parent-child.
example
<div class="grandparent">
<div class="parent">
<p class="child">I am a child element.</p>
</div>
</div>
CSS allows you to style elements based on their parent-child relationships.
example
.parent {background-color: lightblue;}
.parent .child { color: red;}
If you only want to target direct children (not grandchildren or deeper nested elements), you can use the > combinator.
example
.parent > .child {font-weight: bold;}
example
// Get the parent element
const parent = document.querySelector('.parent');
// Get all child elements of the parent
const children = parent.children;
// Loop through each child and log it
for (let child of children) {
console.log(child);
}
example
// Get the child element
const child = document.querySelector('.child');
// Get the parent element of the child
const parent = child.parentElement;
console.log(parent);
The children property returns an HTMLCollection object.
It is used to access the child elements of a given HTML element. It returns an HTMLCollection , which is a live collection of all child elements that are direct descendants of the parent element.
only element nodes : the children property only includes element nodes (i.e., tags like <div>, <p>, <span>, etc.). It does not include text nodes, comment nodes, or whitespace.
live collection : the HTMLCollection returned by children is live , meaning it automatically updates when the DOM changes (e.g., if you add or remove child elements).
direct children only : it only includes direct children of the parent element, not nested grandchildren or deeper descendants.
example
children collection of this page:
count of children elements :
<div>
<div id="parent">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
<div class="child">child 4</div>
<div class="child">child 5</div>
<div class="child">child 6</div>
</div>
<p>children collection of this page: <span id="demo"></span></p>
<p>count of children elements : <span id="demo1"></p>
<button onclick="my_Fun(); my_Fun1()">click here</button>
<p id="demo2"></p>
<p id="demo2a"></p>
</div>
<script>
// the children property
const collection = document.body.children;
let text = "";
for (let i = 0; i < collection.length; i++) {
text += collection[i].tagName + " - , ";
}
document.getElementById("demo").innerHTML = text;
let count = document.getElementById("parent").children.length;
document.getElementById("demo1").innerHTML = count;
// use the children property
let res = document.getElementById('demo2');
function my_Fun() {
parent = document.getElementById('parent');
children = parent.children[0];
res.innerHTML = "Text of child node is - '" + children.innerHTML + "'";
}
let res1 = document.getElementById('demo2a');
function my_Fun1() {
let parent = document.getElementById('parent');
let children = parent.querySelectorAll('.child');
res1.innerHTML = "Text of child node is - '" + children[0].innerHTML + "' and '" + children[1].innerHTML + "'";
}
</script>
<ul id="menu">
<li class="first">Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li class="last">About Us</li>
</ul>
<p class="spec"><span id="demo3"></span></p>
<p class="spec"><span id="demo4"></span></p>
<p class="spec"><span id="demo5"></span></p>
<script>
// use the firstChild property of the element:
let content = document.getElementById('menu');
let firstChild = content.firstChild.nodeName;
console.log(firstChild);
document.getElementById("demo3").innerHTML = "first child : " + firstChild;
//use the firstElementChild property:
console.log(content.firstElementChild);
document.getElementById("demo4").innerHTML = "first element child: " + content.firstElementChild.textContent;
console.log(content.lastElementChild);
document.getElementById("demo5").innerHTML = "last element child: " + content.lastElementChild.textContent;
</script>
<div>
<p class="spec"><span id="demo6"></span></p>
<p class="spec"><span id="demo7"></span></p>
<p class="spec"><span id="demo8"></span></p>
<p class="spec"><span id="demo9"></span></p>
<p class="spec"><span id="demo10"></span></p>
</div>
<script>
const third = document.querySelector('#parent :nth-child(3)');
console.log(third); // 👉️ div.child3
document.getElementById("demo6").innerHTML = third.textContent; // child 3
const odd = document.querySelectorAll('#parent :nth-child(odd)');
document.getElementById("demo7").innerHTML = odd.textContent; // undefined
</script>
// Access the first child element
const firstChild = children[0];
console.log(firstChild); // <p class="child">Child 1</p>
// Access the last child element
const lastChild = children[children.length - 1];
console.log(lastChild); // <div class="child">Child 3</div>
<div>
<iframe src="demo_8.html" id="myIframe" frameborder="1" title="myFrame"></iframe>
<p id="parent1"></p>
<p id="parent2"></p>
<p id="parent3"></p>
</div>
<script>
const iframe = document.getElementById('myIframe');
console.log('Im the parent, im loading my scripts')
document.getElementById("parent1").innerHTML = 'Im the parent, im loading my scripts';
// Create a listener handler for the child iframe
// when the child is ready to receive messages,
// parent will send data to child
const handleMessage = (event) => {
if (event.source === iframe.contentWindow) {
if (event.data === 'imListening') {
console.log('I am the parent and child is ready to receive messages. i will send a message to child now!')
document.getElementById("parent2").innerHTML = 'I am the parent and child is ready to receive messages.
i will send a message to child now!';
const dataToSend = {
message: 'Hello from parent!',
someValue: 42
};
iframe.contentWindow.postMessage(dataToSend, '*');
}
}
};
// Add event listener for the message event
window.addEventListener('message', handleMessage);
</script>