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

列印頁面