Skip to content

Commit ff6e7f7

Browse files
anbanganbang
committed
DOM2的遍历和范围
1 parent 1535fb6 commit ff6e7f7

22 files changed

Lines changed: 44 additions & 79 deletions

File tree

‎DOM2/DOM2范围/readme.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
**DOM2 级范围**
2+
和DOM遍历一样，感觉很少会用到，暂时不总结了

‎DOM2/DOM2遍历/readme.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
**DOM2 遍历**
2+
DDOM2 级遍历和范围定义了2个辅助完成顺序便利DOM结构的类型；
3+
4+
- NodeIterator
5+
- TreeWalker
6+
7+
这两个类型的作用是，基于给定的起点对DOM结构执行深度有限的遍历操作；
8+
9+
低版本IE不支持；
10+
11+
var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
12+
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
13+
var supportsTreeWalker = (typeof document.createTreeWalker == "function");
14+
15+
console.log(supportsTraversals);
16+
console.log(supportsNodeIterator);
17+
console.log(supportsTreeWalker);
18+
19+
可以检测 creatNodeItartor 和 creatTreeWalker 两个方法；
20+
21+
一个HTML文件的基本的DOM结构如下；
22+
23+
<!doctype html>
24+
<html>
25+
<head>
26+
<title>Example</title>
27+
</head>
28+
<body>
29+
<p><b>hello </b>word!</p>
30+
</body>
31+
</html>
32+
33+
![](http://i.imgur.com/ad9Z3gH.png)
34+
图片引自高程三；
35+
36+
从 document 开始依序向前，访问的第一个节点是 document ，访问的最后一个节点是包含"world!" 的文本节点。从文档最后的文本节点开始，遍历可以反向移动到 DOM 树的顶端。此时，访问的第一个节点是包含 "Hello" 的文本节点，访问的最后一个节点是 document 节点,** NodeIterator 和 TreeWalker 都以这种方式执行遍历**。
37+
38+
# NodeIterator
39+
40+
# TreeWalker
41+

DOM2/DOM2操作CSS/1、返回顶部的案例/README.md renamed to DOM2/JS操作CSS/1、返回顶部的案例/README.md

File renamed without changes.

DOM2/DOM2操作CSS/1、返回顶部的案例/toTop.html renamed to DOM2/JS操作CSS/1、返回顶部的案例/toTop.html

File renamed without changes.

DOM2/DOM2操作CSS/2、单张静态图片延迟加载/README.md renamed to DOM2/JS操作CSS/2、单张静态图片延迟加载/README.md

File renamed without changes.

DOM2/DOM2操作CSS/2、单张静态图片延迟加载/静态图片延迟加载.html renamed to DOM2/JS操作CSS/2、单张静态图片延迟加载/静态图片延迟加载.html

File renamed without changes.

DOM2/DOM2操作CSS/3、多张图片延迟加载/README.md renamed to DOM2/JS操作CSS/3、多张图片延迟加载/README.md

File renamed without changes.

DOM2/DOM2操作CSS/3、多张图片延迟加载/img/1.jpg renamed to DOM2/JS操作CSS/3、多张图片延迟加载/img/1.jpg

File renamed without changes.

DOM2/DOM2操作CSS/3、多张图片延迟加载/img/10.jpg renamed to DOM2/JS操作CSS/3、多张图片延迟加载/img/10.jpg

File renamed without changes.

DOM2/DOM2操作CSS/3、多张图片延迟加载/img/2.jpg renamed to DOM2/JS操作CSS/3、多张图片延迟加载/img/2.jpg

File renamed without changes.

0 commit comments

Comments
 (0)