JavaScript高级程序设计(反刍) 9

第10章：

DOM是针对HTML和XML文档的一个API接口，关于DOM的内容在上一本书《JavaScript DOM编程艺术》中有了大体的描述，本章主要补充在上书中不存在的内容。

（注意：在IE中所有的DOM对象都是通过COM对象的形式实现的，这里单指IE8之前）

节点之间的关系：

操作节点：
增加节点：appendChild() 添加一个末尾子节点
InsertBefore() 添加一个节点，并指明节点添加在谁前面
删除节点：removeChild() 删除一个节点
改变节点：replaceChild() 要插入的节点和要替换的节点，也就是将哪个节点替换为另一个节点

深复制和浅复制：
使用cloneNode()方法进行复制节点的操作，该方法接收一个Boolean类型的操作值，当值为true是执行深复制，即将该节点与下面的所有子节点一一复制。而当值为false是执行浅复制，仅仅复制该节点。通过复制得到的节点还仅仅是一个单纯的文档，并没有节点树可以附着，所以需要使用添加方法将其添加入节点树才可以使用。

取得属性和写入属性使用**getAttribute()方法和setAttribute()方法
使用createElement()方法创建节点，可以一点点儿的创建并添加属性，也可以使用双引号直接写出全部的节点代码
注意子节点这个部分，书写的时候不同的浏览器存在不同的解析方式，尤其是IE。很多时候IE会把换行的子节点理解为中间添加了一个Text节点
使用createTextNode()方法创建一个文本节点
使用normalize()**方法会将所有的子文本节点合成一个，而使用splitText()方法则会将文本节点分为两个节点，参数指定分割位置

元素节点的nodeType=1，文本节点的nodeType=3，注释节点的nodeType=8

DOM操作表格：
比较笨的方法就是先createElement一个table，向这个table中appendChild几个createElement的tr，向tr中appendChild几个td，循环这种方式。
（自己封装的小方法，用于直接创建table和设置有table内特定位置的值，需要注意，这里并没有写入数据验证的细节，工程化的代码中必须加入验证这一环节，希望有引用的兄弟加上验证，避免bug）

var tableL = document.createElement("table");
tableL.border = 1;
tableL.width = "100%";
tableL.id = "ces"
document.body.appendChild(tableL);

createTable(3,3);
modifyTable(abc, 2, 2, "456");

function createTable(trH, tdH){                        //创建一个几行，几列的表格
	/*这里应该有数据验证环节*/
	for(var i=0; i<trH; i++){
		tableL.insertRow(i);
		for(var j=0; j<tdH; j++){
			tableL.rows[i].insertCell(j);
			tableL.rows[i].cells[j].appendChild(document.createTextNode("cell"+i+j)); 
		}
	}
}

function modifyTable(tableName, trH, tdH, TextValue){  //参数：表格名，第几行，第几列。参数变成什么
	/*这里应该有数据验证环节*/
	var xg = document.getElementById(tableName.id);
	xg.rows[trH].cells[tdH].innerHTML = TextValue;
}