JavaScript Get Parent Element From Child
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this tutorial we will show you the solution of JavaScript get parent element from child, here we used querySelector() method and parentNode, classList statements for collect parent node by child help.
The parentNode property of the Node interface returns the parent of the specified node in the DOM tree.
The classList is a DOM property which allows for styling the CSS classes of an element.
The querySelector() method allows you to select the first element that matches one or more CSS selectors.
Step By Step Guide On JavaScript Get Parent Element From Child :-
Here we defined div element with class ‘wrapper’ as parent node then within that we defined button ‘Click Me’ id ‘btn’ as child of wrapper.
In script we collecting button element by querySelector() using id ‘btn’ and stored on variable ‘bttn’.
When we appends property ‘parentNode’ with child ‘bttn’ we gets parent value stored on variable ‘ele’ then printed result on console with the help fo classList.
<!DOCTYPE html>
<html>
<head>
<title>GET PARENT ELEMENT FROM CHILD</title>
</head>
<body>
<div class="wrapper">
<button id="btn">Click Me</button>
</div>
<script>
const bttn=document.querySelector('#btn');
const ele=bttn.parentNode;
console.log(ele.classList[0]);
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined div element with class attribute ‘wrapper’, it will consider as parent then within that we defined button element ‘Click Me’ with id attribute ‘btn’ it is child for div element.
- In script we selecting button ‘btn’ by querySelector() method and stored on variable ‘bttn’. When we need parent element we have to append ‘parentNode’ property with child ‘bttn’ then we gets result of parent name that is stored on variable ‘ele’ and at last we printed result on console by console.log() method by classList with [0] position.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to get parent element from child using javascript.
When we executes program on browser we can see button ‘Click Me’ then now we have to open console by using shortcut ‘ctrl+shift+j’ then at right hand side console panel will open with result of parent name.
If you need to define any other element as child then you can modify it accordingly.
I hope this tutorial on JavaScript get parent element from child helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
