This article will describe the approaches to accessing the parent of “this” in JavaScript.
How to Access the Parent of “this” in JavaScript?
To access to parent of “this” in JavaScript, apply the following approaches:
Method 1: Access to the Parent of “this” in JavaScript Using the parentElement and nodeName Properties
The “parentElement” property fetches the parent element of the specified element, and the “nodeName” property displays the node name. These properties can be utilized to access the node name of the parent element corresponding to the fetched element.
Example
The below-stated example explains the stated concept:
<br><strong id="myChild">Child Node</strong>
</h3>
<p>Click the button to see the Parent Node Element</p>
<button onclick="myFunction()">Parent Node</button>
<script>
function myFunction() {
this.x = document.getElementById("myChild").parentElement.nodeName;
alert('The Heading of Parent Node is : ' + x)
}
</script>
In the above code lines:
- Include an “<h3>” element as a parent node and allocate the “<strong>” element as a child node having the stated “id”.
- In the next step, create a button that invokes the function “myfunction()” using the “onclick” event.
- In the JavaScript part of the code, define a function named “myfunction()”.
- In the function definition, “this” object refers to the global object and points to the accessed element via the “getElementById()” method.
- The “parentElement” property gets the parent element corresponding to the fetched element, and the “nodeName” returns the node name corresponding to the parent element.
- Lastly, display the parent node name via an alert dialogue box.
Output
In the output, it is notified that the node name of the parent element is displayed.
Method 2: Access to Parent of “this” in JavaScript Using parentNode and classList Properties
The “parentNode” property is used to return the parent node of the element, and the “classList” property returns the class names of an element. These approaches can be implemented to return the class name of the first parent corresponding to the fetched element.
Example
Let’s overview the below-stated example:
<h3 id="myChild">This is Linuxhint Website</h3>
</div>
<script>
this.myChild =document.getElementById('myChild');
this.x = myChild.parentNode;
console.log('Class name of parent element is : ', x.classList[0]);
</script>
In the above code block:
- Likewise, allocate the parent and child elements having the stated attributes.
- In the JavaScript code, the “getElementById()” method is used to access the child element “<h3>” by its “id” using “this” object, respectively.
- In the next step, another “this” object points to the parent node of the fetched element and accesses it via the “parentNode” property.
- Lastly, display the first class name corresponding to the parent element via the “classList” property.
Output
In this particular output, the class name of the parent element is returned.
Conclusion
To access the parent of “this” in JavaScript, apply the combined “parentElement” and “nodeName” properties or the “parentNode” and “classList” properties. The former approaches can be implemented to return the node name of the parent element corresponding to “this” object. The latter approach can be utilized to access the first class name of the parent element accordingly. This blog discussed the approaches to access the parent of “this” in JavaScript.
