HTML - DOM 元素 parentElement 屬性



**parentElement** 屬性允許您訪問 HTML 元素中特定元素的直接父元素。如果直接父節點不是元素,則 parentElement 返回 null。

語法

element.parentElement;

返回值

parentElement 屬性返回特定元素的直接父元素。如果不存在父元素,則返回“null”。

HTML DOM 元素“parentElement”屬性的示例

以下是一些示例,展示瞭如何使用“parentElement”屬性訪問 HTML DOM 中特定元素的直接父元素。

訪問父元素

此示例演示如何使用 parentElement 屬性訪問子元素(**<p>**)的父元素(Div)。單擊按鈕時,它會使用父元素的標籤名稱更新 **<div>** 的內容。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>
        HTML DOM Element parentElement Property
    </title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>parentElement Property</h2>
    <p>Click the button to see parent Element</p>

    <div id="child">
        <p>This paragraph is inside a div element.</p>
        <button onclick="displayParent()">
            Display Parent
        </button>
    </div>

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

    <script>
        function displayParent() {
            var child = document.getElementById('child');
            var pele = child.parentElement;
            var odiv = document.getElementById('ot');
            odiv.textContent = 'Parent Element: ' 
            + pele.tagName;
        }
    </script>
</body>

</html> 

查詢段落的父元素

此示例演示如何使用 parentElement 屬性訪問子元素(<p>)的父元素(Div)。單擊按鈕時,它會使用父元素的標籤名稱更新 <div> 元素的內容。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>
        HTML DOM Element parentElement Property
    </title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>parentElement Property</h2>
    <p>Click the button to see parent Element</p>
    
    <div>
        <p id="para">
        	This is a paragraph inside a div.
        </p>
        <button onclick="displayParent()">
        	Display Parent
        </button>
    </div>
    <hr>
    <div id="ot"></div>

    <script>
        function displayParent() {
            var para=document.getElementById('para');
            var pele = para.parentElement;
            var oDiv = document.getElementById('ot');
            oDiv.textContent = 'Parent Element: ' 
            + pele.tagName;
        }
    </script>
</body>

</html>      

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
parentElement
html_dom_element_reference.htm
廣告