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

简介: 这段内容介绍了DOM中的`attributes`属性,它返回元素节点的属性节点列表,形成一个命名节点图。这个列表自动更新,当属性增删时反映变化。示例代码展示了如何加载"books.xml",获取第一个`<book>`元素的属性列表,然后使用`getNamedItem()`方法获取"category"属性的值并显示属性数量。输出为"cooking"和"1"。

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 变量来保存第一个 <book> 元素的所有属性的一个列表
从 "category" 属性输出值
输出属性列表的长度
相关文章
|
5天前
|
XML JavaScript 数据格式
XML DOM - 导航节点
在XML DOM中,节点导航涉及利用如parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling等属性。通过这些关系,可以访问和操作XML文档结构。例如,给定一个XML文档,可以使用getElementsByTagName找到特定元素,并通过parentNode属性获取该元素的父节点。在提供的实例中,代码加载&quot;books.xml&quot;,选取第一个&lt;book&gt;元素,并打印出其父节点的名称。
|
5天前
|
XML JavaScript 前端开发
DOM 属性列表(命名节点图 Named Node Map)
这段内容介绍了如何使用JavaScript操作XML文档中的DOM属性。通过`getElementsByTagName`获取元素后,`attributes`属性返回一个命名节点图(Named Node Map),表示元素的属性列表,该列表会自动更新。示例代码展示了加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,然后利用`getNamedItem()`方法获取&quot;category&quot;属性的值并输出,同时显示属性数量。
|
1天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于访问XML文档中的节点。节点可按三种方式获取:使用该方法、循环遍历节点树或通过节点关系导航。`getElementsByTagName()` 返回一个节点列表,类似数组。示例代码加载&quot;books.xml&quot;到`xmlDoc`,并将结果存储在变量`x`中。
|
1天前
|
XML JavaScript 数据格式
XML DOM - 导航节点
在XML DOM中,节点导航涉及利用关系如`parentNode`, `childNodes`, `firstChild`, `lastChild`, `nextSibling`和`previousSibling`。示例展示了如何找到`&lt;book&gt;`元素的父节点,通过`getElementsByTagName`获取第一个`&lt;book&gt;`元素,然后输出其`parentNode.nodeName`。
|
2天前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。在示例中,加载&quot;books.xml&quot;后,通过getElementsByTagName(&quot;title&quot;)获取标题节点列表,然后使用`for`循环遍历列表,输出每个标题的文本内容。此代码演示了如何处理XML文档中的节点集合。
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。提供的实例展示了如何加载XML到DOM,获取根元素的子节点,并打印其名称和值,以“title: Everyday Italian, author: Giada De Laurentiis, year: 2005”为例。
|
5天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于访问 XML 文档中的节点,返回一个节点列表(Node List),类似数组。可通过循环或导航节点关系来遍历和访问这些节点。示例代码加载 &quot;books.xml&quot; 到 xmlDoc,将结果存入变量 x。
|
5天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问每个元素并提取其值。示例代码展示了一个XML文档的遍历过程,输出了所有子节点的名称和值,如&quot;title: Everyday Italian&quot;等。首先加载XML到xmlDoc,然后获取根元素的子节点,并依次打印节点名及文本内容。
|
5天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法从 `xmlDoc` 加载 &quot;books.xml&quot;,创建一个包含匹配节点的节点列表。该列表可遍历以访问每个节点,实现对 XML 文档的节点访问和导航。
|
5天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。