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

打印页面