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

列印頁面