Traversing Elements in DOM
- Get the parent element – get the parent node of an element.
- Get child elements – get children of an element.
- Get siblings of an element – get siblings of an element.
- Get the parent element
Syntax
let parent = node.parentNode;
Example
<body>
<div class=”demo”>
<p class=”par”>This is a Paragraph</p>
</div>
<script>
let abc = document.querySelector(‘.par’);
console.log(abc.parentNode);
</script>
</body>
2. Get child elements
- The firstChild and lastChild
This return the first and last child of a node, which can be anything like text, comment, element etc.
Note: -The Console window show #text because a text node is inserted to maintain the whitespace between the 2 tags. This whitespace creates a #text node.
Syntax
-
- let firstChild = parentElement.firstChild;
- let lastChild = parentElement.lastChild;
- The firstElementChild and lastElementChild
This return the first and last child Element node.
Syntax
-
- let firstElementChild = parentElement.firstElementChild;
- let lastElementChild = parentElement. lastElementChild;
- The childNodes and children
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
Syntax
-
- let firstChild = parentElement. childNodes;
- let firstElementChild = parentElement. children;
Example
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id=”demo”>
<p>This is a Paragraph</p>
<h1>This is a Heading</h1>
<h2>This is a Heading</h2>
<br>
<b>This is bold tag</b>
</div>
<script>
let content = document.getElementById(‘demo’);
let firstChild = content.firstChild;
let firstChild1 = content.firstChild.nodeName;
console.log(firstChild);
console.log(firstChild1);
let lastChild = content.lastChild;
console.log(lastChild);
let firstElementChild = content.firstElementChild;
console.log(firstElementChild);
let lastElementChild = content.lastElementChild;
console.log(lastElementChild);
let childNodes = content.childNodes;
console.log(childNodes);
let children = content.children;
console.log(children);
</script></body></html>
3. Get siblings of an element – get siblings of an element.
Syntax
-
- let nextSibling = currentNode.nextElementSibling;
- let prevSibling = currentNode.previousElementSibling;
Example
<body>
<div id=”demo”>
<h1>This is Heading 1</h1>
<h1 id=”spl”>This is Heading 1</h1>
<h2>This is a Heading 2</h2>
</div>
<script>
let content = document.getElementById(‘spl’);
let nextSibling = content.nextElementSibling;
console.log(nextSibling);
let prevSibling = content.previousElementSibling;
console.log(prevSibling);
</script>
</body>