JavaScrip——DOM以及扩展

DOM

每一个html元素都有id title lang dir className等特性

以下列举几个常用的方法

getAttribute()

可以获取相应元素的指定特性

setAttribute()

可以自定义元素的特性或设置已有特性的值

removeAttribute()

可以移除元素的指定特性

document.createElement(TagName)

通过指定标签名(TagName)来动态的创建元素

appendChild()

可以为元素添加相应的子标签

document.createTextNode(String)

可以创建文本标签（注文本标签在html中就是指文本，并不是p标签之类的）

chileNodes[]

获取元素的子节点，使用该方法每一个元素的子节点都是以数组的形式返回

firstChild

获取元素的第一个子节点

补充：文档片段DocumentFragment类型(重点)

在所有的节点类型中，只有DocumentFragment在文档中没有对应的标记，DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会相完整的文档那样占用额外的资源。它具有以下特征：

nodeType值为: 11
nodeName的值为： "#document-fragment"
nodeValue的值为:	 null
parentNode的值为: null

用于动态渲染页面时documentfragment非常有效
例如：

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("text" + (i + 1)));
			fragment.appendChild(li);
		}

		ul.appendChild(fragment);

DOM扩展

选择符API(querySelector())

诸多JavaScript库都是根据CSS选择符实现与DOM元素的匹配（例如Juqery和核心就是通过CSS选择符查询DOM文档 取得元素的引用）

Selectors API Level 1的核心是两个方法：querySelector() 和 querySelectorAll()

querySelector()方法

querySelector()方法接收一个CSS选择符，返回和该模式匹配的第一个元素，没有则返回null
例如：

var body = document.querySelector("body");
var div1 = document.querySelector(".div");
var div1 = document.querySelector("img.img1")

querySelectorAll()方法

querySelectorAll()方法和querySelector()方法一致，只是他返回的是一个NodeList的实例
例如：
	var liS = document.getElementById("myList").querySelectorAll("li");
	console.log(liS);
即返回一个节点数组

matchesSelector()方法

Selectors API Level2 规范为Element类型新增了一个方法matchesSelector()方法。同样是接受一个CSS选择符，匹配则返回true，否则返回false。

未完待续…