The freeCodeCamp
A target attribute with the value of “_self” opens the linked document in the same frame as it was clicked [this is the default and usually does not need to be specified].
freeCodeCamp
freeCodeCamp
A target attribute with the value of “_parent” opens the linked document in the parent frame.
freeCodeCamp
A target attribute with the value of “_top” opens the linked document in the full body of the window.
freeCodeCamp
A target attribute with the value of “framename” opens the linked document in a specified named frame.
freeCodeCamp
- The attribute
- General info on HTML attributes
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
Get Attribute of a Parent Node using JavaScript #
To get an attribute of a parent node:
- Select the child element.
- Use the
parentElement
property to get access to the parent node. - Call the
getAttribute[]
method on tha result, passing it the attribute name as a parameter.
Here is the HTML for the examples in this article.
Copied!
DOCTYPE html> Child 1
And here is the related JavaScript code.
Copied!
const child = document.getElementById['child']; const attr = child.parentElement.getAttribute['data-id']; console.log[attr]; // 👉️ "parent-1"
We used the parentElement property on the node to get access to its parent.
The next step is to use the Element.getAttribute[] method, which returns the value of the specified attribute.
If the provided attribute does not exist on the element, the getAttribute[]
method returns null
or ""
[empty string].
If you need to get an attribute of an element that isn't a direct parent of the node, you can use the closest[] method to select the element.
The closest[]
method traverses the Element
and its parents until it finds a node that matches the provided selector.
Let's say that we need to select the div
with id
of parent-1
in this example.
Copied!
DOCTYPE html> Child 1
Here is how we would get an attribute of the div
element
using JavaScript.
Copied!
const child = document.getElementById['child']; const attr = child.closest['#parent-1'].getAttribute['data-id']; console.log[attr]; // 👉️ "parent-1"
We used the closest
method instead of the parentElement
property as we're trying to access an attribute on an element that isn't a direct parent.
If the element itself matches the selector, the element is returned.
If no element that matches the provided selector exists, the closest[]
method returns null
.
The method takes a string that contains a selector. The provided selector can be as specific as necessary.
Copied!
const child = document.getElementById['child']; const attr = child.closest['body > div#parent-1'].getAttribute['data-id']; console.log[attr]; // 👉️ "parent-1"
In
the example above, we used the closest[]
method to select a div
element with an id
of parent-1
, which has the body
element as its parent.
If an invalid selector string is provided to the closest[]
method, a SyntaxError
is thrown.