获取节点

收藏337

阅读1852

更新时间2025-07-30

获取元素的值

在 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 中的结果:雅舍谈吃

完整实例

例子 1

<!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>
运行实例 »

点击 "运行实例" 按钮查看在线实例

例子 2

循环遍历所有 <title> 元素:

x = xmlDoc.getElementsByTagName('title');
for (i = 0; i < x.length; i++) { 
    txt += x[i].childNodes[0].nodeValue + "<br>";
}
运行实例 »

点击 "运行实例" 按钮查看在线实例

获取属性的值

在 DOM 中,属性也是节点。与元素节点不同的是,属性节点有文本值。

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

可以通过使用 getAttribute() 方法或属性节点的 nodeValue 属性来完成这个任务。

获取属性值 - getAttribute()

getAttribute() 方法返回属性的值

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

例子 1

x = xmlDoc.getElementsByTagName("title")[0];
txt = x.getAttribute("lang");
运行实例 »

点击 "运行实例" 按钮查看在线实例

例子 2

循环遍历所有 <book> 元素并获取它们的 "category" 属性:

x = xmlDoc.getElementsByTagName("book");
for (i = 0; i < x.length; i++) { 
    txt += x[i].getAttribute("category") + "<br>";
}
运行实例 »

点击 "运行实例" 按钮查看在线实例

获取属性值 - getAttributeNode()

getAttributeNode() 方法返回属性节点

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

例子 1

x = xmlDoc.getElementsByTagName("title")[0];
y = x.getAttributeNode("lang");
txt = y.nodeValue;
运行实例 »

点击 "运行实例" 按钮查看在线实例

例子 2

循环遍历所有 <book> 元素并获取它们的 "category" 属性:

x = xmlDoc.getElementsByTagName("book");
for (i = 0; i < x.length; i++) {
    txt += x[i].getAttributeNode("category").nodeValue + "<br>";
}
运行实例 »

点击 "运行实例" 按钮查看在线实例

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

62万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.5万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

71.3万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.9万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23.1万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

34.1万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号