What is parent attribute in html?

Question

The attribute specifies where to open the linked document in an a (anchor) tag.

Examples of
Get Attribute of a Parent Node using JavaScript #
What is a parent frame in HTML?
What is the difference between self and parent in HTML?
What is parent frame?
What is the difference between _parent and _TOP?

Examples of

A target attribute with the value of “_blank” opens the linked document in a new window or tab.

	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

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>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <div data-id="parent-1">
      <div id="child">Child 1div>
    div>

    <script src="index.js">script>
  body>
html>

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>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <div id="parent-1" data-id="parent-1">
      <span id="parent-2">
        <div id="child">Child 1div>
      span>
    div>

    <script src="index.js">script>
  body>
html>

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.

What is parent attribute in html?

Examples of

Get Attribute of a Parent Node using JavaScript #

What is a parent frame in HTML?

What is the difference between self and parent in HTML?

What is parent frame?

What is the difference between _parent and _TOP?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội