javascript高级程序设计笔记-第十章（DOM）

一、节点层次

1、节点类型

• 元素节点
  • nodeType=1
  • nodeName为标签名
  • nodeValue为null
  • parentNode为document或元素节点
  • 子节点为元素节点或文本节点
• 属性节点
  • nodeType=2
  • nodeName为属性名
  • nodeValue为属性值
  • parentNode为null
  • 在HTML中不支持子节点
• 文本节点
  • nodeType=3
  • nodeName为"#text"
  • nodeValue为所包含的文本
  • parentNode是一个元素节点
  • 不支持子节点

1）、节点关系：

childNodes属性，保存着一个NodeList对象，它是一个类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点

//通过方括号和item()方法访问NodeList中的节点
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

parentNode属性，指向文档树中的父节点

previousSibling属性，指向同胞节点中的上一个节点

nextSibling属性，指向同胞节点中的下一个节点

列表中最后一个节点的和nextSibling属性和第一个节点的previousSibling属性的值为null

firstChild属性，父节点的childNodes列表中的第一个节点，类似于parentNode.childNodes[0]

lastChild属性，父节点的childNodes列表中的最后一个节点，类似于parentNode.childNodes[parentNode.childNodes.length-1]

hasChildNodes()方法，在节点包含子节点的情况下返回true

2）、操作节点：

appendChild()方法，向childNodes列表的末尾添加一个节点

insertBefore()方法，在某节点前面插入一个节点

replaceChild()方法，替换指定节点

removeChild()方法，移除指定节点

cloneNode()方法，参数为true时，执行深复制（复制节点及子节点树）；false时，执行浅复制（只复制节点本身）

normalize()方法，如果是空文本节点，则删除它；如果是相邻的文本节点，则将它们合并为一个文本节点

2、document

var html = document.documentElement;		//取得对html的引用
var body = document.body;					//取得对body的引用

1）、文档信息：

var title = document.title;					//取得文档标题
document.title = "new page title";			//设置文档标题

var url = document.URL;						//取得完整的URL
var domain = document.domain;				//取得域名
var referrer = document.referrer;			//取得来源页面的URL

2）、查找元素：

getElementById()方法，返回该元素

getElementsByTagName()方法，返回一个HTMLCollection对象，类似NodeList

对于HTMLCollection，可以向方括号中传入数值或字符串形式的索引值。在后台，对数值索引就会调用item()，而对字符串索引就会调用namedItem()。

<img src="1.jpg" name="myImage">

var images = document.getElementsByTagName("img");
//数值索引
alert(images[0].src);			//输出第一个图像的src属性值
alert(images.item(0).src);		//同上
//字符串索引
alert(images["myImage"].src);	//同上
alert(imagse.namedItem(myImage));//同上

3）、文档写入：

document.write()，接收一个字符串参数，表示要写入文档流中的文本

document.write("hello world");
//向文档流中添加文本

window.onload = function() {
	document.write("hello world");
};
//重写文档

3、元素节点

getAttribute()方法，取得节点的属性，接收一个参数：该节点的属性名

setAttribute()方法，设置节点的属性，接收两个参数：属性名和属性值

removeAttribute()方法，移除节点的属性，接收一个参数：属性名

getAttribute()方法和setAttribute()方法可以通过使用对象的属性来替代

someNode.getAttribute("id");
someNode.setAttribute("class", "someOtherClass");

var myId = someNode.id;
someNode.class = "someOtherClass"

document.createElement()方法，创建新的元素节点

4、文本节点

document.createTextNode()创建文本节点

一般情况下，每个元素只有一个文本子节点，不过如果在同一个元素节点上，添加两次文本节点，就产生两个文本节点，这两个文本姐弟啊是相邻的同胞节点，其文本就会连接起来显示，中间不会有空格

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yeah!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);		//hello world!Yeah!
alert(element.childNodes.length);		//2

在文本节点的父元素上调用normalize()方法，将文本节点合并成一个文本节点

element.normalize();
alert(element.childNodes.length);		//1

splitText()方法，将一个文本节点分割成2个文本节点

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue);	//hello
alert(newNode.nodeValue);				//world
alert(element.childNodes.length);		//2

二、DOM操作技术

1、动态脚本

动态加载外部Javascript文件

function loadScript(url) {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = url;
	document.body.appendChild(script);
}

动态加载内部Javascript代码

function loadScriptString(code) {
	var script = document.createElement("script");
	script.type = "text/javascript";
	try {
		script.appendChild(document.createTextNode(code));	//非IE
	} catch (ex) {
		script.text = code;			//IE
	}
	document.body.appendChild(script);
}
loadScriptString("function sayHi() {alert('hi');}");

2、动态样式

动态加载外部css文件

function loadStyles(url) {
	var link = document.createElement("link");
	link.rel = "stylesheet";
	link.type = "text/css";
	link.href = url;
	var head = document.getElementsByTagName('head')[0];
	head.appendChild(link);
}

动态加载内部css

function loadStyleString(css) {
	var style = document.createElement("style");
	style.type = "text/css";
	try {
		style.appendChild(document.createTextNode(css));
	} catch (ex) {
		style.styleSheet.cssText = css;
	}
	var head = document.getElementsByTagName('head')[0];
	head.appendChild(style);
}
loadStyleString("body{background-color:red;}");

3、操作表格

//create table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//create tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//create the first row
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1.1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 1.2"));
//create the second row
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 2.1"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2.2"));
//add table to body
document.body.appendChild(table);

//出现在html中
<table border="1" width="100%">
	<tbody>
		<tr>
			<td>cell 1.1</td>
			<td>cell 1.2</td>
		</tr>
		<tr>
			<td>cell 2.1</td>
			<td>cell 2.2</td>
		</tr>
	</tbody>
</table>

4、使用NodeList

var divs = document.getElementsByTagName('div'),
	i = 0,
	div;
for (var i = 0; i < divs.length; i++) {
	div = document.createElement("div");
	document.body.appendChild(div);
}

上面代码会导致无限循环，因为第一行代码会取得文档中所有div元素的HTMLCollection。这个集合是动态的，当循环对条件divs.length求值时，会又一次查询所有div元素。而循环每次都会添加一个div，所有divs.length每次都在随循环递增，它们的值用于不会相等

var divs = document.getElementsByTagName('div'),
	i = 0,
	len,
	div;
for (var i = 0 len = divs.length; i < len; i++) {
	div = document.createElement("div");
	document.body.appendChild(div);
}

上面代码，将length初始化为变量，只会访问一次divs.length