一、遍历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()，后退一次

　　示例：　　

 function getChildren(parent){

     //1.创建NodeIterator对象

     var iterator=document.createNodeIterator(

         parent,

         NodeFilter.SHOW_ELEMENT,

         null,

         false

     );

     //2.使用while循环,调用iterator.nextNode()

     //    每次调用返回下一个节点

     //    直到返回null为止

     var currNode=null;

     var oldNode=null;

     var n=0;

     while ((currNode=iterator.nextNode())!=null)

     {

         oldNode=currNode;

         while(oldNode!=parent){

             oldNode=oldNode.parentNode;

             blanks.push("\t");

         }

         console.log((n++)+blanks.join("")+"|-"+(currNode.nodeType!=3?currNode.nodeName:currNode.nodeVale));

         blanks=[];

     }

 }

　　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:包含完整对象属性的集合,不会反复查找.

　　示例：购物车商品数量加减，小计和总价的计算　　

 <!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/7_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>&yen;4488</td>

 <td>

     <button onclick="calc(this)">-</button>

     <span>1</span>

     <button onclick="calc(this)">+</button>

 </td>

                 <td>&yen;4488</td>

             </tr>

             <tr>

                 <td>iPhone6 plus</td>

                 <td>&yen;5288</td>

                 <td>

                 <button onclick="calc(this)">-</button>

                 <span>1</span>

                 <button onclick="calc(this)">+</button>

                 </td>

                 <td>&yen;5288</td>

             </tr>

             <tr>

                 <td>iPad Air 2</td>

                 <td>&yen;4288</td>

 <td>

     <button onclick="calc(this)">-</button>

     <span>1</span>

     <button onclick="calc(this)">+</button>

 </td>

                 <td>&yen;4288</td>

             </tr>

         </tbody>

         <tfoot>

             <tr>

                 <td colspan="3">Total: </td>

                 <td>&yen;14064</td>

             </tr>

         </tfoot>

     </table>

 </body>

 </html>
 function calc(btn){

     /*修改数量*/

     //向上查找

     var td=btn.parentNode;

     //找当前td下的span元素

     var span=td.querySelector("span");

     //取出span中的数量n

     var n=parseInt(span.innerHTML);

     //如果btn是+

     btn.innerHTML=="+"?n++:n--;

     n==0&&(n=1);

     span.innerHTML=n;

     //计算小计

     //获得price 单价

     var tr=td.parentNode;

     var tdPrice=tr.querySelector("td:nth-child(2)");

     var price=parseFloat(tdPrice.innerHTML.slice(1));

     tr.querySelector("td:last-child").innerHTML="&yen;"+(price*n).toFixed(2);

     /*计算总计*/

     //获得table中tbody下，作为tr下最后一个子元素的td

     //保存在subs中

     //遍历subs中的每个td，total变量用于保存累加值

     //

     var table=document.querySelector("#data");

     var subs=table.tBodies[0].querySelectorAll("tr td:last-child");

     var total=0;

     for (var i=0;i<subs.length;i++)

     {

         console.log(subs[i].innerHTML);

         total=total+(parseFloat(subs[i].innerHTML.slice(1)));

     }

     table.tFoot.querySelector("td:last-child").innerHTML="&yen;"+total.toFixed(2);

 }

三、其他选择器

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

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

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

DOM遍历查找结点的更多相关文章

  1. 后序线索二叉树中查找结点*p的后继

    在后序线索二叉树中查找结点*p的后继: 1.若结点*p为根,则无后继:2.若结点*p为其双亲的右孩子,则其后继为其双亲:3.若结点*p为其双亲的左孩子,且双亲无右子女,则其后继为其双亲:4.若结点*p ...

  2. jQuery 源码分析(十九) DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...

  3. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  4. jQuery DOM操作之结点转移复制

    jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...

  5. DOM遍历

    前面的话 DOM遍历模块定义了用于辅助完成顺序遍历DOM结构的类型:Nodeiterator和TreeWalker,它们能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作. ...

  6. NSLayoutConstraint 遍历查找对应的约束

      当我们使用纯代码方式Autolayout进行布局约束时,一个view上可能添加了很多的约束.而这些约束又不像view一样有一个可以区分的tag值,茫茫约束中想查到想要的约束然后进行更改,好像很难. ...

  7. 玩转DOM遍历——用NodeIterator实现getElementById，getElementsByTagName方法

    先声明一下DOM2中NodeIterator和TreeWalker这两类型真的只是用来玩玩的,因为性能不行遍历起来超级慢,在JS中基本用不到它们,除了<高程>上有两三页对它的讲解外,谷歌的 ...

  8. 不要在遍历子结点时修改parent

    [不要在遍历子结点时修改parent] 在用for/foreach遍历子结点时,如果在这过程中有改变子结点的parent,会导致不可预料的结果.我所遇到的问题是,在此种情况下,并非所有的子结点都能遍历 ...

  9. Perl遍历查找文件

    Perl遍历查找文件 使用Perl查找当前目录下的所有PDF文件 ******************************************************************* ...

随机推荐

  1. redis学习资料汇总

    redis学习资料汇总 2017年01月07日 22:10:37 阅读数:281 转载:http://blog.csdn.net/wtyvhreal/article/details/50427627 ...

  2. 『JavaScript』核心

    弱类型语言 JavaScript是一种弱类型的语言.变量可以根据所赋的值改变类型.原始类型之间也可以进行类型转换.其弱类型的物质为其带来了极大的灵活性. 注意:原始类型使用值传递,复合类型使用引用传递 ...

  3. TestNG执行测试用例的顺序

    import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebEle ...

  4. 在Android上，怎样与Kotlin一起使用Retrofit（KAD21）

    作者:Antonio Leiva 时间:Apr 18, 2017 原文链接:https://antonioleiva.com/retrofit-android-kotlin/ 这是又一个例子,关于怎样 ...

  5. [spring+tomcat]启动时报错：NoSuchMethodError: javax.servlet.http.HttpServletResponse.getStatus()I

    一般来讲问题的原因为tomcat版本较低, 建议升级到tomcat7x 以上版本

  6. DFS（2）——hdu1241Oil Deposits

    一.题目回顾 题目链接:Oil Deposits 题意:给你一块网格,网格被分为面积相等的地块,这些地块中标记'@'的是油田,标记'*'的不是油田.已知一块油田与它上下左右以及对角线的油田同属一片油区 ...

  7. JavaWeb笔记（十二）日志

    日志 日志信息根据用途与记录内容的不同,分为调试日志.运行日志.异常日志等. Java常用记录日志 logger log4j log4j2 logback 其中除了logger使用的概率较小,因此主要 ...

  8. 学习MVC中出现的一个BUG

    BUG描述:No Entity Framework provider found for the ADO.NET provider with invariant name 'System.Data.S ...

  9. 基于Thinkphp5+phpQuery 网络爬虫抓取数据接口,统一输出接口数据api

    TP5_Splider 一个基于Thinkphp5+phpQuery 网络爬虫抓取数据接口 统一输出接口数据api.适合正在学习Vue,AngularJs框架学习 开发demo,需要接口并保证接口不跨 ...

  10. P3375【模板】KMP字符串匹配

    前言: 额……很久以前就写了KMP模板(只是半知不解),话说看完了manacher,再回过头看KMP,是真TM简单啊!字符串专题整体较抽象,所以必须牢记思路并时常复习 题目描述 如题,给出两个字符串s ...