在博客园看到了苏夏写的常用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. Reverse Words in a String (JAVA)

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  2. Android布局控件

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  3. 浅谈设计模式在GIS中的应用

    设计模式在GIS中的应用 一.设计模式概述 随着面向对象技术的广泛应用,软件复用在越来越多的开发工程中被采用.在研究软件复用的过程中,设计模式的概念被提了出来.所谓设计模式就是一些设计面向对象的软件的 ...

  4. jquery操作session的方法

    jquery.session.js使用  //此方法在java中不能使用 // jquery.session.js 简单使用方法 添加数据    $.session.set('key', 'value ...

  5. ComboGrid 行内点击编辑内容

    最近easyui需要在行内编辑选中项,但是编辑的内容出了当前选中列值,还有其他的,比较麻烦, 先看下这段代码 columns: [[ { field: 'GuestID', title: '编号', ...

  6. 区段extent及数据块

    一.区段是表空间中由某个段所使用的一块磁盘空间.他是一组连续的oracle数据块.引入extent的目的是为了减少磁盘空间分配的次数,如果是采用oracle数据块直接分配的话就增加了oracle磁盘空 ...

  7. 网络受限下，使用Nexus要解决的两个问题

    在网络受限的情况下,使用nexus总会遇到这么两个问题,让你头疼. 我头疼过了,为了不让大家头疼,把解决方案放在这里,供大家参考.   问题一.背景: 由于网络原因,Nexus无法更新远程仓库的索引. ...

  8. python时间函数

    import time print time.time() print time.localtime() fm = '%Y-%m-%d %H:%M:%S' YMD = time.strftime(fm ...

  9. JAVA编程思想——类型信息(反射)

    一.反射与RTTI RTTI:这个类型必须在编译的时候已知或者存在,如果不知道对象的确切类型,RTTI可以告诉你. 反射(个人认为就是能够利用Class获取或者调用.class这个文件中的数据):当我 ...

  10. Centos6.5下安装php

    安装php: yum -y install php 重启httpd服务激活php: /etc/init.d/httpd restart 测试php是否安装完成 vim /var/www/html/in ...