在博客园看到了苏夏写的常用DOM整理文章，地址：http://www.cnblogs.com/cabbagen/p/4579412.html，然后抽时间都试了一下这些常用的DOM操作。在这里记录一下。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>常用dom</title>

     <script>

         window.onload = function(){

             function $(id){ //获取id元素

                 return typeof id === 'string' ? document.getElementById(id) : id;

             }

             //取得节点

             var box = $('box'); //得到id名为box的元素节点

             var div = document.getElementsByTagName('div'); //得到所有标签为div的元素节点集合

             var name = document.getElementsByName('our'); //得到name为our的元素

             //var cls = document.getElementsByClassName('box'); //ie8及以下不支持

             //var clsdiv = document.querySelectorAll('#box,#boxs'); //找到所有id为box和boxs的元素数组集合querySelector只能找到第一个，ie8以上才支持

             //遍历节点

             var ul = $('ul');

             var lis = ul.children; //取得ul下的直系子元素li

             var lis1 = getFirst(ul); //在火狐下它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

             function getFirst(ele){ //通过childNodes封装得到第一个子元素

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

                     if(ele.childNodes[i].nodeType == 1){

                         return ele.childNodes[i];

                     }

                 }

             };

             var lisFirst = firstChild(ul);  //也可以这样获取到第一个子元素，比较方便

             var lisLast = lastChild(ul); //也可以这样获取到最后一个子元素，比较方便

             function firstChild(node){ //封装得到第一个子元素

                 return node.firstElementChild || node.firstChild;

             };

             function lastChild(node){ //封装得到最后一个子元素

                 return node.lastElementChild || node.lastChild;

             };

             function prev(node){ //得到上一个元素

                 return node.previousElementSibling || node.previousSibling;

             };

             function next(node){ //得到下一个元素

                 return node.nextElementSibling || node.nextSibling;

             };

             var parent = $('con').parentNode; //得到id为con的元素的父节点也就是得到了id为box的元素节点

             //获取节点信息

             var nodeName = $('box').nodeName; //获取元素或者属性节点的标签名称 结果是：DIV

             var nodeValue = $('con').childNodes[0].nodeValue; //获取文本节点的内容 结果是：文本节点内容

             var innerHTML = $('inner').innerHTML; //获取并设置元素节点的内容 结果是：文本节点内容<span>123</span> 可能会包含HTML标签

             var innerText = innerText($('inner')); //获取并设置元素节点的纯文本内容不包含标签结果是：文本节点内容123 (ie用innerText，ff用textContent)

             function innerText(node){

                 return node.textContent || node.innerText;

             };

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

                 var index = lis[i].getAttribute('index'); //获取属性节点的值

                 lis[i].setAttribute('index', i); //设置属性节点的值

             };

             var nodeType = $('ul').attributes[0].nodeType; //获取节点的类型 元素节点： 1；属性节点： 2；文本节点： 3；文档节点： 9；注释节点： 8；

             //操作节点

             var input = document.createElement('input'); //创建元素节点

             var textNode = document.createTextNode('你们好'); //创建文本节点

             var attrNode = document.createAttribute('index'); //创建属性节点

             attrNode.value = '123';

             $('box').setAttributeNode(attrNode);

             //$('box').remove(); //删除节点 在ie中 .removeNode(true)

             $('ul').removeChild($('ul').children[0]);

             document.body.appendChild(textNode); //插入节点

             var clone = $('con').cloneNode([true]); //克隆节点 传入true为深度复制，会把内容也复制过来

             document.body.appendChild(clone);

             $('box').replaceChild(input, $('con')); //替换节点

             function addClass(element,className) { //添加class

                  element.className += className;

             };

             function removeClass(element,removeClassName) { //移除class

                  var classStr = element.className;

                  element.className = classStr.replace(removeClassName,'').split(/\s+/).join(' ').replace(/^\s+/,'').replace(/\s+$/,'');

             }

             addClass($('box'), ' haha ei');

             removeClass($('box'), 'haha');

         }

     </script>

 </head>

 <body>

     <div id="box" class="box wo" name="our">

         <div id="con">文本节点内容</div>

     </div>

     <div id="boxs" class="box" name="our"></div>

     <div id="inner">文本节点内容<span>123</span></div>

     <ul id="ul">

         <li index="0"></li>

         <li index="1"></li>

         <li index="2"></li>

     </ul>

 </body>

 </html>

