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;
}