JS DOM(2017.12.28)

Posted 2020-10-19 君临天下丶

 

　　一.获得元素节点的方法

document.getElementById()    根据Id获取元素节点

document.getElementsByName()    根据name获取元素节点   遍历出来的是一个数字

document.getElementsByTagName()    根据html标签名获取元素节点，注意选择器返回的是一个NodeList对象，能根据索引号选择其中1个，可以遍历输出。

document.getElementsByClassName()    根据class获取元素节点

　　二、节点关系
(1)作为节点数的文档
    1、parentNode    获取该节点的父节点  

 

 
    2、childNodes    获取该节点的子节点数组

 

    3、firstChild    获取该节点的第一个子节点
    4、lastChild    获取该节点的最后一个子节点

 

    5、nextSibling    获取该节点的下一个兄弟元素
    6、previoursSibling    获取该节点的上一个兄弟元素

 

    7、nodeType    节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点
    8、nodeVlue    Text节点或Comment节点的文本内容
    9、nodeName    元素的标签名(如P,SPAN,#text(文本节点),DIV)，以大写形式表示

 

 

　　　　(2)作为元素树的文档
    1、firstElementChild        第一个子元素节点
    2、lastElementChild        最后一个子元素节点
    3、nextElementSibling        下一个兄弟元素节点
    4、previousElementSibling    前一个兄弟元素节点
    5、childElementCount        子元素节点个数量
    注意，此5个方法文本节点不算进去

 

　　　三、节点操作：创建，插入，删除节点
    1、document.createTextNode()    创建一个文本节点

    2、document.createElement()    创建一个元素节点，这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML文档中不区分大小写，在XHTML中区分大小写。

　3、插入节点

     appendChild()    //将一个节点插入到调用节点的最后面
     insertBefore()    //接受两个参数，第一个为待插入的节点，第二个指明在哪个节点前面，如果不传入第二个参数，则跟appendChild一样，放在最后。

　 insertAfter()      //可以自己创建一个在指定节点后面插入节点的函数，代码如下：

1 function insertAfter(newElement,targetElement){
2         var parent = targetElement.parentNode;
3         if(parentNode.lastChild == targetElement){
4        parent.appendChild(newElement);
5                                                                    }
6 else{parent.insertBefore(newElement,targetElement.nextSibling)
7       }
8                                                                   }                            

 

　　4、删除和替换节点。
    1、removeChild();    由父元素调用，删除一个子节点。注意是直接父元素调用，删除直接子元素才有效，删除孙子元素就没有效果了。该方法移除节点，接受一个参数，即要移除的节点，同时该方法返回被移除的节点。只能是一个节点，不能是一组节点。

　2、replaceChild()    //删除一个子节点，并用一个新节点代替它，第一个参数为新建的节点，第二个节点为被替换的节点

5、document.write()可以方便快捷的把字符串插入到文档中。

　　四、属性操作

 1.

setAttribute()

 

添加一个新属性（attribute）到元素上，或改变元素上已经存在的属性的值。注意：在IE7下，修改了元素的class，如果已有class，则会出现两个class，通过setAttribute()添加的不生效；如果没有class，则添加上class，但这个添加上去的class的样式不会生效。

2.

removeAttribute()

该方法用于移除元素的属性。

3.

getAttribute()

该方法返回元素上指定属性（attribute）的值。如果指定的属性不存在，则返回 null 或 "" （空字符串）（IE5+都返回null）。注意：IE7下不能正确返回class，返回的是null，其他正常。

4.

hasAttribute()

hasAttribute() 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。注意：IE7不支持该方法。

5.

自定义属性data-*

html5里有一个data-*去设置获取元素的自定义属性值。

<div id="div1" data-aa="11">

利用div1.dataset可以获得一个DOMStringMap，包含了元素的所有data-*。
使用div1.dataset.aa就可以获取11的值。
同样，通过设置div1.dataset.bb = "22"就可以设置一个自定义属性值。
在不兼容的浏览器里，就使用getAttribute和setAttribute

 五、事件

    四、共享onload事件

    function addLoadevent(func) {

　　var oldonload = window.onload;

　if(typeof window.onload !=\' function\'){ 

　　window.onload = func;

　　　　　　 }else{

　　window.onload = function(){

　　func;

　　oldonload;

　　　　　　　　　　　　　　}

　　　　　　　　  }

    }

addEventListener()

addEventListener()将指定的事件监听器注册到目标对象上，当目标对象触发制定的事件时，指定的回调函数就会触发。目标对象可以是 文档上的元素、 document、 window 或者XMLHttpRequest(比如onreadystatechange事件)。

IE8及以下不支持此方法且只有事件冒泡没有事件捕获。IE9开始支持此方法，也就有了事件捕获。

    var div1 = document.getElementById("div1");
    div1.addEventListener("click", listener, false);
    function listener() {
        console.log(\'test\');
    }
    
    var cloneHtml = div1.cloneNode(true);
    document.body.appendChild(cloneHtml);

第一个参数是事件名，第二个是回调函数，第三个参数为true表示捕获，false表示冒泡。

    var div1 = document.getElementById("div1");
    div1.addEventListener("click", listener1, true/fasle);
    function listener1() {
        console.log(\'test1\');
    }

    var div2 = document.getElementById("div2");
    div2.addEventListener("click", listener2, true/fasle);
    function listener2() {
        console.log(\'test2\');
    }

有一点要注意的是，当对某一个元素1既绑定了捕获事件，又绑定了冒泡事件时：
当这个元素1并不是触发事件的那个元素2时，则触发顺序会按照先 捕获 后 冒泡 的顺序触发；
当这个元素1就是最底层的触发事件的元素时，则这个元素没有捕获和冒泡的区别，谁先绑定就先触发谁。

    var div2 = document.getElementById("div2");
    
    div2.addEventListener("click", listener2, true);
    function listener2() {
        console.log(\'test2\');
    }

    div2.addEventListener("click", listener1, false);
    function listener1() {
        console.log(\'test1\');
    }
    // 按绑定顺序执行，两个`addEventLister()`颠倒过来则执行顺序也变化
    // 如果再对`div1`绑定一个捕获、一个冒泡，则会先触发捕获 再 触发冒泡，与绑定顺序无关

removeEventListener()

与addEventListener()绑定事件对应的就是移除已绑定的事件。第三个参数的布尔值代表解绑的是捕获事件还是冒泡事件。两个事件互不相关。

    var div2 = document.getElementById("div2"); 
    div2.addEventListener("click", listener2, true);
    function listener2() {
        console.log(\'test2\');
    }
    div2.removeEventListener("click", listener2, true);

注意：只能通过removeEventListener()解绑有名字的函数，对于绑定的匿名函数无法解除绑定。

    div2.addEventListener("click", function(){
        console.log(\'test\');
        console.log(this);
    }, true);

    div2.removeEventListener("click", function() {
        console.log("test");
    }, true);
    div2.onclick = null;
    // 点击div2依然打印出test

注意：这里this指向触发事件的元素自身。

attachEvent()、detachEvent()

IE8及以下使用这两个方法绑定和解绑事件，当然，IE9+也支持这个事件。但这个方法绑定的事件默认为冒泡也只有冒泡。

    // 这里需要在事件前加 on
    div2.attachEvent("onclick", listener1);
    function listener1() {
        console.log(\'test\');
        console.log(this);
    }
    div2.detachEvent("onclick", listener1);

和addEventListener()一样，也不能解绑匿名函数。
注意：这里this指向 window。

阻止默认事件和冒泡

标准事件和IE事件中的阻止默认事件和冒泡事件也有很大区别。

    var div2 = document.getElementById("div2");
    if (div2.addEventListener) {
        div2.addEventListener("click", function(e) {
            e.preventDefault(); // 阻止默认事件
            e.stopPropagation(); // 阻止冒泡
            console.log(e.target.innerHTML);
        }, false);
    } else {
        div2.attachEvent("onclick", function() {
            var e = window.event;
            e.returnValue = false; // 阻止默认事件
            e.cancelBubble = true; // 阻止冒泡
            console.log(e.srcElement.innerHTML);
        });
    }

IE8及以下的event是绑定在window上的。（我的IE11里，仿真到IE7、IE8也可以取到标准事件里的 e 对象，估计是升级到IE11的原因）。

自定义事件：createEvent()

createEvent()用于创建一个新的 event ，而后这个 event 必须调用它的 init() 方法进行初始化。最后就可以在目标元素上使用dispatchEvent()调用新创建的event事件了。

createEvent()的参数一般有：UIEvents、MouseEvents、MutationEvents、HTMLEvents、Event(s)等等，分别有对应的init()方法。HTMLEvents、Event(s)对应的都是initEvent()方法。

initEvent(type, bubbles, cancelable)

type表示自定义的事件类型，bubbles表示是否冒泡，cancelable表示是否阻止默认事件。

target.dispatchEvent(ev)

target就是要触发自定义事件的DOM元素

        var div1 = document.getElementById("div1");
        div1.addEventListener("message", function(){
            console.log(\'test\');
        }, false);

        var div2 = document.getElementById("div2");
        div2.addEventListener("message", function(e){
            console.log(this);
            console.log(e);
        }, false);
        var ev = document.createEvent("Event");
        ev.initEvent("message", false, true); // 起泡参数变为true，div1的事件就会触发
        div2.dispatchEvent(ev);

六.获取元素相关计算后的值

getComputedStyle()、currentStyle()

当我们想获取元素计算后实际呈现在页面上的各个值，就用这两个方法。IE8及以下用currentStyle(),IE9+及其他标准浏览器用getComputedStyle()。

    var div2 = document.getElementById("div2");
    var result = "";
    if (window.getComputedStyle) {
        result = (window || document.defaultView).getComputedStyle(div2, null)[\'cssFloat\'];
    } else {
        result = div2.currentStyle["styleFloat"];
    }
    console.log(result);
    // document.defaultView返回document对象所关联的window

这两个方法在不同的浏览器里差距也很大。
比如float属性：
getComputedStyle： IE9以上需要用cssFloat，其他标准的用float
currentStyle： IE8及以下可用styleFloat或者float。

比如height属性：
假如未设置height值，标准浏览器里能计算出高度值，而currentStyle计算出来是auto。

上面的例子getComputedStyle是用键值去访问的，也可用getPropertyValue()去访问。（IE8、IE7不支持）

result = (window || document.defaultView).getComputedStyle(div2, null).getPropertyValue("float");

getBoundingClientRect()、getClientRects()

getBoundingClientRect()该方法获得页面中某个元素的上、右、下、左分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（到浏览器顶部而不是文档顶部）。该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

getClientRects()是返回一个ClientRectList集合。

 

    var div1 = document.getElementById("div1");
    var rects1 = div1.getClientRects();
    var rects2 = div1.getBoundingClientRect();
    console.log(rects1[0].top);
    console.log(rects2.top);