js高级程序设计DOM

//将NodeList转换为数组
function convertToArray(nodes) {
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0); //for standard DOM browser
} catch (ex) {
//for IE DOM based in COM
array = [];
for (var i = 0, len = nodes.length; i < len; i++) {
array.push(nodes[i]);
}
}
return array;
}

//判断第一个节点或者最后一个节点
if (someNode.nextSibling === null) {
console.log("Last node in the parent's childNodes list");
} else if (someNode.previousSibling === null) {
console.log("first node in the parents's childNodes list");
}

//迭代元素的每一个特性
function outputAttribute(element) {
var pairs = [];
for (var i = 0, len = element.attributes.length; i < len; i++) {
var attrName = element.attributes[i].nodeName;
var attrValue = element.attributes[i].nodeValue;
//ie7及更早的版本会返回HTML元素中所有可能的特性
//每个通过setAttribute()方法设置了的特性的specified属性斗会返回true
if(element.attributes[i].specified){
pairs.push(attrName + "=\"" + attrValue + "\"");
}
}
return pairs.join(" ");
}

/**
* 操作DOM
* parentObj.appendChild(newNode)
* parentObj.insertBefore(newNode,targetNode)
* parentObj.replaceChild(newNode,targetNode)
* parentObj.removeChild(targetNode)
* somdeNode.cloneNode([true]); //true为深复制
* normalize() //处理文档书中的文本节点，规范化文本节点
*
* childNodes属性
* firstChild
* lastChild
* ParentNode
* previousSibling
* nextSibling
*
* 查找元素
* document.getELementById()
* document.getElementsByTagName()
*
* 操作特性
* getAttribute()
* setAttribute()
* removeAttribute()
*
*添加
* document.createElement()
* document.createTextNode()
* document.createAttribute()
*
* 分割文本节点
* soneNode.firstChild[lastChild].spliteText(index)
*
*
*/

//使用文档片段，避免浏览器反复渲染
var fragment=document.createDocumentFragment();
var ul=document.getElementById("myList");
var li=null;
for(var i=0;i<3;i++){
li=document.createElement("li");
li.appendChild(document.createTextNode("item"+(i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);

//检测浏览器呈现模式
if(document.compatMode=="CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}

//点击链接滚动到某个元素视图
var links=document.getElementsByTagName("a");
var divs=document.getElementsByTagName("div");
for(var i= 0,len=links.length;i<len;i++){
links[i].index=i;
links[i].onclick=function(event){
divs[this.index].scrollIntoView(true); //scrollIntoViewIfNeeded()
event.preventDefault();
};
}

//跨浏览器一个元素是否包含另一个元素
function contains(refNode,otherNode){
if(typeof refNode.contains=="function" && (!client.engine.webkit || client.engine.webkit>=522)){
//for standard
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;
}
}

//跨浏览器实现获取文本和设置文本属性
function getInnerText(element){
return (typeof element.textContent=="string")?element.textContent:element.innerText;
}
function setInnerText(element,text){
if(typeof element.textContent=="string"){
element.textContent=text;
} else {
element.innerText=text;
}
}