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("\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>元素的引用
