一、遍历API(2个)
1.深度优先原则遍历NodeIterator 节点迭代器
创建遍历API对象：
var iterator=document.createNodeIterator(开始的父节点对象,whatToShow,null,false);
whatToShow: NodeFilter.SHOW_ELEMENT(遍历元素节点) NodeFilter.SHOW_ALL(遍历所有)
用while循环，反复调用iterator.nextNode()方法
只要nextNode()，就向下一个移动一次；iterator.previousNode()，后退一次
示例：
1 function getChildren(parent){
2 //1.创建NodeIterator对象
3 var iterator=document.createNodeIterator(
4 parent,
5 NodeFilter.SHOW_ELEMENT,
6 null,
7 false
8 );
9 //2.使用while循环,调用iterator.nextNode()
10 // 每次调用返回下一个节点
11 // 直到返回null为止
12 var currNode=null;
13 var oldNode=null;
14 var n=0;
15 while ((currNode=iterator.nextNode())!=null)
16 {
17 oldNode=currNode;
18 while(oldNode!=parent){
19 oldNode=oldNode.parentNode;
20 blanks.push("\t");
21 }
22 console.log((n++)+blanks.join("")+"|-"+(currNode.nodeType!=3?currNode.nodeName:currNode.nodeVale));
23
24 blanks=[];
25 }
26 }
2.自有遍历：TreeWalker
(然并卵)
二、DOM查找(5个API)
1.按id查找 var elem=document.getElementById("id值");//返回一个元素
2.按标签名查找 var elems=parent.getElementsByTagName("标签名");//返回元素数组的动态集合
3.按name属性查找(专门用于查找表单中的元素): var elems=parent.getElementsByName("name属性值");//返回元素数组的动态集合
4.按className属性查找 var elems=parent.getElementsByClassName("类名");////返回元素数组
5.通过CSS选择器选取元素 Selector API(jQuery的核心)(只能从父节点向下找)
var elem=parent.querySelector("选择器");
var elems=parent.querySelectorAll("选择器");
特点: 内置API,执行效率高; elems:包含完整对象属性的集合,不会反复查找.
示例：购物车商品数量加减，小计和总价的计算
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>实现购物车客户端计算</title>
5 <meta charset="utf-8" />
6 <style>
7 table{width:600px; text-align:center;
8 border-collapse:collapse;
9 }
10 td,th{border:1px solid black}
11 td[colspan="3"]{text-align:right;}
12 </style>
13 <script src="js/7_2.js"></script>
14 </head>
15 <body>
16 <table id="data">
17 <thead>
18 <tr>
19 <th>商品名称</th>
20 <th>单价</th>
21 <th>数量</th>
22 <th>小计</th>
23 </tr>
24 </thead>
25 <tbody>
26 <tr>
27 <td>iPhone6</td>
28 <td>¥4488</td>
29 <td>
30 <button onclick="calc(this)">-</button>
31 <span>1</span>
32 <button onclick="calc(this)">+</button>
33 </td>
34 <td>¥4488</td>
35 </tr>
36 <tr>
37 <td>iPhone6 plus</td>
38 <td>¥5288</td>
39 <td>
40 <button onclick="calc(this)">-</button>
41 <span>1</span>
42 <button onclick="calc(this)">+</button>
43 </td>
44 <td>¥5288</td>
45 </tr>
46 <tr>
47 <td>iPad Air 2</td>
48 <td>¥4288</td>
49 <td>
50 <button onclick="calc(this)">-</button>
51 <span>1</span>
52 <button onclick="calc(this)">+</button>
53 </td>
54 <td>¥4288</td>
55 </tr>
56 </tbody>
57 <tfoot>
58 <tr>
59 <td colspan="3">Total: </td>
60 <td>¥14064</td>
61 </tr>
62 </tfoot>
63 </table>
64 </body>
65 </html>
1 function calc(btn){
2 /*修改数量*/
3 //向上查找
4 var td=btn.parentNode;
5 //找当前td下的span元素
6 var span=td.querySelector("span");
7 //取出span中的数量n
8 var n=parseInt(span.innerHTML);
9 //如果btn是+
10 btn.innerHTML=="+"?n++:n--;
11 n==0&&(n=1);
12 span.innerHTML=n;
13
14 //计算小计
15 //获得price 单价
16 var tr=td.parentNode;
17 var tdPrice=tr.querySelector("td:nth-child(2)");
18 var price=parseFloat(tdPrice.innerHTML.slice(1));
19
20 tr.querySelector("td:last-child").innerHTML="¥"+(price*n).toFixed(2);
21
22 /*计算总计*/
23 //获得table中tbody下，作为tr下最后一个子元素的td
24 //保存在subs中
25 //遍历subs中的每个td，total变量用于保存累加值
26 //
27 var table=document.querySelector("#data");
28 var subs=table.tBodies[0].querySelectorAll("tr td:last-child");
29 var total=0;
30 for (var i=0;i<subs.length;i++)
31 {
32 console.log(subs[i].innerHTML);
33 total=total+(parseFloat(subs[i].innerHTML.slice(1)));
34 }
35 table.tFoot.querySelector("td:last-child").innerHTML="¥"+total.toFixed(2);
36
37 }
三、其他选择器
1.document.head HTML文档中<head>元素的引用
2.document.body HTML文档中<body>元素的引用
3.document.documentElement HTML文档中<html>元素的引用