js 遍历节点树API

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

一. 遍历API,2个：

1. NodeIterator：按照深度优先的原则向上或向下遍历节点

每次只引用一个节点对象

如何使用：2步：

1. 创建迭代器对象：

var iterator=document.createNodeIterator(

开始的节点对象,

遍历节点的类型,//NodeFilter.SHOW_ALL

//NodeFilter.SHOW_ELEMENT null,false

);

2. 跳到下一个节点对象：var next=iterator.nextNode();

如果没有下一个节点，就返回null

退一步，返回上一个节点：var prev=iterator.previousNode();

获得当前正在站的节点：iterator.referenceNode

例如:使用API遍历节点数

<!DOCTYPE HTML>
<html>
<head>
<title>使用遍历API遍历节点或元素树</title>
<meta charset="utf-8"/>
<script src="js/5.js"></script>
</head>
<body>
<span class="msg">Hello World !</span>
<ul>
<li>综艺</li>
<li>电影
<ul>
<li>水浒传</li>
<li>东游记</li>
<li>西游记</li>
</ul>
</li>
<li>剧集</li>
</ul>
</body>
</html>

复制代码

下面是js文件:

window.onload=function(){
var tabs=["|-"];
//Step1: 创建迭代器对象：
var iterator=document.createTreeWalker(
document,//开始节点
NodeFilter.SHOW_ELEMENT,
null,false);
//Step2: 使用循环，推动迭代器跳向下一个节点
var node;
while((node=iterator.nextNode())!=null){
console.log(tabs.join("")+
(node.nodeType!=1&&node.nodeType!=9&&node.nodeType!=10?
node.nodeValue:
node.nodeName)
);
if(node.childNodes.length!=0){//如果当前节点有子节点
tabs.unshift("t"); //压入缩进
}else{//如果没有子节点，才考虑退格
//下一个节点不是自己的兄弟
var next=iterator.nextNode();
if(next==null){break;//已经是最后节点，就退出
}else if(node.nextSibling!=next){
tabs.shift();
}
iterator.previousNode();
}
}
}

复制代码

这是控制台的显示效果:

2.TreeWalker,自由遍历：保证基本深度优先功能的基础上

添加了向任意方向跳转的额外方法

如何使用：和NodeIterator基本功能完全一样

额外方法：parentNode(), firstChild(), lastChild()

nextSibling(), previousSibling()

二. 查找,2大类：

1. getXXX: 4个：

按id查找1个元素对象：

var elem=document.getElementById("id值");

按标签名查找多个子元素对象：

var nodeList=parent.getElementsByTagName("标签名");

何时使用：获取某个父对象下指定子元素时使用

优点:可以屏蔽空文本的干扰

按name属性查找多个子元素对象：

var nodeList=parent.getElementsByName("name属性名");

按类名查找多个子元素对象：HTML5新增，IE9及以上支持

var nodeList=parent.getElementsByClassName("样式类名");

何时使用：只查找一次时

2. Selector API：用CSS选择器选择元素——》JQuery的核心

2个：

1. 仅选择第一个符合条件的元素：

var elem=parent.querySelector("选择器");

2. 选择所有符合条件的元素：

var elems=parent.querySelectorAll("选择器");

强调：elems是非动态集合：包含了完整DOM对象和属性

比较：

getXXX vs Selector API

返回值：getXXX 返回动态集合

Selector API 返回非动态集合

效率：getXXX 效率高

Selector API 效率低

何时使用：通过多级查找才能获得想要的元素时

例如：

<!DOCTYPE HTML>
<html>
<head>
<title>实现购物车客户端计算</title>
<meta charset="utf-8" />
<style>
table{width:600px; text-align:center;
border-collapse:collapse;
}
td,th{border:1px solid black}
td[colspan="3"]{text-align:right;}
</style>
<script src="js/6_2.js"></script>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone6</td>
<td>?4488</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>?4488</td>
</tr>
<tr>
<td>iPhone6 plus</td>
<td>?5288</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>?5288</td>
</tr>
<tr>
<td>iPad Air 2</td>
<td>?4288</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>?4288</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: </td>
<td>?14064</td>
</tr>
</tfoot>
</table>
</body>
</html>

复制代码

下面是js文件:

复制代码

[代码片段] js 遍历节点树API

[代码片段] js 遍历节点树API

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

用微信扫一扫