DOM遍历查找结点

一、遍历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("	");
21         }
22         console.log((n++)+blanks.join("")+"|-"+(currNode.nodeType!=3?currNode.nodeName:currNode.nodeVale));
23 
24         blanks=[];
25     }
26 }

View Code

　　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>&yen;4488</td>
29 <td>
30     <button onclick="calc(this)">-</button>
31     <span>1</span>
32     <button onclick="calc(this)">+</button>
33 </td>
34                 <td>&yen;4488</td>
35             </tr>
36             <tr>
37                 <td>iPhone6 plus</td>
38                 <td>&yen;5288</td>
39                 <td>
40                 <button onclick="calc(this)">-</button>
41                 <span>1</span>
42                 <button onclick="calc(this)">+</button>
43                 </td>
44                 <td>&yen;5288</td>
45             </tr>
46             <tr>
47                 <td>iPad Air 2</td>
48                 <td>&yen;4288</td>
49 <td>
50     <button onclick="calc(this)">-</button>
51     <span>1</span>
52     <button onclick="calc(this)">+</button>
53 </td>
54                 <td>&yen;4288</td>
55             </tr>
56         </tbody>
57         <tfoot>
58             <tr>
59                 <td colspan="3">Total: </td>
60                 <td>&yen;14064</td>
61             </tr>
62         </tfoot>
63     </table>
64 </body>
65 </html>

View Code

 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="&yen;"+(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="&yen;"+total.toFixed(2);
36 
37 }

View Code

三、其他选择器

　　1.document.head HTML文档中<head>元素的引用

　　2.document.body HTML文档中<body>元素的引用

　　3.document.documentElement HTML文档中<html>元素的引用