HTML - DOM 元素 nodeType 属性

nodeType 属性返回一个数字，告诉我们文档中节点的类型。元素节点返回 1，文本节点返回 3，注释节点返回 8，还有其他一些可能的值。

语法

node.nodeType

返回值

nodeType 属性返回一个整数，表示节点的类型。

节点类型及其属性。

整数值	节点类型	节点名称	节点值
1	元素	元素名称（大写）	null
2	属性	属性名称	属性值
3	文本	#text	文本节点的内容
4	CDATA 节	#cdata-section	CDATA 节的内容
5	实体引用	实体引用名称	null
6	实体	实体名称	null
7	处理指令	处理指令的目标	处理指令的内容
8	注释	#comment	注释文本
9	文档	#document	null
10	文档类型	文档类型名称	null
11	文档片段	#document fragment	null
12	符号	符号名称	null

HTML DOM 元素 'nodeType' 属性示例

以下是一些示例，用于更好地理解 'nodeType' 属性的用法。

获取 h1 元素的节点类型。

此示例演示如何使用 nodeType 属性来识别和处理 DOM 中不同类型的节点，尤其关注<h1> 元素。代码选择 <h1> 元素并返回此元素的节点类型。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>nodeType Property Example</title>
</head>
    
<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeType Property</h2>
    <p>Displays the node type of a particular node:</p>
    <script>
        window.onload = function() {
            var header = document.querySelector('h1');
            var nodeType = header.nodeType;
            
            // Display nodeType value in the HTML
            var resultDiv=document.getElementById('res');
            resultDiv.textContent='Node Type:'+nodeType;
            
            // Additional check for demonstration
            if (nodeType === Node.ELEMENT_NODE) {
                resultDiv.textContent += 
                ' (This is an element node)';
            } else {
                resultDiv.textContent += 
                ' (This is not an element node)';
            }
        };
    </script>
    <div id="res"></div>
</body>

</html>

获取段落的节点类型

此示例帮助我们使用 nodeType 属性识别和显示段落 (<p>) 元素中文本节点的信息。结果显示在 ID 为 "result" 的<div> 元素中。

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

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeType Property</h2>
    <p>This paragraph contains <strong>some text</strong>
        and <em>emphasis</em>.
    </p>
    <script>
        window.onload = function() {
            var paragraph = document.querySelector('p');
            var nodeType = paragraph.firstChild.nodeType;
            
            // Display nodeType value in the HTML
            var resultDiv=document.getElementById('res');
            resultDiv.textContent = 'Node Type: ' 
            + nodeType + (nodeType === Node.TEXT_NODE
            ?'(This is a Text node)':'(Not text node)');
        };
    </script>
    <div id="res"></div>
</body>

</html>

显示 ul 元素的节点类型

此示例演示如何使用 nodeType 属性迭代<ul> 元素中子节点的类型，包括<li> 元素、注释和文本节点。代码显示每个子节点的返回类型和整数值。

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

<script>
    window.onload = function() {
        var ulElement = document.querySelector('ul');
        var childNodes = ulElement.childNodes;        
        // Display nodeType of each child node in the HTML
        var resultDiv = document.getElementById('result');
        
        // Introductory paragraph
        var introParagraph = document.createElement('p');
        introParagraph.textContent=
        'Displays nodeType of each child node:';
        resultDiv.appendChild(introParagraph);
        
        for (var i = 0; i < childNodes.length; i++) {
            var nodeType = childNodes[i].nodeType;
            var nodeTypeText = nodeType === 
                Node.ELEMENT_NODE ? 'Element' :
                    nodeType === Node.TEXT_NODE ? 'Text' :
                    nodeType===Node.COMMENT_NODE?'Comment':
                    nodeType === Node.DOCUMENT_NODE 
                    ? 'Document' :
                                'Other';
            
            resultDiv.innerHTML+=
            '<p>Node Type of Child Node '
            +(i+1)+':'+nodeTypeText + '</p>';
        }
    };
</script>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeType Property</h2>
    <h4>Below are some Child Nodes :</h4>
    <ul>
        <li>Item 1</li>
        <!-- Comment -->
        <li>Item 2</li>
        Text Node between items
        <li>Item 3</li>
    </ul>
    <div id="result"></div>
</body>

</html>

显示有关第一个子节点的信息

此示例演示如何使用 HTML DOM 元素中的 'nodeType' 属性访问和显示元素的第一个子节点的信息。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Node Information Example</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeType Property</h2>
    <p>Displays the information about 
        the first Child Node:
    </p> 
    <div id="my">
        <!-- First child node -->
        <p>Content of the first child node.</p>
    </div>
    <script>
        window.onload = function() {
            var divElement=document.getElementById('my');
            var firstChild = divElement.firstChild;
            
            var nodeName = firstChild.nodeName;
            var nodeValue =firstChild.nodeValue||'N/A';
            var nodeType = firstChild.nodeType;
            
            var resultDiv=document.getElementById('res');
            resultDiv.innerHTML = 
                '<p>Node Name: ' + nodeName + '</p>' +
                '<p>Node Value: ' + nodeValue + 
                "Content of the first child node"+'</p>'+
                '<p>Node Type: ' + nodeType + '</p>';
        };
    </script>

    <div id="res"></div>
</body>

</html>

支持的浏览器

属性
nodeType	是	是	是	是	是

html_dom_element_reference.htm

打印页面