Web 前端开发 让前端飞

dom总结：DOM拓展

2018-03-05  本文已影响0人  我不是大熊

对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和HTML5,还有Element Traversal (元素遍历)规范，为 DOM 添加了一些属性。除了这些标准拓展以外还有一些专有拓展。

选择符API

Selectors API Level 1:IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+.

html:
<div class="group">
    <div class="top">
        <div class="top-title">顶部标题</div>
        <div class="top-content">顶部内容顶部内容</div>
        <ul class="top-ul">
            <li>顶部第一行</li>
            <li>顶部第二行</li>
            <li class="top-li">顶部第三行</li>
            <li class="top-lastLi">顶部第四行</li>
        </ul>
    </div>
    <div class="bottom">
        <div class="bottom-title">底部标题</div>
        <ul class="bottom-ul">
            <li>底部第一行</li>
            <li>底部第二行</li>
            <li>底部第三行</li>
            <li>底部第四行</li>
        </ul>
    </div>
</div>
js:
    var ele = document.querySelector(".top-ul>li.top-li+li.top-lastLi");
    console.log(ele);

    ele = document.querySelectorAll("li");
    console.log(ele);
    for(var i=0,len=ele.length;i<len;i++){
        console.log(ele.item(i));
    }

    var bottom = document.querySelectorAll('div.bottom')[0];
    console.log(bottom.querySelectorAll("li"));

Selector API Level 2:matchesSelector()方法判断调用元素与该选择符是否匹配,但这个方法的兼容性尚不知如何,可考虑使用msMatchesSelector , mozMatchesSelector , webkitMatchesSelector.

元素遍历

对于元素间的空格，IE9 及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样,就导致了在使用 childNodes 和 firstChild 等属性时的行为不一致。为了弥补这一差异，而同时又保 持 DOM 规范不变，Element Traversal 规范新定义了一组属性。

    var topUl = document.querySelector(".top-ul");
    console.log(topUl);
    console.log(topUl.childNodes.length);
    console.log(topUl.firstChild);
    console.log(topUl.lastChild);
    //可分别比较不同的地方
    console.log(topUl.childElementCount);
    console.log(topUl.firstElementChild);
    console.log(topUl.lastElementChild);

HTML5

HTML5 规范围绕如何使用新增标记定义了大量 JavaScript API.

    var boTitle = document.querySelector(".bottom-title");
    console.log(boTitle);
    console.log(boTitle.className);
    console.log(boTitle.classList);
    console.log(boTitle.classList.length);
    boTitle.classList.add("aa","bb","cc");
    console.log(boTitle.classList);
    boTitle.classList.remove("bb");
    console.log(boTitle.classList);
    boTitle.classList.toggle("common-title");
    console.log(boTitle.classList);
    boTitle.classList.toggle("dd");
    console.log(boTitle.classList);
    console.log(boTitle.classList.contains("bottom-title"));
    console.log(boTitle.classList.item(2));

    document.onreadystatechange = function () {
        console.log(document.readyState);
        if(document.readyState == "complete"){

        }
    };

②兼容模式:compatMode属性。在标准模式下，document.compatMode等于"CSS1Compat",而在混杂模式下，document.compatMode等于"BackCompat"。
③head属性

var head = document.head || document.getElementsByTagName("head")[0];

专有拓展

上一篇 下一篇

猜你喜欢

热点阅读