javaScript程序员避免不了要操作页面中的DOM，除了经常使用的：

appendChild()向childNodes列表的末尾添加一个节点。

insertBefore()，接受两个参数，要插入的节点和作为参照的节点。

replaceChild()，接受两个参数，要插入的节点和要替换的节点。

removeChild()，移除某个节点，接受一个参数，即为要删除的节点。

cloneNode()，克隆节点，接受一个布尔值，表示是否执行深复制。在参数为true情况下，执行深复制，复制其全部子节点。

我们还需要对网页中的节点进行遍历或颠倒，如下所示：

对页面节点遍历

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>遍历指定元素下所有类型节点</title>

<script type="text/javascript">

window.onload=function(){

  var wrapper=document.getElementById("wrapper");

  var content=document.getElementById("content");

  var root = document.documentElement;

  function findNodes(node){

    var arr=[];

    function done(node){

      if(node.childNodes.length!=0){

        var childrenNodes=node.childNodes;

        for(var index=0;index<childrenNodes.length;index++){

          arr.push(childrenNodes[index]);

          done(childrenNodes[index]);

        }

      }

    }

    done(node)

    return arr;

  }

    // 遍历根节点下所有节点

  console.log('根节点下所有节点');

  console.log(findNodes(root));

  // 遍历ID为content的所有节点

   console.log('ID为content的所有节点');

   console.log(findNodes(content));

}

</script>

</head>

<body>

<div id="wrapper"></div>

<div id="content">

  <div>

  <!-- 我是注释 -->

    <ul>

      <li>first li</li>

      <li>second li</li>

      <li>third li</li>

    </ul>

  </div>

</div>

</body>

</html>

如果只想遍历Element类型节点，可以使用node.children。另外还可以实现对Element节点计数

function traverseNodes(node){

    var countTeg = 0;

    function done(node){

        if(node.nodeType == 1)

            countTeg++;

        var childrens = node.childNodes;

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

           countTeg += done(childrens[i])

        }

        return countTeg;

     }

    return done(node);

}

颠倒页面节点

颠倒指定节点的直系子节点

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>遍历指定元素下所有节点</title>

<script type="text/javascript">

function reserve(node){

    var children = node.childNodes;

    var len = children.length;

    for(var i=len-1; i>=0; i--){

        var temp = node.removeChild(children[i]);  //从父节点node中从后向前一次删除子节点children[i]

        node.appendChild(temp);     //把删除了的节点放到父节点node的末尾

    }

}

</script>

</head>

<body>

  <!-- 我是注释 -->

   <div>

      <p>第一段</p>

      <p>第二段</p>

      <p>第三段</p>

   </div>

<button onclick="reserve(document.body)">点击我</button>

</body>

</html>

颠倒指定节点的所有子孙节点

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>颠倒所有子孙节点</title>

<script type="text/javascript">

function reserveNode(node){  //文本节点

  if(node.nodeType == 3){//颠倒文本节点

     var text = node.data;

     var retext = "";

     for(var i=text.length-1; i>=0; i-- ){

      retext += text.charAt(i);

     }

     node.data = retext;

  }else{  //非文本节点直接颠倒节点位置

     var children = node.childNodes;

     var len = children.length;

     for(var i = len-1; i>=0; i--){

        reserveNode(children[i]);

        node.appendChild(node.removeChild(children[i]));

     }

  }

}

</script>

</head>

<body>

  <!-- 我是注释 -->

   <div>

      <p>第一段</p>

      <p>第二段</p>

      <p>第三段</p>

   </div>

<button onclick="reserveNode(document.body)">点击我</button>

</body>

</html>

总之，灵活用于DOM的基本操作方法可以实现巨大的功能！！！

javaScript之节点操作的更多相关文章

  1. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  2. JavaScript 之 节点操作

    一.文档树结构 DOM 可以将任何 HTML 或 XML 描绘成一个由多层节点构成的结构. 节点分为不同的类型,每种类型分别表示文档中不同的信息.每个节点都拥有各自的特点.数据和方法,另外也与其他节点 ...

  3. 前端之javascript的节点操作和Event

    一 节点的增删改查 创建节点:createElement(标签名):创建一个指定名称的节点. 追加节点: 追加一个子节点:somenode.appendChild(标签名) 指定某个位置前面添加一个节 ...

  4. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  5. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  6. 第一百二十六节，JavaScript，XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  7. JavaScript -- 节点操作， 事件触发， 表单伸缩

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  9. JavaScript之DOM操作，事件操作，节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

随机推荐

  1. Spark- 共享变量

    Shared Variables Normally, when a function passed to a Spark operation (such as map or reduce) is ex ...

  2. c3p0 数据库连接池相关知识

    c3p0数据库连接池的配置文件放在eclipse的src目录下,代码就可以识别. c3p0的配置文件的内容如下: <!-- Uncomment and set any of the option ...

  3. U14739 X ask Y III 子区间异或和

    题意:就是求所有子区间的异或和的和 题解:就是算每一位对结果的贡献(最近好像遇到很多次这种题目),先前缀异或,从左向右扫记录二进制前缀的1,0个数,xor[i]==xor[j]^1的时候就加上这一位的 ...

  4. Linux脚本基础

    1.文本编辑 命令模式快捷键命令 命令 作用 dd 删除(剪切)光标所在整行. 5dd 删除(剪切)从光标处开始的5行. yy 复制光标所在整行. 5yy 复制从光标处开始的5行. n 显示搜索命令定 ...

  5. URL OpenDocument

    以前用在DASHBOARD 使用URL传参 到webi 报表.还是很多不理解,现在明白多了.于是做个较为详细的记录.尽管dashboard 很快就被淘汰了.也许没什么用.看看也好. 之前的报表,传参都 ...

  6. hive_学习_00_资源帖

    一.官方资料 二.参考资料

  7. explicit修饰构造函数

    问题描述:对于单参数的构造函数C++允许隐含的类型转换,容易破坏代码可读性,并导致难以发现的错误,通过关键字explicit修饰构造函数可以禁止单参数构造函数创建隐式临时变量.

  8. CATransform3D 矩阵变换之立方体旋转实现细节 (转)

    原文地址 http://blog.csdn.net/ch_soft/article/details/7351896 第一部分.前几天做动画,使用到了CATransform3D ,由于没有学过计算机图形 ...

  9. Arc066_F Contest with Drinks Hard

    传送门 题目大意 有一个长为$N$的序列$A$,你要构造一个长为$N$的$01$序列使得$01$序列全部由$1$组成的子串个数$-$两个序列的对应位置两两乘积之和最大,每次独立的询问给定$pos,x$ ...

  10. [独孤九剑]Oracle知识点梳理（零）目录

    本系列只涉及到Oracle的具体用法,没有上升到理论层面,都是日常工作中总结积累出的零碎知识点,基本上都是一些使用例子,哪天用到了,可以直接复制出来改改. [独孤九剑]Oracle知识点梳理(一)表空 ...