選擇符API

querySelector()

• 方法接收一個(gè)css選擇符欢峰，如果傳入不被支持的選擇符葬荷，會(huì)拋錯(cuò)，沒(méi)有找到匹配的元素纽帖，返回null

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

// 類為selected的第一個(gè)元素
var selected = document.querySelector(".selected");

// 類為button的第一個(gè)img元素
var img = document.querySelector("img.button");  

querySelectorAll()

• 與selector()方法相同宠漩，但是這個(gè)方法返回的是NodeList的實(shí)例

var strongs = document.querySelectorAll("p strong");
var i ,len,strong;
for (var i = 0; len = strongs.lenght ; i < len; i ++){
    strong = strongs[i];
    strong.className = 'important';
}

matchesSelector()

• 有兼容問(wèn)題

function matchesSelector(ele,selector){
    if(ele.matchesSelector){
        return ele.matchesSelector(selector);
    }else if (ele.msMatchesSelector){
        return ele.msMathcesSelector(selector);
    }else if (ele.mozMatchesSelector){
        return ele.mozMatchesSelector(selector);
    }else if (ele.webkitMatchesSelector){
        return ele.webkitMatchesSelector(selector);
    }else{
        throw new Error('not supported')
    }
}

if (matchesSelector(document.body,'.box')){
    //
}

元素遍歷

• childElementCount : 返回子元素（不包括文本節(jié)點(diǎn)和注釋）的個(gè)數(shù)
• firstElementChild,firstChild : 指向第一個(gè)子元素
• lastElementChild,lastChild : 指向最后一個(gè)元素
• previousElementSibling,previousSibling : 指向同級(jí)的前一個(gè)元素
• nextElementSibling,nextSibling : 指向同級(jí)的后一個(gè)元素

HTML5

與類相關(guān)的擴(kuò)充

getElementsByClassName()

// 獲取類名為red，box的元素懊直，順序無(wú)所謂
var aRedBox = document.getElementsByClassName("red box");

var aRed = document.getElementsByClassName("red");

classList屬性

var classNames = div.className.split(/\s+/);
var pos = -1,
    i,
    len;
for ( i = 0; len = classNames.lenght; i < len; i ++){
    if (classNames[i] == "user"){
        pos = i;
        break;
    }
}
classNames.splice(i,1);
div.className = classNames.join(' ');

• 新增屬性

div.classList.remove('red');   // 刪除red的類
div.classList.add('red');     //新增類
div.classList.toggle('red')    // 類的切換
div.classList.contains('red');     // 存在返回true扒吁，不存在返回false

焦點(diǎn)管理

• document.activeElement DOM中當(dāng)前獲得焦點(diǎn)的元素
  • 文檔加載期間，document.activeElement的值為null室囊，加載完成雕崩，保存的是document.body

var button = document.getElementById('button');
button.focus();     // 獲得焦點(diǎn)
console.log(document.activeElement == button);   // true

• document.hasFocus() 確定文檔是否獲得了焦點(diǎn)

var button = document.getElementById('myButton');
button.focus();
console.log(document.hasFocus());   // true

HTMLDocument 變化

readyState 屬性

• 兩種狀態(tài) loading 和 complete
• 通過(guò)它實(shí)現(xiàn)一個(gè)指示文檔已經(jīng)加載完成的指示器，必須要借助一個(gè)onload事件處理程序設(shè)置一個(gè)標(biāo)簽

window.onload = function(){
     if (document.readyState == 'complete'){
            alert('afklsdf')
        }
    }

head屬性

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

自定義數(shù)據(jù)屬性

<div data-appId='123'>ksdk</div>

//js中的讀取波俄，設(shè)置
var oDiv = document.getElementsByTagName('div')[0];

//得到值
var AppID = oDiv.dataset.appId;

//設(shè)置值
oDiv.dataset.appId = '456';

if ( oDiv.dataset.myName){
    ....
}


//可以創(chuàng)建一個(gè)賦值
document.onclick = function(){
    oBox.dataset.name = 'dan';
}

插入標(biāo)記

innerHTML 屬性

• 在讀模式下晨逝，返回與調(diào)用的所有子節(jié)點(diǎn)（包括元素，注釋懦铺，和文本節(jié)點(diǎn)）對(duì)應(yīng)的html標(biāo)簽，但是不同的瀏覽器文本格式會(huì)不同
• 在寫(xiě)模式下支鸡，innerHTML會(huì)根據(jù)指定的值創(chuàng)建新的DOM樹(shù)

outerHTML 屬性

<div id='box'>
    11111
</div>

var oBox = document.getElementById('box');
oBox.outerHTML = '<p>6666</p>'

//上面的代碼與下面一樣
var p = document.createElement('p');
p.appendChild(document.createTextNode('666'));
div.parentNode.replaceChild(p,div);

insertAdjacentHTML() 方法

oP.insertAdjacentHTML("beforebegin","<p>hello world</p>")  // 作為前一個(gè)同輩元素插入

oP.insertAdjacentHTML("afterbegin","<p>作為第一個(gè)子元素插入</p>")  // 作為第一個(gè)子元素插入

oP.insertAdjacentHTML("beforeend","<p>作為最后一個(gè)元素插入</p>")   // 作為最后一個(gè)子元素插入

oP.insertAdjacentHTML("afterend","<p>作為后一個(gè)同輩元素插入</p>")  // 作為后一個(gè)同輩元素插入

內(nèi)存與性能問(wèn)題

• 使用innerHTML和outerHTML效率更高

• 多次的頻繁操作innerHTML效率很低冬念，可以單獨(dú)構(gòu)建字符串，然后通過(guò)字符串的計(jì)算牧挣，最后統(tǒng)一給innerHTML急前。

contains方法

console.log(a.contains(b));  // true  , false

• 判斷b元素是不是a元素的后代，支持的瀏覽器：IE瀑构，ff裆针，safari，opera寺晌，chrome

compareDocumentPosition()

• 通過(guò)掩碼表示兩個(gè)節(jié)點(diǎn)間的關(guān)系

• 多種瀏覽器兼容

function contains(refNode, otherNode){  
    if (typeof refNode.contains == "function" &&  
    (!client.engine.webkit || client.engine.webkit >= 522)){  // 檢測(cè)當(dāng)前瀏覽器所用的webkit的版本號(hào)
    return refNode.contains(otherNode);  
    } else if (typeof refNode.compareDocumentPosition == "function"){  
    return !!(refNode.compareDocumentPosition(otherNode) & 16);  
    } else {  
    var node = otherNode.parentNode;  
    do {  
    if (node === refNode){  
    return true;  
    } else {  
    node = node.parentNode;  
    }  
    } while (node !== null);  
    return false;  
    }  
}