HTML - DOM 元素 nodeValue 屬性

**nodeValue** 屬性用於訪問和更新節點的值。訪問 nodeValue 時，請確保節點有子節點才能訪問其值；否則，您將獲得“null”。

語法

設定 nodeValue 屬性

node.nodeValue = newValue;

獲取 nodeValue 屬性

node.nodeValue;

屬性值

值	描述
newValue	您要為 nodeValue 設定的新值。

返回值

nodeValue 屬性返回一個包含節點文字內容的字串，如果節點不包含文字內容，則返回“null”。

對於元素節點，nodeValue 為 null。

HTML DOM 元素“nodeValue”屬性示例

以下是一些顯示“nodeValue”屬性用法的示例，以幫助您更好地理解。

訪問和更新文字內容

此示例演示如何使用“nodeValue”屬性動態訪問和更新 HTML DOM 元素中的文字內容。程式碼包含一個按鈕，單擊該按鈕時，將使用 nodeValue 屬性更新**<p>** 元素的文字內容。

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

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeValue Property</h2>
    <p>Updates the text content within an element.</p>
    
    <div id="myDiv">
        <!-- Initial text content -->
        <p id="myg">This is the initial text content.</p>
        <!-- Button to update content -->
        <button onclick="updateContent()">
            Update Content
            </button>
    </div>
    
    <script>
        function updateContent() {
            var para =document.getElementById('myg');
            
            // Updating nodeValue
            para.firstChild.nodeValue='Updated text content';
        }
    </script>
</body>

</html>

更新第一個列表項。

此示例演示如何使用 nodeValue 屬性動態更新文字內容。單擊按鈕時，將更新第一個列表項（**<li>**）的文字內容。

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

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeValue Example</h2>
    <p>Updates Text for First Node:</p>
    
    <ul id="myL">
        <!-- Initial list items -->
        <li>This is item 1</li>
        <li>This is item 2</li>
        <li>This is item 3</li>
    </ul>
    
    <button onclick="updateItem()">
            Update First Item
    </button>
    
    <script>
        function updateItem() {
            var list = document.getElementById('myL');
            // Use firstElementChild to skip text nodes
            var firstItem = list.firstElementChild; 
            
            // Check if first child is an li element
            if (firstItem !== null) {
                firstItem.textContent = 
                'Updated text for item 1';
            }
        }
    </script>
</body>

</html>

顯示有關第一個子節點的資訊

此示例演示如何使用 HTML DOM 元素中的“nodeValue”屬性訪問和顯示有關元素第一個子節點的資訊。

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

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nodeValue 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>

支援的瀏覽器

屬性
nodeValue	是	是	是	是	是

html_dom_element_reference.htm

列印頁面