$11 DOM扩展

1. 选择符API

根据CSS选择符选择与某个模式匹配的DOM元素。
Selectors API的核心方法：querySelector()和querySelectorAll()，可以通过document和element类型的实例调用它们。

1.1 querySelector()方法：

接收CSS选择符，返回匹配的第一个元素，如果没有找到，返回null。

var myDiv=document.querySelector("#myDiv");

1.2 querySelectAll()方法

返回所有匹配的元素，返回结果为NodeList实例。

    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>

var divs=document.querySelectorAll("div");
console.log(divs);

Paste_Image.png

console.log(divs.item(0)==divs[0])//true

2. 元素遍历

对于元素之间的空格，IE不会返回文本节点，但是非IE会返回文本节点，这样在使用firstChild等属性时导致不一致。
为了解决该问题，定义了新的属性：

childElementCount: 返回子元素（不包括文本节点和注释）个数
firstElementChild: 指向第一个子元素   ；firstChild的元素版。
lastElementChild: 指向最后一个子元素；lastChild的元素版。
previousElementSibling: 指向前一个同辈元素；previousChild的元素版。
nextElementSibling:指向后一个同辈元素；nextChild的元素版。

遍历某元素的子元素个数：

    var i=1,len;
    var child=document.body.firstElementChild;
    while(child!=document.body.lastElementChild){
        if(child.nodeType==1){
            i+=1;
        }
        child=child.nextElementSibling;
    }

3. HTML5

HTML5规范围绕如何使用新增标记定义了大量JS API。其中一些与DOM重叠，定义了浏览器需要支持的DOM扩展。

3.1 与类相关的扩充：

A. getElementByClassName()方法

B. classList属性：便于对类名进行操作。

<div class="bd user disabled"></div>

var div=document.getElementsByTagName("div")[0];
var classlist=div.classList;
console.log(classlist)

Paste_Image.png

方法：

add(value):添加属性
contain(value):检查是否存在某属性，返回布尔值
remove(value):删除属性
toggle(value):如果存在，删除，不存在，添加。

var div=document.getElementsByTagName("div")[0];
var classlist=div.classList;
classlist.add("new");
classlist.remove("bd");
classlist.toggle("disabled");
console.log(classlist)

Paste_Image.png

3.2 焦点管理：

A. document.activeElement属性

引用DOM中当前获取焦点的元素。元素获得焦点的方法：页面加载、用户输入、代码中调用focus()方法。

    var button=document.getElementsByTagName("button")[0];
    button.focus();
    console.log(document.activeElement==button);//true

B. document.hasFocus属性

检查文档是否获得了焦点，返回值为布尔值，该值可以确定用户是否在与页面交互。

    var button=document.getElementsByTagName("button")[0];
    button.focus();
    alert(document.hasFocus());//true

3.3 HTMLDocument的变化

A. readyState属性

检查文档是否加载完毕，值：loading（正在加载）,complete（加载完毕）

        if(document.readyState=="complete"){            
        }

B. 兼容模式：compatMode属性

检查浏览器渲染页面的模式是标准模式还是混杂模式。
值为CSS1Compat为标准模式，值为BackCompat为混杂模式。

    if(document.compatMode=="CSS1Compat"){
        alert("标准模式")
    }
    else {
        alert("混杂模式")
    }

C. head属性

console.log(document.head==document.getElementsByTagName("head")[0]);//true

3.4 字符集属性

A. document.charset返回当前文档的字符集。
B. document.defaultCharset返回默认的字符集。

3.5 自定义数据属性

添加非标准属性，需要加前缀data-，这些属性可以通过dataset属性进行访问。

<div id="myDiv" data-dd="my" data-aa="your"></div>`
       ` var div=document.getElementById("myDiv");
        console.log(div.dataset)

Paste_Image.png

3.6 插入标记

A. innerHTML属性

返回调用元素的所有子节点对应的HTML标记。在写模式下，会替换原有的子节点。

<div id="myDiv">
  <p>哈哈</p>
</div>

var div=document.getElementById("myDiv");
console.log(div.innerHTML)// <p>哈哈</p>

div.innerHTML="<p>嘻嘻</p>"
console.log(div.innerHTML)//<p>嘻嘻</p>

B. outerHTML属性

读模式：返回该元素以及其子元素

        var div=document.getElementById("myDiv");
        console.log(div.outerHTML)

Paste_Image.png

写模式：替换该元素

       var div=document.getElementById("myDiv");
       div.outerHTML="<p>hh</p>"//div元素将不存在

C. insertAdjacentHTML()方法

与前两种方式相比，加入了位置插入，可以作为同辈元素或者子元素插入。
第一个参数的值：

beforebegin:前一个同辈元素
afterbegin：第一个子元素
beforeend：最后一个子元素
afterend：后一个同辈元素

var div=document.getElementById("myDiv");
div.insertAdjacentHTML("beforeend","<p>im</p>")

Paste_Image.png

D. 内存与性能问题

如果使用上述替换子节点的方法，如果元素被删除，但是该元素存在事件处理程序，该元素与事件的绑定关系会存在于内存中。因此最好手工删除事件。并且需要控制innerHTML和outerHTML的次数，因为它们会创建HTML解析器，创建和销毁HTML解析器会导致性能损失。

4. 专有扩展

4.1 children属性：

只包含元素中为元素的子节点

4.2 contains()方法

用处：检查某个节点是否是另一个节点的后代

        var div=document.getElementById("myDiv");
        console.log(document.documentElement.contains(div));//div是html元素的后代

4.3 插入文本

A. innerText属性

读：返回所有文本内容

    <div id="myDiv">
        <p>哈哈</p>
        <p>hh</p>
    </div>

var div=document.getElementById("myDiv");
console.log(div.innerText);//哈哈  hh

写：将其子节点进行替换

        var div=document.getElementById("myDiv");
        div.innerText="替换";
        console.log(div);

Paste_Image.png

4.4 outerText属性

作用范围扩大到调用节点，当读时与innerText相同，写时，会替换整个元素。