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" 属性输出值
输出属性列表的长度

相关文章
|
3天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`的`Named Node Map`是元素节点的属性列表,类似节点列表但有区别。当属性增删时,列表自动更新。示例代码加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性节点列表,`x.length`表示属性数量,`x.getNamedItem(&quot;category&quot;).nodeValue`显示&quot;category&quot;属性值。输出为:`cooking`和`1`,表示类别为烹饪且有1个属性。
|
1天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文段介绍如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,遍历并打印出`book`元素的所有子节点的名称和值,如`title`, `author`, `year`等。
|
2天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于访问XML文档中的节点。它返回一个节点列表(Node List),类似数组,允许通过循环或导航节点关系来遍历和访问每个节点。例如,加载 &quot;books.xml&quot; 到 `xmlDoc`,然后存储在变量 `x` 中,便于进一步处理。
|
3天前
|
XML JavaScript 前端开发
XML DOM 遍历节点树
```markdown 遍历XML DOM节点树涉及在文档中循环移动。以下示例展示如何遍历并显示所有子节点的名称和值: ``` ```xml &lt;!DOCTYPE html&gt; &lt;output&gt; title: Everyday Italian author: Giada De Laurentiis year: 2005 &lt;/output&gt; ``` ```javascript // 加载XML到xmlDoc // 获取根元素子节点 // 对每个子节点,打印节点名和文本节点值 ```
|
4天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于访问XML文档中的节点。节点可按三种方式获取:使用该方法、循环遍历节点树或通过节点关系导航。`getElementsByTagName()` 返回一个节点列表,类似数组。示例代码加载&quot;books.xml&quot;到`xmlDoc`,并将结果存储在变量`x`中。
|
4天前
|
XML JavaScript 数据格式
XML DOM - 导航节点
在XML DOM中,节点导航涉及利用关系如`parentNode`, `childNodes`, `firstChild`, `lastChild`, `nextSibling`和`previousSibling`。示例展示了如何找到`&lt;book&gt;`元素的父节点,通过`getElementsByTagName`获取第一个`&lt;book&gt;`元素,然后输出其`parentNode.nodeName`。
|
8天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
8天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
14 2
|
8天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
14 0
|
8天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)