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`存储属性列表,`x.length`显示属性数量,`x.getNamedItem(&quot;category&quot;)`返回&quot;category&quot;属性值。代码输出属性值&quot;cooking&quot;和属性数量1。
|
3天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度。在示例中,代码加载&quot;books.xml&quot;,然后使用`getElementsByTagName(&quot;title&quot;)`获取所有标题节点。通过循环`x.length`,遍历并输出每个标题节点的第一个子节点的值。
|
5天前
|
XML JavaScript 前端开发
属性和方法向 XML DOM 定义了编程接口
XML DOM 是一个编程接口,它将XML表示为节点对象集合,可通过JavaScript等语言访问。接口通过属性和方法定义,属性如nodeName、nodeValue显示节点信息,方法如getElementsByTagName、appendChild、removeChild执行操作。例如,x.nodeName返回节点名称,x.appendChild(node)添加子节点。
|
23天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
14天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
13 2
|
15天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
22 1
|
23天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
17 2
|
23天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
15 0
|
23天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
23天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)