在博客园看到了苏夏写的常用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. [转载]MATLAB中FFT的使用方法

    http://blog.163.com/fei_lai_feng/blog/static/9289962200971751114547/ 说明:以下资源来源于<数字信号处理的MATLAB实现&g ...

  2. ASP.NET MVC学习之路由篇

    约束路由 上面我们有一个{id}用来捕获参数的,但是你也发现了它可以捕捉任何字符串等等,但是我们有时需要限制它,比如让它只能输入数字,那么我们就可以使用正则表达式去约束它. 如下修改RouteConf ...

  3. js new Date()

    1.Date 对象用于处理日期和时间.创建 Date 对象的语法:var myDate=new Date()Date 对象会自动把当前日期和时间保存为其初始值.2.参数形式有以下5种: new Dat ...

  4. HDU 5805 - NanoApe Loves Sequence （BestCoder Round #86）

    先找相邻差值的最大,第二大,第三大 删去端点会减少一个值, 删去其余点会减少两个值,新增一个值,所以新增和现存的最大的值比较一下取最大即可 #include <iostream> #inc ...

  5. Uncaught TypeError: Object [object Object] has no method 'live'

    $( selector ).live( events, data, handler );                // jQuery 1.3+$( document ).delegate( se ...

  6. java中的xpath，读取xml文档。

    1,入门 XPath即为XML路径语言(XML Path Language),它是一种用来确定XML文档中某部分位置的语言. XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力.起初 X ...

  7. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  8. html5属性placeholder的js 向下兼容支持(jquery版)

    placeholder是html5表单特性中比较好用的一条,但是苦于其向下兼容性,所以一般要做向下兼容的站点都不敢用,如果有用到的地方,也是用js简单模拟而实现的,那么有没有一个一劳永逸的方法去解决这 ...

  9. Python第一天-----简单登录验证

    ----------------------------------------- 编写登录接口 要求:1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定 -------------- ...

  10. 1206: B.求和

    题目描述 点击这里 对于正整数n,k,我们定义这样一个函数f,它满足如下规律 现在给出n和k,你的任务就是要计算f(n,k)的值. 输入 首先是一个整数T,表示有T组数据 接下来每组数据是n和k(1& ...