DOM 属性列表(命名节点图 Named Node Map)

简介: 这段内容介绍了如何使用JavaScript操作XML文档中的DOM属性。通过`getElementsByTagName`获取元素后,`attributes`属性返回一个命名节点图(Named Node Map),表示元素的属性列表,该列表会自动更新。示例代码展示了加载"books.xml",获取第一个`<book>`元素的属性列表,然后利用`getNamedItem()`方法获取"category"属性的值并输出,同时显示属性数量。

DOM 属性列表(命名节点图 Named Node Map)

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

这被称为命名节点图(Named Node Map),除了方法和属性上的一些差别以外,它与节点列表相似。

属性列表会保持自身的更新。如果删除或添加属性,这个列表会自动更新。

下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中,并返回 "books.xml" 中第一个 元素的属性节点列表:
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book')[0].attributes;

在上面的代码执行之后,x.length 等于属性的数量,可使用 x.getNamedItem() 返回属性节点。

下面的代码片段显示一个 book 的 "category" 属性的值,以及其属性的数量:
实例
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0].attributes;

document.write(x.getNamedItem("category").nodeValue);
document.write("" + x.length);

输出:
cooking
1

尝试一下 »

实例解释:

使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
设置 x 变量来保存第一个 元素的所有属性的一个列表
从 "category" 属性输出值
输出属性列表的长度

相关文章
|
2天前
|
存储 JavaScript
DOM 节点列表长度(Node List Length)
名为 &quot;title&quot; 的元素节点,并存储在节点列表 x 中。通过 &quot;length&quot; 属性确定 x 的长度(即 &quot;title&quot; 节点总数)。利用 for 循环遍历整个列表,访问每个 &quot;title&quot; 节点的第一个子节点的值,并将其写入文档。
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时,我们常需提取各元素值,这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点,并输出它们的名称和值:例如 &quot;title: Everyday Italian&quot;,&quot;author: Giada De Laurentiis&quot; 和 &quot;year: 2005&quot;。实现步骤包括:加载XML字符串至xmlDoc;获取根元素子节点;输出各子节点名称及文本节点值。
|
4天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时,我们常需提取各元素值,这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点,并输出它们的名称和值:例如 &quot;title: Everyday Italian&quot;,&quot;author: Giada De Laurentiis&quot; 等。
|
4天前
|
存储 JavaScript
DOM 节点列表长度(Node List Length)
名为 &quot;title&quot; 的元素节点,并存储在节点列表 x 中。通过 &quot;length&quot; 属性确定 x 的长度(即 &quot;title&quot; 节点总数)。利用 for 循环遍历整个列表,访问每个 &quot;title&quot; 节点的第一个子节点的值,并将其写入文档。
|
3月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
148 0
|
8天前
|
XML JavaScript 前端开发
JavaScript中的DOM解析器DOMParser api的讲解
`DOMParser`能将XML或HTML源码字符串解析成DOM `Document`。通过`new DOMParser()`创建实例,使用`.parseFromString(string, type)`方法进行解析,其中`string`为待解析的字符串,`type`指定解析类型如`text/html`或`text/xml`等,返回一个`Document`对象。例如,可解析包含`&lt;p&gt;666&lt;/p&gt;`的字符串并获取其文本内容`666`。
13 1
|
2月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
2月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
29 2
|
1月前
|
JavaScript 前端开发
JavaScript 遍历DOM
JavaScript 遍历DOM
20 0
|
2月前
|
前端开发 JavaScript 程序员
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
21 0