HTML - DOM 元素 parentNode 属性

parentNode 属性允许您访问 HTML 元素中特定节点的直接父节点。

语法

element.parentNode;

返回值

parentNode 属性返回元素的直接父节点。如果不存在父节点，则返回“null”。

HTML DOM 元素 'parentNode' 属性示例

以下是一些示例，展示了如何使用 'parentNode' 属性访问 HTML DOM 中特定节点的直接父元素。

访问元素的父节点

此示例在单击按钮时，使用 parentNode 属性访问并显示<div> 元素的父节点。

<!DOCTYPE html>
<html lang="en">
<head> 
  <title>parentNode Property</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>parentNode Property</h2>
    <p>
        Click the button to see the parent node 
    	of a div element..
    </p>
    
    <div id="parent">
        <p>This is a paragraph inside a div.</p>
    </div>

    <button onclick="showParent()">
    	Show Parent
    </button>
    <hr>
    <div id="output"></div>

    <script>
        function showParent() {
            var cel=document.querySelector('#parent p');
            var pn = cel.parentNode;

            var otd = document.getElementById('output');
            otd.textContent = `Parent Node: ${pn.tagName}`;
        }
    </script>
</body>

</html>

遍历父节点

此示例演示了如何使用 parentNode 属性遍历父节点，并在单击“显示父节点”按钮后迭代显示每个节点。

<!DOCTYPE html>
<html lang="en">
<head> 
  <title>Iterating through Parent Nodes</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>parentNode Property</h2>
    <p>This example iterates through the parent 
    	element..
    </p>
    <ul id="myList">
        <li>Item 1
            <ul>
                <li>Subitem 1</li>
            </ul>
        </li>
    </ul>

    <button onclick="showParents()">
    	Show Parents
    </button>

    <div id="ot"></div>

    <script>
        function showParents() {
            var subitem = document.querySelector
            ('#myList li ul li');
            var parents = [];

            var curr = subitem;
            while (curr.parentNode) {
                parents.push(curr.parentNode.tagName);
                curr = curr.parentNode;
            }

            var ot = document.getElementById('ot');
            ot.textContent = `Parent Nodes: 
            ${parents.join(' > ')}`;
        }
    </script>
</body>

</html>

支持的浏览器

属性
parentNode	是	是	是	是	是

html_dom_element_reference.htm

打印页面