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

简介: 该文段介绍了DOM中的命名节点图(Named Node Map),它是元素节点属性的列表,会自动更新以反映属性变化。示例展示了如何通过`loadXMLDoc()`加载"books.xml",获取第一个`<book>`元素的属性节点列表,使用`x.getNamedItem("category").nodeValue`显示"category"属性值,`x.length`显示属性数量。输出为"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 变量来保存第一个 元素的所有属性的一个列表
从 "category" 属性输出值
输出属性列表的长度

相关文章
|
1天前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,即节点数量。通过它可遍历列表,如`for(i=0; i&lt;x.length; i++)`循环访问每个`title`节点,并输出其内容。示例展示了从&quot;books.xml&quot;加载XML后,获取并打印所有标题节点的值。
|
2天前
|
XML JavaScript 数据格式
XML DOM 节点树
这是一个关于XML DOM节点树的描述,提到了从第一个子节点到最后一个子节点的内容。示例XML片段包含书籍信息:书名&quot;Giada De Laurentiis&quot;,出版年份&quot;2005&quot;和价格&quot;30.00&quot;。
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过示例代码展示了如何使用DOM解析XML,遍历并打印出所有子节点的名称和值,以提取所需信息。实例中,XML数据包含书籍详情,程序逐个输出了这些细节。
|
3天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。通过遍历这个属性,如`for (i=0; i&lt;x.length; i++)`,可以访问和处理每个节点。在示例中,加载&quot;books.xml&quot;,然后获取所有&quot;&lt;title&gt;&quot;标签,并输出它们的子节点值。
|
4天前
|
XML JavaScript 数据格式
XML DOM 节点树
这是一个关于XML DOM节点树的描述,提到了从第一个子节点到最后一个子节点的内容。示例XML片段展示了一本书的信息:书名&quot;Giada De Laurentiis&quot;,出版年份&quot;2005&quot;和价格&quot;30.00&quot;。
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
4天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
7 2
|
5天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
24天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
16 2
|
25天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
28 1