Javascript遍历DOM和遍历属性

本文详细介绍了如何遍历DOM节点及其属性,包括使用childNodes、firstChild、lastChild等基本属性来遍历节点,以及Element类型的attributes属性如何用于获取节点的所有属性。文章还提供了实例代码演示了如何获取特定属性的值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、遍历DOM节点

  遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。

  

 

二、遍历节点属性

  Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap(节点属性列表)。NamedNodeMap对象拥有下列方法:

    getNamedItem(name):返回nodeName属性等于name的节点。

    setNamedItem(node):向列表中添加节点,以节点的nodeName属性为索引。

    removeNamedItem(name):从列表中移除nodeName属性等于name的节点。

    item(pos):返回位于数字pos位置的节点。

  attributes属性中包含一系列节点,每个节点的nodeName就是特性的名称,而节点的nodeValue特性的值。

var id = element.attributes.getNamedItem('id').nodeValue;
//下面代码在IE中会列出节点所有属性,而在Firefox,Chrome中只列出显示声明的属性
var attrMap = element.attributes;
for(var i = 0; i < attrMap.length; i++){
    console.log(attrMap[i].nodeName + ' : ' + attrMap[i].nodeValue);
}

  

  

转载于:https://www.cnblogs.com/realwall/archive/2012/06/20/2556962.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值