HTML - DOM 元素 nodeName 屬性

nodeName 屬性根據節點的內容識別節點的型別和名稱。它以字串的形式給出節點的名稱，該名稱會隨著內容型別的變化而變化。

對於元素節點，它以大寫形式給出標籤名稱。
對於註釋節點，它給出 #comment。
對於文字節點，它給出 #text。

語法

element.nodeName;

返回值

nodeName 屬性返回一個包含節點名稱的字串，該名稱基於其內容型別：對於元素節點，它返回大寫形式的標籤名稱；對於文字節點，它返回 #text；對於註釋節點，它返回 #comment。

HTML DOM 元素 'nodeName' 屬性示例

以下是一些示例，用於更好地理解 'nodeName' 屬性的用法。

顯示 HTML 元素的節點名稱

此示例演示如何使用 nodeName 屬性訪問和顯示各種 HTML 元素的節點名稱。

<!DOCTYPE html>
<html lang="en">
<head>  
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeName Property</h2>
    <p>Displays the node names of various elements.</p>

    <div id="otpt"></div> 
    <script>
        // Selecting h1, h2, and p elements
        const ele=document.querySelectorAll('h1, h2,p'); 
        const outputDiv=document.getElementById('otpt');

        ele.forEach(element => {
            const nodeName = element.nodeName;
            const nodeDescription = 
            document.createElement('p');
            nodeDescription.textContent = 
            `Node name of <${nodeName}> element:
            ${nodeName}`;

                nodeDescription.classList.add('highlight');
            

            outputDiv.appendChild(nodeDescription);
        });
    </script>
</body>

</html>

根據節點型別訪問和設定樣式

此示例演示了 nodeName 屬性在訪問具有 id “pt” 的父節點的<div>元素及其元素型別方面的用法，然後透過顯示其節點型別相應地設定其樣式。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .highlight {
            color: blue;
            font-weight: bold;
        }
        
    </style>
</head>
<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeName Property</h2>
    <p>Updates element's style based on node type.</p>
    <p>Contents of div element with id = "pt"
        with their different node types:
        </p>
    
    <div id="pt">
        <div>First div</div>
        <span>Span element</span>
    </div>

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

    <script>
        const parentDiv =document.getElementById('pt');
        const childNodes = parentDiv.childNodes;
        const outputDiv =document.getElementById('ot');

        childNodes.forEach(node => {
            const nodeName = node.nodeName;

            //New element for displaying node information
            const nodeDes=document.createElement('p');
            // Customize style based on node type
            if (nodeName === 'DIV') {
                nodeDes.textContent=`Div element found: 
                ${node.textContent}`;
                nodeDes.classList.add('highlight');
            } else if (nodeName === 'SPAN') {
                nodeDes.textContent=`Span element found:
                    ${node.textContent}`;               
            }

            outputDiv.appendChild(nodeDes);
        });
    </script>
</body>

</html>

顯示 body 元素的節點名稱

此示例演示瞭如何使用 'nodeName' 屬性顯示<body>元素內的所有元素。

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

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeName Property</h2>
    <p>Displaying the node names of all <body> 
        elements.
    </p>

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

    <script>
        // Selecting the <body> element
        const bodyElement = document.body;
        
        // Getting all child nodes of <body>
        const childNodes=bodyElement.childNodes;
        
        // Creating a div element for output
        const outputDiv=document.getElementById('ot');
        
        // Iterating over child nodes
        childNodes.forEach(node => {
            if (node.nodeType === Node.ELEMENT_NODE) {
                const noNDes=document.createElement('p');
                noNDes.textContent=`Node name: 
                ${node.nodeName}`;
                outputDiv.appendChild(noNDes);
            }
        });
    </script>
</body>

</html>

訪問節點名稱、值和型別

此示例透過使用 HTML DOM 元素的 nodeName 屬性，幫助我們獲取具有 ID “myDiv” 的<div>元素中第一個子節點的節點名稱、值和型別。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Get Node Name, Value, and Type Example</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>Get Node Name, Value, and Type</h2>
    <p>Displaying node name, value, and type of 
        first child.
    </p>

    <div id="myDIV">
        <p>This is the first child node.</p>
    </div>

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

    <script>
        // Selecting the element with id "myDIV"
        const myDiv = document.getElementById('myDIV');
        
        // Getting the first child node
        const firstChild = myDiv.firstChild;

        // Creating elements to display results
        const outputDiv = document.getElementById('ot');

        // Node name
        const nodeDes = document.createElement('p');
        nodeDes.textContent = `Node name of first child 
        node: ${firstChild.nodeName}`;
        outputDiv.appendChild(nodeDes);

        // Node value (for text nodes)
        if (firstChild.nodeType === Node.TEXT_NODE) {
            const nodeval = document.createElement('p');
            nodeval.textContent = `Node value of first 
            child node:This is "myDIV".`;
            outputDiv.appendChild(nodeval);
        }

        // Node type
        const nodedes = document.createElement('p');
        nodedes.textContent=`Node type of first child 
        node: ${firstChild.nodeType}`;
        outputDiv.appendChild(nodedes);

    </script>
</body>

</html>

支援的瀏覽器

屬性
nodeName	是	是	是	是	是

html_dom_element_reference.htm

列印頁面