JavaScript高级程序设计笔记(10)-DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API。

节点层次

节点关系及操作节点

1、 appendChild(): 用于向childNode列表末尾添加一个节点。
2、 insertBefore(): 接收两个参数，要插入的节点名称和作为按照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点，同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()执行相同的操作。
3、 replaceChild(): 接收两个参数，要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中删除，同时由要插入的节点占据其位置。
4、 removeChild(): 接收一个参数，即要删除的节点。被移除的节点将成为方法的返回值。
5、 cloneNode(): 接收一个布尔值参数，表示是否执行深复制。

Document类型

Javascript中通过Document类型表示文档。在浏览器中document对象是HTMLDocument(继承自Document类型)的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因为可以将其作为全局对象来访问。

document.nodeType;//9
document.nodeValue;//null
document.nodeName;//'#document'
document.parentNode;// null

var html = document.documentElement;
alert(html == document.firstChld);//true
alert(html == document.childNodes[0]);//true

document的body属性直接指向

元素。

document.doctype取得对<!DOCTYPE>的引用。浏览器支持有限！

document.title，取得文档标题

document.URL，取得完整url

document.domain，取得域名，可以设置，但有安全方面限制，并非可以设置任何值。

document.referrer,取得来源页面url

查找元素

document.getElementById/document.getElementsByClassName/document.getElementsByName/document.getElementsByTageName/document.getElementsByTagnameNS

HTML元素属性

1、 id，元素在文档中的唯一标识符
2、 title，有关元素的附加说明信息
3、 lang，元素内容的语言代码，很少使用
4、 dir，语言的防线，值为’ltr’(左至右)或’rtl’，很少使用
5、 className，元素的class特性对应

取得特性：

getAttribute()/setAttribute()/removeAttribute()

Element类型是attributes属性的唯一一个DOM节点类型，attributes属性中包含一个NamedNodeMap，与NodeList类似，也是一个动态集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中，NamedNodeMap对象拥有下列方法：
1、 getNamedItem(name): 返回nodeName属性等于name的节点
2、 removeNameItem(name): 从列表中移除nodeName属性等于name的节点
3、 setNamedItem(node): 向列表中添加节点，以节点的nodeName属性为索引
4、 item(pos): 返回位于数字pos位置处的节点
attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。要取得元素的id特性

document.getElementById('ntp-contents').attributes.getNamedItem('id').nodeValue;//ntp-contents
document.getElementById('ntp-contents').attributes['id'].nodeValue;//ntp-contents

//也可以通过此方法设置新的属性值
document.getElementById('ntp-contents').attributes['id'].nodeValue = 'newId';

removeNamedItem()方法与removeAttribute()方法的效果相同：直接删除具有给定名称的特性。两者唯一区别资源，removeNamedItem()返回表示被删除特性的Attr节点。

1	var oldAttr = element.attributes.removeNamedItem('id');

setNamedItem()是个很不常用的方法，通过这个方法可以为元素添加一个新特性，为此需要为它传入一个特性节点。

1	element.attributes.setNamedItem(newAttr);

上述attributes的方法不够方便，一般使用getAttribute()/setAttribute()/removeAttribute()。

function outputAttributes(element){
	var pairs = new Array(),
		attrName,
		attrValue,
		i,
		len = element.attributes.length;
	for( i = 0; i < len; i++){
		attrName = element.attributes[i].nodeName;
		attrVaule = element.attributes[i].nodeValue;
		if(element.attributes[i].specified){ 
			//针对IE7及之前版本做兼容，确保即使在IE7及更早版本中，也会只返回指定的特性
			paris.push(attrName + '=\'' + attrValue + '=\'');
		}
	}
}

创建元素

document.createElement();

Text类型

创建文本节点

document.createTextNode()

规范化文本节点

normalize():如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。

var element = document.createElement('div');
element.className = 'message';

var textNode = document.createTextNode('hello world!');
element.appendChild(textNdoe);

var textNode1 = document.createTextNode('html');
element.appendChild(textNode1);

document.body.appendChild(element);

alert(element.childNodes.length);//2

element.normalize();

alert(element.childNodes.length);//1
alert(element.firstChild.nodeValue);// hello world!html

splitText(): 作用与normalize()相反，这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原文本节点将包含开始到指定位置之前的内容，新文本节点包含剩下的文本。该方法返回一个新的文本节点，该节点与原节点的parentNode相同。

var element = document.createElement('div');
element.className = 'message';

var textNode = document.createTextNode('hello world!');
element.appendChild(textNdoe);

document.body.appendChild(element);

var newNdoe = element.firstChild.splitText(5);

alert(element.firstChilde.nodeValue);//'hello'
alert(newNode.nodeValue);//' world'
alert(element.childNodes.length);//2

Comment类型

DOM操作技术

NodeList、NamedNodeMap和HTMLCollection，这三个集合都是动态的，每当文档结构发生变化时，它们都会更新。NodeList对象都是在访问DOM文档时实时运行的查询。