js--DOM2--元素遍历

本文介绍了DOM2级遍历中的两种方法:NodeIterator和TreeWalker。NodeIterator是通过document.createNodeIterator创建,提供nextNode()和previousNode()进行深度优先遍历。而TreeWalker是NodeIterator的增强版,除了基本的遍历方法,还支持parentNode(), firstChild(), lastChild(), nextSibling()和previousSibling(),便于多方向遍历DOM结构。" 127460495,9100228,MATLAB神经网络:函数拟合与参数解析,"['MATLAB', '神经网络', '开发语言', '函数拟合', '机器学习']

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

1.DOM2 级遍历?

DOM2 级遍历DOM结构的类型:NodeIterator和TreeWalker,两者都是深度优先的DOM结构遍历

1.NodeIterator–较简单

使用document.createNodeIterator()方法创建NodeIterator的新实例,可以接收的4个参数,创建的NodeIterator的新实例中一个内部指针指向根节点

1.root  作为搜索起点的树中的节点

2.whatToShow  想访问那些树中的节点(NodeFilter.SHOW_ELEMENT,NodeFilter.SHOW_ALL,NodeFilter.SHOW_ATTRIBUTE等)

3.filter 是一个NodeFilter对象,或者一个表示应该接收还是拒绝某种特定节点的函数

4.entityReferenceExpansion 布尔值,表示是否要扩展实体引用

NodeIterator类型的两个主要方法:nextNode(),previousNode()

//讲解第三个参数filter,filter对象只是一个方法就是acceptNode(),若该访问此节点,则返回NodeFilter.FILTER_ACCEPT,否则返回NodeFilter.FILTER_SKIP

var filter = {
    acceptNode: function(node) {
        return node.tagName.toLowerCase() == "p" ?
               NodeFilter.FILTER_ACCEPT:
               NodeFilter.FILTER_SKIP;
    }
}
var iterator = document.createNodeIterator(document,NodeFilter.SHOW_ELEMENT,filter,false);
//下面讲解此遍历函数NodeIterator的使用
//HTML代码
<div id="div1">
    <p><b></b></p>
</div>

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

//js代码遍历div下的所有元素节点
var div = document.getElementById("div1"),
    iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false),----创建的NodeIterator的新实例中一个内部指针指向根节点div
    node = iterator.nextNode();

while(node != null) {
    alert(node.tagName);
    node = iterator.nextNode;
}

//输出 DIV P B UL LI LI LI

//若执行返回li标签
var filter = function(node) {
    return node.tagName.toLowerCase() == "li"?
           NodeFilter.FILTER_ACCEPT:
           NodeFilter.FILTER_SKIP;
}
var div = document.getElementById("div1"),
    iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,filter,false),----创建的NodeIterator的新实例中一个内部指针指向根节点div
    node = iterator.nextNode();

while(node != null) {
    alert(node.tagName);
    node = iterator.nextNode();
}
2.TreeWalker–是NodeIterator的另一个更高级的版本

除了NodeIterator的nextNode()和previousNode()的功能外,还有其他方向上遍历DOM结构的方法

pareentNode(),firstChild(),lastChild(),nextSibling(),previousSibling()

使用document.createTreeWalker()方法创建TreeWalker的新实例,可以接收的4个参数(和NodeIterator一致),创建的TreeWalker的新实例中一个内部指针指向根节点

1.root  作为搜索起点的树中的节点

2.whatToShow  想访问那些树中的节点(NodeFilter.SHOW_ELEMENT,NodeFilter.SHOW_ALL,NodeFilter.SHOW_ATTRIBUTE等)

3.filter 是一个NodeFilter对象,或者一个表示应该接收还是拒绝某种特定节点的函数---区别:这里返回值是NodeFilter.FILTER_ACCEPT,NodeFilter.FILTER_SKIP,NodeFilter.FILTER_REJECT;

NodeFilter.FILTER_SKIP----跳出相应节点继续前进到子树的下一个节点
NodeFilter.FILTER_REJECT--跳出相应的节点和节点的整个子树

4.entityReferenceExpansion 布尔值,表示是否要扩展实体引用
//下面讲解此遍历函数TreeWalker的使用
//HTML代码
<div id="div1">
    <p><b></b></p>
</div>

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

//js代码遍历div下的所有元素节点
var div = document.getElementById("div1"),
    walker = document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false;

walker.firstChild(); //转到<p>
walker.nextSibling();//转到<ul>

var node = walker.firstChild();//转到第一个<li>

while(node != null) {
    alert(node.tagName);
    node = walker.nextSibling();
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值