改变节点

收藏642

阅读1852

更新时间2025-07-30

改变元素的值

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

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

如需更改元素的文本值,必须更改元素的文本节点的值。

改变文本节点的值

nodeValue 属性可用于更改文本节点的值

下面的代码更改第一个 <title> 元素的文本节点值:

例子 1

xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue = "潮菜天下"
运行实例 »

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

例子解释:

  1. 假设 books.xml 被加载到 xmlDoc
  2. 获取 <title> 元素的第一个子节点
  3. 把此文本节点的节点值更改为 "潮菜天下"

例子 2

循环并更改所有 <title> 元素的文本节点:

for (i = 0; i < x.length; i++) {
    x[i].childNodes[0].nodeValue = "已更改的文本";
}
运行实例 »

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

改变属性的值

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

更改属性值的方法是更改其文本值。

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

使用 setAttribute() 改变属性

setAttribute() 方法设置已有属性的值,或创建新属性

setAttribute() 方法可更改属性的值。如果该属性不存在,则创建一个新属性。

这段代码更改 <book> 元素的 category 属性:

例子 1

xmlDoc.getElementsByTagName("book")[0].setAttribute("category","烹饪");
运行实例 »

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

例子解释:

  1. 假设 books.xml 已被加载到 xmlDoc
  2. 获取第一个 <book> 元素
  3. 将 "category" 属性的值更改为 "烹饪"

例子 2

循环遍历所有 <title> 元素并添加新属性:

x = xmlDoc.getElementsByTagName('title');
for (i = 0; i < x.length; i++) { 
    x[i].setAttribute("edition","第一版");    
}
运行实例 »

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

注意:如果该属性不存在,则会创建一个新属性(带有指定的名称和值)。

使用 nodeValue 改变属性

nodeValue 属性是属性节点的值

更改 nodeValue 属性可更改属性的值。

实例

xmlDoc.getElementsByTagName("book")[0].getAttributeNode("category").nodeValue = "烹饪";
运行实例 »

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

例子解释:

  1. 假设 books.xml 已被加载到 xmlDoc
  2. 获取第一个 <book> 元素的 "category" 属性
  3. 将属性节点的值更改为 "烹饪"

科技资讯

更多

精选课程

更多
前端入门_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号