JS DOM(2017.12.28)

Posted 君临天下丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS DOM(2017.12.28)相关的知识,希望对你有一定的参考价值。

 

  一.获得元素节点的方法

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"就可以设置一个自定义属性值。
在不兼容的浏览器里,就使用getAttributesetAttribute

 五、事件

    四、共享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里,仿真到IE7IE8也可以取到标准事件里的 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属性:
getComputedStyleIE9以上需要用cssFloat,其他标准的用float
currentStyleIE8及以下可用styleFloat或者float

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

上面的例子getComputedStyle是用键值去访问的,也可用getPropertyValue()去访问。(IE8IE7不支持)

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

getBoundingClientRect()、getClientRects()

getBoundingClientRect()该方法获得页面中某个元素的上、右、下、左分别相对浏览器视窗的位置。getBoundingClientRectDOM元素到浏览器可视范围的距离(到浏览器顶部而不是文档顶部)。该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、leftcss中的理解很相似,width、height是元素自身的宽高,但是rightbottomcss中的理解有点不一样。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);

 

以上是关于JS DOM(2017.12.28)的主要内容,如果未能解决你的问题,请参考以下文章

JS常用代码片段2-值得收藏

JS常用代码片段2-值得收藏

前端开发中最常用的JS代码片段

angularJS使用ocLazyLoad实现js延迟加载

2.ReactJS基础(虚拟DOM,JSX语法)

通过DOM元素数据集将回调传递给js