This tutorial will discuss the approaches to get the attribute of a parent node using JavaScript.
How to Get Attribute of a Parent Node Using JavaScript?
The attribute of the parent node can be fetched in JavaScript by using the following approaches:
- “parentElement” property with the “getAttribute()” method.
- “closest()” and “getAttribute()” methods.
- “jQuery” methods.
Approach 1: Get Attribute of a Parent Node in JavaScript Using parentElement Property With the getAttribute() Method
The “parentElement” property gives the parent element of the associated element. Whereas the “getAttribute()” method returns the value of an element’s attribute. These methods can be applied in combination to access the child node and get the particular attribute of the parent node by referring to the child node.
Syntax
In the above-given syntax:
“name” points to the attribute’s name.
Example
Let’s overview the following example:
<h3 id="childnode">This is Linuxhint Website</h3>
</div>
<script type="text/javascript">
let get = document.getElementById('childnode');
let parentNode = get.parentElement.getAttribute('id');
console.log("The attribute of parent node is:", parentNode);
</script>
In the above code snippet:
- Firstly, include the “<div>” element having the stated “id” which will be considered as the “parent” node.
- In the next step, specify the “<h3>” element having the specified “id”, which will be treated as the “child” node.
- In the JS code, access the child node by its “id” via the “getElementById()” method.
- After that, associate the “parentElement” property and the “getAttribute()” methods to the fetched child node.
- This will result in fetching the specified attribute of the parent node by referring to the child node.
Output
In the above output, it can be observed that by referring to the “id” of the parent node, the corresponding set attribute is displayed.
Approach 2: Get Attribute of a Parent Node in JavaScript Using closest() and getAttribute() Methods
The “closest()” method searches the elements in a DOM tree matching a specific CSS selector. This method can be implemented in combination with the “getAttribute()” method to search for the closest element to the particular child element and fetch its(parent node) attribute.
Syntax
In the above syntax:
“selectors” correspond to one or more than one CSS selectors.
Example
Let’s go through the following example:
<h3 id="childnode">This is an Image</h3>
<img src="template5.png" id = "childnode">
</div>
<script type="text/javascript">
let get = document.getElementById('childnode');
let parentNode = get.closest('#parentnode').getAttribute('style');
console.log("The attribute of parent node is:", parentNode);
</script>
Apply the following steps as given in the above lines of code:
- Likewise, include the parent node and two child nodes having the stated “ids”, respectively.
- In the JavaScript code, access the child nodes, as discussed, using the “getElementById()” method.
- In the next step, apply the “closest()” method referring to the “id” of the parent element. This will result in accessing the closest element having the stated id.
- Also, apply the “getAttribute()” method to fetch the specified “attribute” of the accessed parent element in the previous step.
- Lastly, display the corresponding parent node’s attribute.
Output
From the above output, it can be seen that the parent node’s attribute “style” is fetched.
Approach 3: Get Attribute of a Parent Node in JavaScript Using jQuery Methods
This approach can be applied to access the child node directly and access the attribute of the parent node by referring to it via separate methods.
Example
The following example illustrates the stated concept:
<div id="parentnode">
<div id="childnode">
<input type="text" id = "childnode" placeholder="Enter text...">
</div></div>
<script type="text/javascript">
alert($(childnode).parent().attr('id'))
</script>
In the above code:
- Include the “jQuery” library to apply its methods.
- After that, specify the parent and child node likewise. The input “text” field here will act as the “child” node.
- In the JS code, access the child element, i.e., input text field. The “parent()” and the “attr()” methods will locate the specified attribute in the parent element and display it via an alert.
Output
The above output signifies that the desired requirement is achieved.
Conclusion
The parentElement property with the getAttribute() method can redirect to the parent node and fetch its particular attribute. The closest() and getAttribute() methods can fetch the closest element with respect to the associated child element and fetch its attribute. Whereas the jQuery methods can access the child node directly and use separate methods for each function to perform the desired requirement. This blog explains how to get the attribute of a parent node in JavaScript.