js常用DOM操作的更多相关文章

  1. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  2. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  3. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  4. JS的DOM操作语法

    整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  5. 总结js常用的dom操作（js的dom操作API）

    转载:https://www.haorooms.com/post/js_dom_api 前言 很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操 ...

  6. JS的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  7. 原生js封装dom操作库

    var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...

  8. javascript 常用DOM操作整理

    .选取了DOM操作中实用并常用的部分,省略了实用但有明显兼容性的部分2.DOM属性和方法的类型归属可能并不完全准确3.某些一般兼容性和特点做了标识(主要是ie8-9上下) 节点类型 节点类型 节点值 ...

  9. js的dom操作和函数

    dom是稳当对象模型,文档指标签文档,对象指文档中每个元素,模型指抽象画的东西. js常用函数 日期时间函数(需要用变量调用):var b = new Date(); //获取当前时间b.getTim ...

随机推荐

  1. SQL Server T-SQL基础

    --数据库:数据库软件:mssqlserver,oracle,db2, ACCESS,SQLITE --数据库文件:分数据文件(MDF)和日志文件(log) 班级名称:(四期班训练营)长度可变,有中文 ...

  2. 常用的SQL数据库语句总结

    1as 的用处 as可以对表和列取别名 在开发过程中经常遇到开始给某一个的字段去field1的名称,但后来有感觉field1字段指定不确切,于是又把此字段改成了field2,由于开始认 为field1 ...

  3. java服务器简单实现

    一 HTTP http请求 一般一个http请求包括以下三个部分: 1 请求方法,如get,post 2 请求头 3 实体 一个http请求的实例如下:GET /index.jsp HTTP/1.1H ...

  4. 沼跃鱼早已看穿了一切 C/C++

      沼跃鱼早已看穿了一切 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 593  Solved: 229[Submit][Status][Web Boa ...

  5. 元器件选型（一）ESD、TVS参考资料

    许多开发人员都遇到过这样的情况:在实验室开发好的产品,测试完全通过,但到了客户手里用了一段时间之后,出现异常现 象,甚至是产品失效需要返修,并且故障率往往也不高(1%以下).一般情况下,以上问题大都由 ...

  6. Apache+php+mysql win7 64位安装的几个注意事项

    网上一堆安装教程,所以不赘述具体安装过程,只说注意事项.新手推荐phpstudy 如果想单个安装,那么以下是我两三年内多次在win winserver环境下配置Apache环境的一点注意事项,下载连接 ...

  7. android widget->progressbar

    其中的indeterminteDrawable属性就是用来设置进度条颜色等属性的

  8. apache httpd, nginx, tomcat, jboss

    web上的server都叫web server,但是大家分工也有不同的. nginx常用做静态内容服务和代理服务器(不是你FQ那个代理),直面外来请求转发给后面的应用服务(tomcat,django什 ...

  9. wikioi1688 求逆序对

    题目描述 Description 给定一个序列a1,a2,…,an,如果存在i<j并且ai>aj,那么我们称之为逆序对,求逆序对的数目 数据范围:N<=105.Ai<=105. ...

  10. 【二叉树->链表】二叉树结构转双向线性链表结构(先序遍历)

    二叉树存储结构属于非线性链表结构,转化成线性链表结构,能简化操作和理解.然而由非线性转线性需要对整个树遍历一次,不同的遍历方式转化结果页不一样.下面以先序为例. 方法一: 递归法.递归遍历二叉树,因为 ...