一、遍历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. 一步一步学Linq to sql（六）：探究特性

    延迟执行 IQueryable query = from c in ctx.Customers select c; 这样的查询句法不会导致语句立即执行,它仅仅是一个描述,对应一个SQL.仅仅在需要使用 ...

  2. RabbitMQ ddemo 费元星

    http://blog.csdn.net/lmj623565791/article/details/37607165 转载请标明出处:http://blog.csdn.net/lmj623565791 ...

  3. 通过修改Host文件解决主机头访问网站的问题

             网站打包发布后,一般都是通过IP地址来进行访问,但是这样不方便记忆.如何设置一个简单的域名,然后通过域名来进行访问呢?一个可行的方法就是修改本机的host文件,添加一条映射关系,把这 ...

  4. 一步一步构建手机WebApp开发——页面布局篇

    继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...

  5. Scala function programming

    1. Arbitrary multi parameters funcs sum(1,2,3,4,5) = sum(1 to 5: _*)the equal '=' can be ignored if ...

  6. Sqlite Datetime类型详解

    日期和时间函数 date(timestring, modifier, modifier, ...) time(timestring, modifier, modifier, ...) datetime ...

  7. 7.0 启动app权限弹窗问题

    这里提供两种解决方案! 1.安卓6.0+是可以直接利用uiautomator定位元素点击!这个不细说,定位方式很多种...这个等待时间大家自己定大概两到三秒即可! #安卓6.0+点击方式driver. ...

  8. Java 集合学习--ArrayList

    一.ArrayList 定义 ArrayList 是一个用数组实现的集合,支持随机访问,元素有序且可以重复. ①.实现 List 接口 List接口继承Collection接口,是List类的顶层接口 ...

  9. Laxcus大数据管理系统2.0（3）- 第一章 基础概述 1.2 产品特点

    1.2 产品特点 Laxcus大数据管理系统运行在计算机集群上,特别强调软件对分布资源可随机增减的适应性.这种运行过程中数据动态波动和需要瞬时感知的特点,完全不同与传统的集中处理模式.这个特性衍生出一 ...

  10. kickstart技术安装操作系统

    kickstart是RedHat公司开源的软件,所以对CentOS兼容性最好. 原理:我们将手动安装的所有的详细步骤记录到一个文件中,然后kickstart通过读取这个文件就可以实现自动化安装系统. ...