DOM操作（一）

Apr 1, 2017

事件

事件概述

JS是以事件驱动为核心的一门语言。 ####事件三要素 事件源、事件、事件驱动程序。 三句话：获取事件源、绑定事件、书写事件驱动程序。 获取事件源：五种 绑定事件： box.onclick = function(){ 程序 }; 书写事件驱动程序：以后要学习的关于DOM的操作。

DOM（文档对象模型）

Document Object Model 文档：html页面 文档对象：页面中的元素 文档对象模型：让js操作页面元素的定义

DOM元素

DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）DOM节点,HTML的组成部分为节点。

DOM节点的类型有很多种 12种 元素.nodeType : 只读 属性 当前元素的节点类型
元素节点 : 1(每一个HMTL标签都是一个元素节点) 属性节点 : 2(标签的属性是属性节点) 文本节点 : 3(标签中的文字是文字节点)

  • nodeType/nodeName/nodeValue

解析过程

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树。

DOM节点的获取

操作节点，必须首先找到该元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素 document.getElementById(“demo”);
  • 通过标签名找到 HTML 元素 document.getElementsByTagName(“div”);
  • 通过类名找到 HTML 元素（ 实现方法如页面底部） document.getElementsByClassName(“a”);//在 IE 5,6,7,8 中无效
    • 对比 第二、三个是类数组，具有数组的方法，使用时必须加下标[]。 第一个只可以通过 document访问，第二个可以是他的父级元素。 第一个为静态方法；第二、三个为动态方法。（第一个不可以查看通过js动态添加的元素） 
        window.onload = function () {
  var aBtn = document.getElementById("test");
  var aBtn1 = document.getElementsByTagName("input");
  var aBtn2 = document.getElementsByClassName("btn3");

  document.body.innerHTML = '<input id="test" type="button"  value="按钮1"/><input type="button"  value="按钮2"/><input type="button" class="btn3"  value="按钮3"/> '
        
  alert(aBtn);//null
  alert(aBtn1[0]);//object HTMLInputElement
  alert(aBtn2[0])//object HTMLInputElement
  }

DOM 访问关系（节点的获得）

节点的访问关系，是以属性的方式存在的。 DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

元素.childNodes

只读 属性 子节点列表集合。子节点数组 = 父节点.childNodes; 获取所有节点。

标准下：包含了 文本和元素类型 的节点，也会包含非法嵌套的子节点 非标准下：只包含 元素类型 的节点，ie7以下不会包含非法嵌套子节点 Firefox、Chrome等高版本浏览器会把换行也看做是子节点

childNodes只包含一级子节点，不包含后辈孙级以下的节点

nodeType==1时才是元素节点(标签)

元素.children

只读 属性 子节点列表集合。子节点数组 = 父节点.children; 用的最多。

标准下：只包含 元素类型 的节点 非标准下：只包含 元素类型 的节点

children在IE6/7/8中包含注释节点 在IE678中，注释节点不要写在里面。

元素.attributes

只读 属性 返回属性列表集合

元素.firstChild

只读 属性 第一个子节点。第一个子节点=父节点.firstElementChild || 父节点.firstChild

标准下，firstChild会包含文本节点和换行节点 非标准下，firstChild只包含元素节点 元素.firstElementChild : 只读 属性 标准下(火狐谷歌IE9)，获取第一个元素类型的子节点

获取元素第一个元素节点的方法如下：

/*if ( oUl.firstElementChild ) {
    oUl.firstElementChild.style.background = 'red';
} else {
    oUl.firstChild.style.background = 'red';
}*/
/*或者*/
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red';

但是上述方法，有时会出现问题，比如，父节点的子节点为空时：oFirst找到的是文本节点，设置style属性会报错。

var oUl = document.getElementById('ul1');
//alert(oUl.firstElementChild)//null
var oFirst = oUl.firstElementChild || oUl.firstChild;
//alert(oFirst)//文本节点
//解决办法如下：
if ( oUl.children[0] ) {
    oUl.children[0].style.background = 'red';
} else {
    alert( '没有子节点可以设置' );
}

类似用法的DOM属性： 元素.lastElementChild || 元素.lastChild 最后一个子节点

兄弟节点

下一个兄弟节点=元素.nextElementSibling || 元素.nextSibling

nextSibling：调用者是节点。IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。 nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。 总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling

下一个兄弟节点=元素.previousElementSibling   元素.previousSibling

节点自己.parentNode.children[index];随意得到兄弟节点。

了解：定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有儿子（包括自己）。遍历所有的儿子，只要不是自己就放进数组中。

function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for(var i =0,pl= p.length;i<pl;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
}
元素.parentNode 只读 属性 当前节点的父级节点

调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

元素.offsetParent 只读 属性 离当前元素最近的一个有定位属性的父节点

如果没有定位父级，默认是body ie7以下，如果当前元素没有定位默认是body，如果当前元素有定位则是html 如果父级有定位： 当前元素有定位，则是定位的父级元素；当前元素没有定位是body ？ ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上

offsetLeft/offsetTop

元素.offsetLeft[Top] : 只读 属性 当前元素到定位父级的距离（偏移值）,到当前元素的offsetParent的距离。

如果没有定位父级

  • offsetParent -> body
  • offsetLeft -> html

如果有定位父级

  • ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离 如果自己有定位，那么就是到定位父级的距离
  • 其他：到定位父级的距离

封装获取当前元素到页面的left、top值

