一、遍历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. C++11中std::move的使用

    std::move is used to indicate that an object t may be "moved from", i.e. allowing the effi ...

  2. innodb_index_stats

    mysql> select * from mysql.innodb_index_stats WHERE database_name='test' and table_name='recordsI ...

  3. (原)Android到IOS开发的转换（一）

    序)闲扯几句 很早就想入手ios开发,但是一直没有机会,个人没有水果机器,上个公司上班的那台mac mini虽然就在我身边,灰都有一层了,但是一直没有机会开机学习下,因为事多,自上一篇文章后,离职后, ...

  4. join ,left join ,right join有什么区别

    join等价于inner join内连接,是返回两个表中都有的符合条件的行. left join左连接,是返回左表中所有的行及右表中符合条件的行.(左表为主表) right join右连接,是返回右表 ...

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

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

  6. popen和system问题

    popen和system问题 1. 问题描述 C的代码里面去调用命令启动一个shell脚本,分别使用了下面两个途径. 其中一个是: func1(cmd) { popen(cmd,type); pclo ...

  7. kaldi基于GMM的单音素模型 训练部分

    目录 1. gmm-init-mono 模型初始化 2. compile-train-graghs 训练图初始化 3. align-equal-compiled 特征文件均匀分割 4. gmm-acc ...

  8. MySQL 5.6查看数据库的大小

    1. use information_schema; 2. select concat(round(sum(data_length/1024/1024),2),'MB') as data from t ...

  9. IP数据报格式 及分组转发算法

    ip数据报分首部和数据两部分组成: 首部分为固定部分和可变部分 版本——占 4 位,指 IP 协议的版本 目前的 IP 协议版本号为 4 (即 IPv4) 首部长度——占 4 位,可表示的最大数值 是 ...

  10. D - 小木棒

    D - 小木棒 Time Limit: 1000/1000MS (C++/Others) Memory Limit: 65536/65536KB (C++/Others) Problem Descri ...