DOM2

选择符API

querySelector()

• 方法接收一个css选择符，如果传入不被支持的选择符，会抛错，没有找到匹配的元素，返回null

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

// 类为selected的第一个元素
var selected = document.querySelector(".selected");

// 类为button的第一个img元素
var img = document.querySelector("img.button");  

querySelectorAll()

• 与selector()方法相同，但是这个方法返回的是NodeList的实例

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()

• 有兼容问题

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 : 返回子元素（不包括文本节点和注释）的个数
• firstElementChild,firstChild : 指向第一个子元素
• lastElementChild,lastChild : 指向最后一个元素
• previousElementSibling,previousSibling : 指向同级的前一个元素
• nextElementSibling,nextSibling : 指向同级的后一个元素

HTML5

与类相关的扩充

getElementsByClassName()

// 获取类名为red，box的元素，顺序无所谓
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

焦点管理

• document.activeElement DOM中当前获得焦点的元素
  • 文档加载期间，document.activeElement的值为null，加载完成，保存的是document.body

var button = document.getElementById('button');
button.focus();     // 获得焦点
console.log(document.activeElement == button);   // true

• document.hasFocus() 确定文档是否获得了焦点

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

HTMLDocument 变化

readyState 属性

• 两种状态 loading 和 complete
• 通过它实现一个指示文档已经加载完成的指示器，必须要借助一个onload事件处理程序设置一个标签

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

head属性

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

自定义数据属性

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

//js中的读取，设置
var oDiv = document.getElementsByTagName('div')[0];

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

//设置值
oDiv.dataset.appId = '456';

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


//可以创建一个赋值
document.onclick = function(){
    oBox.dataset.name = 'dan';
}

插入标记

innerHTML 属性

• 在读模式下，返回与调用的所有子节点（包括元素，注释，和文本节点）对应的html标签，但是不同的浏览器文本格式会不同
• 在写模式下，innerHTML会根据指定的值创建新的DOM树

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>")  // 作为前一个同辈元素插入

oP.insertAdjacentHTML("afterbegin","<p>作为第一个子元素插入</p>")  // 作为第一个子元素插入

oP.insertAdjacentHTML("beforeend","<p>作为最后一个元素插入</p>")   // 作为最后一个子元素插入

oP.insertAdjacentHTML("afterend","<p>作为后一个同辈元素插入</p>")  // 作为后一个同辈元素插入

内存与性能问题

• 使用innerHTML和outerHTML效率更高

• 多次的频繁操作innerHTML效率很低，可以单独构建字符串，然后通过字符串的计算，最后统一给innerHTML。

contains方法

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

• 判断b元素是不是a元素的后代，支持的浏览器：IE，ff，safari，opera，chrome

compareDocumentPosition()

• 通过掩码表示两个节点间的关系

掩码	节点关系
1	无关
2	居前（指定节点在参考节点之前）
4	居后（指定节点在参考节点之后）
8	包含（给定节点是参考节点的祖先）
16	被包含（给定节点是参考节点的后代）

• 多种浏览器兼容

function contains(refNode, otherNode){  
    if (typeof refNode.contains == "function" &&  
    (!client.engine.webkit || client.engine.webkit >= 522)){  // 检测当前浏览器所用的webkit的版本号
    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;  
    }  
}