DOM 文檔對象

一、HTMLCollection對象

<1>

getElementById('')
getElementsByTagName('');
getElementsByName('');

<2>
document.anchors
document.forms
document.images
document.links

<1>和<2>返回的均是HTMLCollection對象

namedItem('')方法
var myImg = images.namedItem('small');
var myImg = images['small'];
二者等價

二、HTMLElement對象操作

ele.innerHTML;//設置內部html

ele.innerText;//設置內部text

ele.appendChild(child);//尾部加入子節點

ele.insertBefore(child, null);//等價於ele.appendChild(child);

ele.insertBefore(child, benchmarkNode);//在基準節點之前插入子節點（benchmarkNode爲基準節點）

insertAfter(ele, child, benchmarkNode);//在基準節點之後插入子節點（需要自己實現）

ele.replaceChild(child, oldNode);//替換子節點

ele.removeChild(child);//移除節點

ele.cloneNode();//節點克隆（返回克隆後的節點）

document.createElement(ele);//創建元素節點

document.createTextNode(txtEle);//創建文本節點

擴展：實現insertAfter方法

function insertAfter(ele, newNode, benchmarkNode){
	ele.insertBefore(newNode, benchmarkNode.nextSibling);
}

三、節點遍歷

childNodes（包括所有 element和text節點 節點集合）

firstChild 第一個子節點，等價於childNodes[0]

lastChild 最後一個子節點，等價於childNodes[childNodes.length-1];

parentNode 父節點（僅一個）

nextSibling 同級別下一個兄弟節點

previousSibling 同級別上一個兄弟節點

四、屬性的獲取、設置、遍歷

var mydiv = document.createElement('div');

<1>
mydiv.setAttribute("class", "ping");
console.log(mydiv.getAttribute("class"));

<2>
mydiv.className = "ping";
console.log(mydiv.className);

<3>
div.removeAttribute("class");//屬性移除

tip:
<1>可以設置包括自定義屬性在內的所有屬性，<2>不能設置自定義屬性。

attributes屬性

Element類型是使用attributes屬性的唯一一個DOM節點類型。
attributes屬性中包含一個NamedNodeMap，這是一個動態的集合。
元素的每一個特性都由一個Attr節點表示，每個節點都保存在NamedNodeMap對象中。

NamedNodeMap對象包含如下方法、屬性：

getNamedItem(name);
removeNamedItem(name);
setNamedItem(node);
item(pos);

attributes.length;

測試：

var mydiv = document.createElement('div');
mydiv.setAttribute('id', 'wrap');
mydiv.setAttribute('class', 'ping');
mydiv.setAttribute('bg', 'yuyu');

var oldAttr = mydiv.attributes.getNamedItem('bg');
console.log(oldAttr);//yuyu

var newAttr = document.createAttribute('conn');
newAttr.nodeValue = "link";
mydiv.attributes.setNamedItem(newAttr);

console.log(mydiv.attributes);
console.log(item(2));

擴展：遍歷元素屬性

function outputAttribute(ele){
	var res = [];
	for(var i=0, len = ele.attributes.length; i < len; i++){
		var obj = {};
		obj.attrname = ele.attributes[i].nodeName;
		obj.attrvalue = ele.attributes[i].nodeValue;
		res.push(obj);
	}
	return res;
}

var mydiv = document.createElement('div');
mydiv.setAttribute('id', 'wrap');
mydiv.setAttribute('class', 'ping');
mydiv.setAttribute('bg', 'yuyu');
var attrs = outputAttribute(mydiv);
console.log(attrs);

五、nodeType、nodeValue、nodeName

console.log(tagName == nodeName) //true

console.log(document.nodeType);//9
console.log(document.nodeValue);//null
console.log(document.nodeName);//#document

var mydiv = document.createElement('div');
console.log(mydiv.nodeType);//1
console.log(mydiv.nodeValue);//null
console.log(mydiv.nodeName);//DIV （默認大寫）

var mytext = document.createTextNode('txt');
console.log(mytext.nodeType);//3
console.log(mytext.nodeValue);//txt
console.log(mytext.nodeName);//#text

擴展一：
獲取節點的元素子節點集合（非文本節點）：
通過 ele.childNodes[i].nodeType 的值來進行判斷

element: ele.childNodes[i].nodeType == 1
text: ele.childNodes[i].nodeType == 3
document: ele.childNodes[i].nodeType == 9

function getRealChildren(ele) {
	var real = [];
	for (var i = 0, len = ele.childNodes.length; i < len; i++) {
		if (ele.childNodes[i].nodeType == 1) {
			real.push(ele.childNodes[i]);
		}
	}
	return real;
}

擴展二：
獲取子節點無文本節點的父節點對象：
通過遍歷去掉子節點中的文本節點

function getRealParentObj(ele){
	for (var i = 0; i < ele.childNodes.length; i++) {
		if (ele.childNodes[i].nodeType == 3) {
			ele.removeChild(ele.childNodes[i]);
		}
	}
	return ele;
}