一、遍历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. [Jmeter]jmeter数据库性能测试配置

    学习jmeter过程中,记录一些学习过程中的点点滴滴,用于备忘.本文主要介绍的是如何创建一个简单的测试计划用户测试数据库服务器. 一.添加线程组 二.添加JDBC请求 1.在第一步里面定义并发用户以及 ...

  2. Microsoft Security Essentials 和 Windows Defender 离线升级包下载地址

    自从微软提供了免费的杀毒软件之后我就卸载掉了其他的杀毒软件.但是最近遇到了个小问题,我这里有一批电脑不能联网,杀毒软件的升级成了问题.在网上搜索了一番,终于找到了官方的离线升级包下载地址.放在这里备用 ...

  3. DO NOT BELIEVE HIS LIES 游戏随笔

    这游戏是我大学的一个基友推荐的,好吧,感觉被他坑了··· 解谜游戏~慢慢来玩玩··· 恩,就是下面红色圈圈画起来的这个家伙. #1 第一关 好吧,界面上也没啥可聊的,上面写了一行字,THE FIRST ...

  4. 『Python Kivy』官方乒乓球游戏示例解析

    本篇文章用于对Kivy框架官方所给出的一个「乒乓球」小游戏的源码进行简单地解析.我会尽可能的将方方面面的内容都说清楚.在文章的最下方为官方所给出的这个小游戏的教程以及游戏源码. 由于篇幅所限,本文只简 ...

  5. spring location设置本地路径

    <context:property-placeholder location="file:D:/jdbc.properties"/> 直接在路径前加上 file:

  6. 「日常训练」Greedy Arkady (CFR476D2C)

    不用问为啥完全一致,那个CSDN的也是我的,我搬过来了而已. 题意(Codeforces 965C) $k$人分$n$个糖果,每个糖果至多属于1个人.A某人是第一个拿糖果的.(这点很重要!!) 他$x ...

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

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

  8. 机器学习性能指标精确率、召回率、F1值、ROC、PRC与AUC--周振洋

    机器学习性能指标精确率.召回率.F1值.ROC.PRC与AUC 精确率.召回率.F1.AUC和ROC曲线都是评价模型好坏的指标,那么它们之间有什么不同,又有什么联系呢.下面让我们分别来看一下这几个指标 ...

  9. java编程思想 内容总结

    Java编程思想重点笔记(Java开发必看) Java编程思想,Java学习必读经典,不管是初学者还是大牛都值得一读,这里总结书中的重点知识,这些知识不仅经常出现在各大知名公司的笔试面 试过程中,而且 ...

  10. truffle开发一个简单的Dapp

    1.安装Truffle:npm install -g truffle 2.建立项目目录并进入:mkdir pet-shop-tutorial cd pet-shop-tutorial 3.使用truf ...