在博客园看到了苏夏写的常用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. 介绍一款管理软件Redmine

    Redmine是用Ruby开发的基于web的项目管理软件,是用ROR框架开发的一套跨平台项目管理系统,据说是源于Basecamp的ror版而来,支持多种数据库,有不少自己独特的功能,例如提供wiki. ...

  2. 正确合理的建立MYSQL数据库索引

    写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库调优的起点.考虑如下情况,假设数据库中一个表有10^6条记录,DBMS的页面大小为4K,并存储100条记录.如果没有索引,查询将对整 ...

  3. 【典型错误】The type java.lang.Object cannot be resolved.

    参考:http://blog.csdn.net/wo519074786/article/details/7697967 The type java.lang.Object cannot be reso ...

  4. Loader之一：基本原理

    参考APIDEMO及http://developer.android.com/guide/components/loaders.html#app 1.Introduced in Android 3.0 ...

  5. setTimeout setInterval 带参数的问题

    转载http://www.jb51.net/article/36233.htm 在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要 ...

  6. Words-specialty

    1-100   101-200   community n.社区; 共同体; 社会团体; [生态] 群落 overview n.概观; 总的看法; 回顾,复习 transforming vi.改变,使 ...

  7. 关于Asp.net超时，延长读取sql server数据库的超时时间！（已解决）

    昨天,接到客户反映说应用报“超时时间已到.在操作完成之前超时时间已过或服务器未响应”问题.从网上了一些资料,发现这个问题还是很普遍的.主要有以下两种解决方法: 第一种方法:在web.config中加上 ...

  8. Chapter 1. Hello, Perl/Tk

    Chapter 1. Hello, Perl/Tk 内容: Perl/Tk Concepts Some Perl/Tk History Getting Started with Perl/Tk Hel ...

  9. Java实现二叉搜索树的添加，前序、后序、中序及层序遍历，求树的节点数，求树的最大值、最小值，查找等操作

    什么也不说了,直接上代码. 首先是节点类,大家都懂得 /** * 二叉树的节点类 * * @author HeYufan * * @param <T> */ class Node<T ...

  10. 【具体数学--读书笔记】1.1 The Power of Hanoi

    这一节借助汉诺塔问题引入了"Reccurent Problems". (Reccurence, 在这里解释为“the solution to each problem depend ...