Introduction to JavaScript Parent Node
The “parentNode” property in JavaScript retrieves the parent node of a specific node within an object. When using an HTML web page as the user interface front end, the HTML document itself can identify the parent nodes of HTML elements. For example, the <head> and <body> elements are child nodes of the HTML element.
Syntax and Parameters
In general, parent and child nodes the relationship will be called inheritance concepts. So each of the nodes contains methods and their own properties that have to be common to all of the node objects in both parent and child nodes.
<html>
<body>
<div>
<p id="first">
Some sentence
</p>
</div>
<p id="second">
</p>
<button onclick="function()"></button>
<script>
function function()
{
var v=document.getElementById("first").parentNode.nodeName;
document.getElementById("second").innerHTML=v;
---some javascript logics---
}
</script></body></html>The above codes are the basic syntax for the parent and child node relationships for both html and javascript functions. Whenever we use html codes, the parent and child nodes are specified with the help of <div>tag. It’s the best example for the parent and child nodes.
How is Parent Node done in Javascript?
Javascript generally contains a lot of properties and methods for specified web pages more securely and performance-wise quickly. Likewise, parent and child nodes are the properties that must return to the parent node of the specified nodes.
The document and document fragment nodes do not have a parent, so therefore, both the parentNode will always be the null values. Both parentNode and parentElement properties need to be similar to one, and sometimes the difference is that the parentElement property will always return the null value if the parent node is not an element. This scenario can’t be possible in the applications.
In the case of child or children nodes, the elements are being directed to point the children because the nested concepts are to be followed exactly in the given parent node element instance like <html>,<head><body> tags. In descendants, all the elements of the <body> tag do not only point to the direct children <div>,<ul>,<ol>. These are the list of some basic nested elements in the HTML, including the <li> tag elements.
Examples of JavaScript Parent Node
Below are the examples.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>
First Example
</title>
</head>
<body>
<h1 style="color:green;">
Welcome To My Domain
</h1>
<h2>Example for DOM parentElement Property</h2>
<ol type="sample">
<li id="example">AB</li>
<li>CD</li>
<li>EF</li>
<li>GH</li>
<li>IJ</li>
<li>KL</li>
<li>MN</li>
<li>OP</li>
<li>QR</li>
<li>ST</li>
<li>UV</li>
<li>WX</li>
<li>YZ</li>
<li>GH</li>
</ol>
<button onclick="demo()">
Click
</button>
<p id="second">
Hello User have a nice day
</p>
<script>
function demo() {
var v =
document.getElementById("example").parentElement.nodeName;
document.getElementById("second").innerHTML =v;
}
</script>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPEhtml>
<html>
<head>
<title>
Second Example
</title>
<style>
.first>div {
src: url('WWW.facebook.com');
font-family:'MutatorSans';
font-style: normal;
font-smooth: 6em;
}
div.second {
font-smooth: auto;
font-smooth: never;
font-smooth: always;
}
div.third {
font-weight: inherit;
text-transform: uppercase;
font: 1.5rem 'MutatorSans', sans-serif;
font-smooth: 2em;
}
div.four {
font: 80% sans-serif;
font-smooth: 3em;
}
div.five {
background-color:pink;
font: 13px/11px sans-serif;
font-smooth: 5em;
}
</style>
</head>
<body>
<div class="five">
<h1 style="color:green;">
Welcome To My Domain
</h1>
<h2>Example for DOM parentElement Property</h2>
<div class="third">
<ol type="sample">
<li id="example">AB</li>
<li>CD</li>
<li>EF</li>
<li>GH</li>
<li>IJ</li>
<li>KL</li>
<li>MN</li>
<li>OP</li>
<li>QR</li>
<li>ST</li>
<li>UV</li>
<li>WX</li>
<li>YZ</li>
<li>GH</li>
</ol>
</div>
<button onclick="demo()">
Click
</button>
<p id="second">
Hello User have a nice day
</p>
<script>
function demo() {
var v =
document.getElementById("example").parentElement.nodeName;
document.getElementById("second").innerHTML =v;
}
</script>
</div>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPEhtml>
<html>
<head>
<title>
Welcome To My DOmain
</title>
<style>
div {
padding: 17px;
width: 73%;
background-color: red;
color: pink;
border-radius:32px;
}
.second {
float: left;
font-size: 32px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<h2>Hello User have a nice day</h2>
<div>
<span class = "second"
onclick = "this.parentElement.style.display
= 'none';">
x
</span>
<p style="font-size:33px;">Once Again Welcome User Please give your feedback in the columns</p>
</div>
</center>
</body>
</html>Output:
After clicking on x:
In the above three examples, we use the same concepts as parentNode and parentElement in the applications. Whatever logic we tried in the codes, when we call it in as parentElement.nodeName, it will call the parent of the tag elements.
Conclusion
Inheritance is a concept that programmers use in various programming languages, including JavaScript, for parent-child relationships in standalone and web applications. In web-based applications, the parentNode property in JavaScript is commonly utilized to enhance performance and understand the application flows for web users.
Recommended Articles
This is a guide to JavaScript Parent Node. You may also have a look at the following articles to learn more –
