JS高级程序设计-第十一章：DOM扩展

DOM主要有两个扩展，一个是Selector API, 一个是HTML5。

选择符API

1.querySelector()方法 返回与该模式匹配的第一个元素

        //querySelector 取ID名，元素名，类名等
        var body = document.querySelector('body');
        var div = document.querySelector('#mydiv');
        var p = document.querySelector('.myP');
        console.log([body, div, p]);

2.querySelectorAll()方法 返回包含所有匹配元素的nodelist实例

        //querySelectorAll的用法
        var allem = document.getElementById('mydiv').querySelectorAll('em');
        var allem1 = document.querySelectorAll('div em')
        console.log([allem, allem1]);

3.matchesSelector()方法 返回一个布尔值，检测调用元素与该选择器是否匹配。

        //matchesSelector的用法, 查看chrome浏览器是否支持该方法
        var result = document.getElementById('mydiv').webkitMatchesSelector('#mydiv')
        console.log(result);  // true

元素遍历

对于元素间的空格，有的浏览器会返回文本节点，有的不会，为了统一起见，Element Traversal API 为DOM元素添加了新属性，方便跨浏览器遍历某元素的子元素。

HTML5

1.与类相关的扩充
getElementsByClassName() 方法可以返回带有指定类的所有元素的NodeList，还可以传入多个类名，也可以通过重置className修改类名。或者可以直接用新增的classList属性的方法实现修改类名：

        //使用className属性修改类名
        let div = document.getElementById('div2')
        let divClassNames = div.className.split(" ")
        
        // console.log(divClassNames); //["bd", "user", "disabled"]
        //找到要删除的类名，
        let pos = null;
        for (var i = 0, len = divClassNames.length; i < len; i++) {
            if (divClassNames[i] === 'user') {
               pos = i;
               break;
            }
        }
        divClassNames.splice(i, 1);
        // console.log(divClassNames);
        let classname = divClassNames.join(" ")
        // console.log(classname);
        div.className = classname;
        console.log(div.className);  //bd disabled

2.焦点管理
H5新增的document.activeElement始终引用DOM中当前获得焦点的元素，获得焦点的方式有页面加载，用户输入或者调用focus等。
3.自定义属性
H5可以为元素添加非标准的属性，加前缀data-用以区分标准属性。用以为元素提供与渲染无关的信息或者语义信息。自定义的属性将以名值对的形式储存在dataset中。