笔记 js 基础笔记（Dom操作）

标签：

共同学习js，不对的地方欢迎大家指正。

js Dom 操作

一

　　document获取节点的基本方法
    1.document.getElementById(‘id‘);                                  //通过id来获取元素,返回指定的唯一元素。
    2.document.getElementsByName("name");                      //通过name来获取元素，返回name=‘name‘的集合。
    3.document.getElementsByClassName("classname")         //用classname来获取元素，返回的是一个class="classname"的集合(不兼容IE8及以下)。
    4.document.getElementsByTagName(‘div‘);                     //用元素的标签获取元素，返回所有标签=“div”的集合。

getElementsByClassName不兼容ie8及以下，所以需要做兼容，搜集到以下两种方式：

//兼容IE getElementsByClassName取标签 方法一
//写成一个函数，每次调用这个函数
function getElementsByClassName(className,root,tagName) {    //root：父节点，tagName：该节点的标签名。 这两个参数均可有可无
    if(root){
        root=typeof root=="string" ? document.getElementById(root) : root;   
    }else{
        root=document.body;
    }
    tagName=tagName||"*";                                    
    if (document.getElementsByClassName) {                    //如果浏览器支持getElementsByClassName，就直接的用
        return root.getElementsByClassName(className);
    }else { 
        var tag= root.getElementsByTagName(tagName);    //获取指定元素
        var tagAll = [];                                    //用于存储符合条件的元素
        for (var i = 0; i < tag.length; i++) {                //遍历获得的元素
            for(var j=0,n=tag[i].className.split(‘ ‘);j<n.length;j++){    //遍历此元素中所有class的值，如果包含指定的类名，就赋值给tagnameAll
                if(n[j]==className){
                    tagAll.push(tag[i]);
                    break;
                }
            }
        }
        return tagAll;
    }
}

//兼容IE getElementsByClassName 方法2
//重新定义getElementsByClassName方法
if(!document.getElementsByClassName){//判断是否是ie
  document.getElementsByClassName = function(className, element){
    var children = (element || document).getElementsByTagName(‘*‘);
    var elements = new Array();
    for (var i=0; i<children.length; i++){
      var child = children[i];
      var classNames = child.className.split(‘ ‘);
      for (var j=0,len=className.length; j<len; j++){
        if (classNames[j] == className){ 
          elements.push(child);
          break;
        }
      }
    } 
    return elements;
  };
}

　　js节点操作方法

　　1.获取节点
        document.documentElement        //获取整个Html Dom结构
        element.childNodes                     //得到element的全部子节点
        element.parentNode                    //得到element的父节点
        element.nextSibling                    //得到element的下一个兄弟节点
        element.previousSibling              //得到element的上一个兄弟节点
        element.firstChild                       //得到element的第一个节点
        element.lastChild                        //得到element的最后一个节点
        *        example : console.log(element.nextSibling.previousSibling);
       
        2.节点 获取/设置 属性
        *element.setAttribute("class","class1")         //设置元素属性
        *element.getAttribute("class")                    //获取元素属性
        *element.removeAttribute("class")              //删除元素属性
        *      example : element.parentNode.setAttribute("id","bannerUl");

        3.创建节点
        createElement()                                          //创建标签名为tagname的元素
        createTextNode()                                        //创建包含文本text的文本节点
        createDocumentFragment()                         //创建文档碎片节点               
        *         example: document.createElement("p");       
        *       example: document.createTextNode("Hellow world");
        *         document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会 改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次 性添加到document中。
       
        4.添加、移除、替换、复制节点。
        element.appendChild()                                           //向节点的子节点列表末尾增加一个新的节点
        element.insertBefore(newchild,refchild)                    //向某个子节点的前面插入一个节点    newchild新的节点  refchild指定的节点
        element.removeChild()                                           //删除某个节点 只能删除下一级的节点
        element.replaceChild(newnode,oldnode)                   //替换DOM节点的方法     newnode新的节点      oldnode需要替换的节点
        element.cloneNode(Boolean)                                   //设置为 true，克隆节点及其属性，以及后代, 设置为 false，则只克隆节点及其属性,不克隆后代节点
        element.cloneNode                                                   //不同于一般的赋值 var li  = childodeClear(ul2).childNodes[0].cloneNode(true) != var li  = childodeClear(ul2).childNodes[0]; 后者是赋值一个内存地址，所以操作会改变原来的节点

常见问题：
        用element.childNodes获取一个节点的子元素集合的时候（ul获取li集合），如果里面有很多空格/回车,子集的长度会不符合子集个数。需要手动清除回车、空格

<div id="banner">
        <ul class="ul">
            <li><a>1</a></li>
            
            <li><a>2</a></li>
            
            <li class="li3"><a>3</a></li>
            
            <li><a><i>4sdfsfsdfsfsdfsfsfsdf</i></a></li>
        </ul>
</div>
<script type="tex

笔记 js 基础笔记（Dom操作）

标签：

原文地址：http://www.cnblogs.com/wjlfl/p/4675603.html