一、遍历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. java实现单个或多个文件的压缩、解压缩 支持zip、rar等格式

    代码如下: package com.cn.util; import java.io.BufferedInputStream; import java.io.File; import java.io.F ...

  2. 部署：阿里云ECS部署Docker CE

    1 部署阿里云ECS,选择CentOS操作系统,并启动实例: 2 部署Docker CE: a.检查centos版本: $ cat /etc/redhat-release CentOS Linux r ...

  3. 【APUE】Chapter16 Network IPC: Sockets & makefile写法学习

    16.1 Introduction Chapter15讲的是同一个machine之间不同进程的通信,这一章内容是不同machine之间通过network通信,切入点是socket. 16.2 Sock ...

  4. 【APUE】Chapter13 Daemon Processes

    这章节内容比较紧凑,主要有5部分: 1. 守护进程的特点 2. 守护进程的构造步骤及原理. 3. 守护进程示例:系统日志守护进程服务syslogd的相关函数. 4. Singe-Instance 守护 ...

  5. Android Google Maps 监听地图缩放

    接上篇.http://www.cnblogs.com/maomishen/p/3556297.html 由于公司项目要求,需要对google map监听地图的缩放(zoom)来进行一些操作. 但是在网 ...

  6. iOS-合成图片(长图)

    合成图片 直接合成图片还是比较简单的,现在的难点是要把,通过文本输入的一些基本数据也合成到一张图片中,如果有多长图片就合成长图. 现在的实现方法是,把所有的文本消息格式化,然后绘制到一个UILable ...

  7. OpenCV入门：（三：图片Mask operations）

    Mask operations 翻译为中文应该是掩模操作,具体操作步骤就是根据一个操作矩阵(又名kernel)处理图片中的每一个像素点,操作矩阵会根据当前像素点的周围像素来调整当前像素值. 1.示例 ...

  8. Qt 汽车仪表 QWidget

    今天是2016年的最后一个工作日,在这个最后工作日里面,和以为网友要了一点练手的素材文件,经过网友确认,不涉及商业机密,在这里分享一下,如侵权,请联系我删除. 先上程序运行图 这里显示数字,闪烁等都没 ...

  9. 深挖 NGUI 基础 之UIRoot (一)

    当你开始使用NGUI的时候,简单的从项目视图 中一个”Control”预设体 拖拽到场景视图中,你将会发现 Hierarchy层次面板中会出现以下层次结构: 其中 UI Root作为根节点,是每个NG ...

  10. 学习bash——管道命令

    摘要:管道命令概述.常见管道命令的使用(cut/grep.sort/wc/uniq.tee.tr/col/join/paste/expand.xargs.减号-) 一.概述 命令执行完会在屏幕上打印相 ...