在博客园看到了苏夏写的常用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. OC准备知识

    #import 与 #include区别 include完成头文件的导入,可能会导致头文件的相互引用和函数或变量的重复定义 为了解决这个问题 我们必须这样做 #ifndef Student_h #de ...

  2. C#生成缩略图的方法

    1.需要添加应用System.Drawing.dll 2.命名空间 using System.IO; using System.Drawing; using System.Drawing.Imagin ...

  3. golang Date format

    package main import ( "fmt" "time" ) // @link https://golang.org/pkg/time/ func ...

  4. jquery-练习-折叠效果

    <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  5. HTML5 canvas 在线画笔绘图工具（四）

    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成. TDrawHandler需要完成以下工作 1.聚集类用于管理绘图的命令 TCommand 2.管理鼠标事件 ...

  6. python运维开发(十二)----rabbitMQ、pymysql、SQLAlchemy

    内容目录: rabbitMQ python操作mysql,pymysql模块 Python ORM框架,SQLAchemy模块 Paramiko 其他with上下文切换 rabbitMQ Rabbit ...

  7. Nginx 变量漫谈（三）

    也有一些内建变量是支持改写的,其中一个例子是 $args. 这个变量在读取时返回当前请求的 URL 参数串(即请求 URL 中问号后面的部分,如果有的话 ),而在赋值时可以直接修改参数串.我们来看一个 ...

  8. YUI的模块化开发

    随着互联网应用越来越重,js代码越来越庞大,如何有效的去组织自己的代码,变得非常重要.我们应该学会去控制自己的代码,而不是到最后一堆bug完全不知道从哪冒出来.前端的模块化开发可以帮助我们有效的去管理 ...

  9. delphi 操作 TWebBrowser 实现自动填表(JQuery脚本与 OleVariant 方法)

    版本:DELPHI XE8 操作交通银行信用卡申请表单(2016-03-23),网址如下: https://creditcardapp.bankcomm.com/applynew/front/appl ...

  10. poj 1050 To the Max_dp求最大子矩阵和

    题意:求最大子矩阵和 利用dp[i]每次向下更新,构成竖起的单条矩阵,再按不小于零就加起来来更新,构成更大的矩阵 #include <iostream> #include<cstdi ...