DOM 获取节点

创建于 2024-12-03 / 22

字体： [默认] [大] [更大]

nodeValue 属性用于获取节点的文本值。

getAttribute() 方法返回属性的值。

Header

获取元素的值

在DOM中，一切都是一个节点。元素节点没有文本值。

元素节点的文本值存储在子节点中。此节点称为文本节点。

要检索元素的文本值，必须检索元素的文本节点的值。

getElementsByTagName 方法

getElementsByTagName() 方法返回所有元素的节点列表，这些元素具有指定的标记名，其顺序与它们在源文档中出现的顺序相同。

假设"books.xml"已加载到 xmlDoc 中。

此代码检索第一个<title>元素:

var x = xmlDoc.getElementsByTagName("title")[0];

ChildNodes 属性

childNodes 属性返回元素的子节点列表。

以下代码检索第一个<title>元素的文本节点:

x = xmlDoc.getElementsByTagName("title")[0];
y = x.childNodes[0];

nodeValue 属性

nodeValue 属性返回文本节点的文本值。

以下代码检索第一个<title>元素的文本节点的文本值:

实例

x = xmlDoc.getElementsByTagName("title")[0];
y = x.childNodes[0];
z = y.nodeValue;

z 中的结果: "Everyday Italian"

完整实例

实例

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName('title')[0];
    var y = x.childNodes[0];
    document.getElementById("demo").innerHTML = y.nodeValue;
}
</script>

</body>
</html> 尝试一下 »

遍历所有 <title> 元素: 尝试一下

获取属性的值

在DOM中，属性是节点。与元素节点不同，属性节点具有文本值。

获取属性值的方法是获取其文本值。

可以使用getAttribute（）方法或使用属性节点的nodeValue属性来完成此操作。

获取属性值 - getAttribute()

getAttribute() 方法返回属性的值。

以下代码检索第一个<title>元素的"lang"属性的文本值:

实例

x = xmlDoc.getElementsByTagName("title")[0];
txt = x.getAttribute("lang"); 尝试一下 »

文本结果: "en"

循环遍历所有<book>元素并获得它们的"category"属性: 亲自试一试

获取属性值 - getAttributeNode()

getAttributeNode() 方法返回一个属性节点。

以下代码检索第一个<title>元素的"lang"属性的文本值:

实例

x = xmlDoc.getElementsByTagName("title")[0];
y = x.getAttributeNode("lang");
txt = y.nodeValue; 尝试一下 »

文本结果 = "en"

遍历所有<book>元素并获取它们的"category"属性:尝试一下

0 人点赞过