function getPos(obj) {
    var pos = {left:0, top:0};
    while (obj) {
        pos.left += obj.offsetLeft;
        pos.top += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return pos;
}

DOM节点操作

节点的访问关系都是属性。节点的操作都是函数或者方法。

创建节点

使用方法是这样的document.createElement(); 新的标签（节点） = document.createElement(“标签名”); #####插入节点（使用节点）

  • 父级.appendChild(要添加的元素) 方法 追加子元素

  • 父节点.insertBefore(要插入的节点，参考节点)； 父节点.insertBefore(新节点,参考节点)在参考节点前插入; 如果参考节点为null，那么他将在节点最后插入一个节点。
  • 在ie下如果第二个参数的节点不存在，会报错; 在其他标准浏览器下如果第二个参数的节点不存在，则以如下方法实现以appendChild的形式进行添加： 
    if(oUl.childNodes[0]){
  oUl.insertBefore(oLi,oUl.childNodes[0]);
}else{
  oUl.appendChild(oLi);
}
删除节点
  • 用父节点删除子节点。 父节点.removeChild（子节点）；必须指定要删除的子节点
  • 节点自己删除自己： 不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)
父级.replaceChild(新节点，被替换节点) 替换子节点

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点,且都会剪切被操作元素

appendChild()和innerHTML比较：

  1. 在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，因为innerHTML在铺到页面之前还要对父元素的全部内容进行解析，当包含html标记过多时，innerHTML速度会明显变慢。
  2. 如果appendChild的参数是页面存在的一个元素，则执行后原来的元素会被移除，如document.getElement(“a”).appendChild(document.getElementByIdx(“b”))，执行后，b元素会先被移除，然后再添加到a中。
  3. 通过appendChild添加到页面的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。
  4. 在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。 但是如果数据量较大且对性能有所要求时，还是应该使用appendChild。
复制节点 （oldNode.cloneNode（true））

想要复制的节点调用这个函数cloneNode()，得到一个新节点。

方法内部可以接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点） 。默认值：false.

节点属性（节点.属性）

获取：getAttribute(名称) 设置：setAttribute(名称, 值) 删除：removeAttribute(名称) 注意：IE6、7不支持。 调用者：节点。 有参数。 没有返回值。 每一个方法意义不同。

getElementsByClassName()

window.onload = function(){
    // var oUl = document.getElementsByTagName("ul");//error
    /*var oBox = document.getElementsByClassName("box");
    oBox[0].style.backgroundColor = "pink"*/


    /***************************getElementsByClassName()实现*************/
    var oUl = document.getElementsByTagName("ul")[0];
    var oBox = getElementsByClassName(oUl,"box");

    console.log(oBox);

    for (var i = oBox.length - 1; i >= 0; i--) {
        oBox[i].style.background = "pink";
    }

    function getElementsByClassName(parent,claName){
        var aEles = parent.getElementsByTagName("*");
        var arr = [];
        for (var i = aEles.length - 1; i >= 0; i--) {
            var aClassName = aEles[i].className.split(' ');
            for (var j = aClassName.length - 1; j >= 0; j--) {
                if(aClassName[j] == claName){
                    arr.push(aEles[i]);
                    break;
                }
            }
        }
        return arr;
    }
}

给元素添加或删除class

window.onload = function(){
    /*存在的问题：当原有class和新加的相同时，有两个相等的class*/
    /*var oDiv = document.getElementById("div1");
    oDiv.className +=' '+ "box2";*/


    //问题解决，判断是否存在，存在，返回-1
    var oDiv = document.getElementById("div1");
    addClass(oDiv,"box2")
    function addClass(obj,className){
        if(obj.className == ' '){//为空
            obj.className = className;
        }else{
            var arrClassName =  obj.className.split(' ');
            var aIndex = classIndexOf(arrClassName,className);
            if(aIndex == -1){
                oDiv.className +=' '+ className;
            }
        }
    }
    function classIndexOf(arr,v){
        for (var i = arr.length - 1; i >= 0; i--) {
            if(arr[i] == v){
                return i;
            }
        }
        return -1;
    }
}

window.onload = function(){
    var oDiv = document.getElementById("div1");
    removeClass(oDiv,"box2")
    function removeClass(obj,className){
        if(obj.className == ' '){//为空
            return;
        }else{
            var arrClassName =  obj.className.split(' ');
            var aIndex = classIndexOf(arrClassName,className);
            if(aIndex != -1){
                arrClassName.splice(aIndex ,1);
                obj.className = arrClassName.join(' ');
            }
        } 
    }
    function classIndexOf(arr,v){
        for (var i = arr.length - 1; i >= 0; i--) {
            if(arr[i] == v){
                return i;
            }
        }
        return -1;
    }
}

value和innerHTML和innerText和textContent 1.老版本的火狐不支持innerText，支持textContent 2.p不能嵌套p。h1不能嵌套h1。a连接内部不能嵌套a连接

<input id="inp1" type="text" value="我是inpput的value属性值"/>
<div id="box1">
    我是box1的内容
    <div id="box2">我是box2的内容</div>
</div>
<div id="box3">
    我是box1的内容
    <div id="box4">我是box2的内容</div>
</div>
<script>
    //value：标签的value属性。
    console.log(document.getElementById("inp1").value);

    //innerHTML：获取双闭合标签里面的内容。（识别标签）
    console.log(document.getElementById("box1").innerHTML);
    document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";

    //innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）
    console.log(document.getElementById("box3").innerText);
    document.getElementById("box3").innerText = "<h1>我是innerText</h1>";
</script>