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

打印页面