JavaScript 之 DOM

1. DOM

DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

节点树

HTML DOM Node Tree

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

Document文档对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

标签元素的操作

1）获得元素对象：

根据id获得一个元素：getElementById(id属性值)

根据标签名称获得多个元素：getElementsByTagName(标签名称)

根据class属性获得多个元素：getElementsByClassName(class的属性值)

根据name属性获得多个元素：getElementsByName(name属性值)

2）创建一个新元素：createElement()

3）将元素放到某个父元素的内部：appendChild()

4）删除节点：removeChild（）

5）将一个子节点替换成另一个： replaceChild（newnode,oldnode）

            //创建节点
			var oBox = document.getElementById("box");
			var oDiv = document.createElement("div");
			var oTxt = document.createTextNode("hello dom");
			oDiv.appendChild(oTxt);
			oBox.appendChild(oDiv);
			
			//修改节点
			var oDiv = document.createElement("div");
			var oBox = document.getElementById("box");
			var oP = oBox.getElementsByTagName("p")[0];
			var oSpan = document.getElementsByTagName("span")[0];
			
			//var oBody = document.getElementsByTagName("body")[0];
			//document.body.replaceChild(oDiv,oSpan);
			//oBody.replaceChild(oDiv,oSpan)
			
			//删除节点
			
			oBox.removeChild(oP);

属性的操作

获得属性的值：getAtrribute(name)

设置属性的值：setAtrribute(name,value)

删除某个属性：removeAtrribute(name)

children & childNodes

获得子元素节点

children 常用，childNodes 会把换行也输出为text。

innerHTML & outerHTML & innerText

innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。可读可写

outerHTML 返回调用它的元素及所有子节点的 HTML 标签。可读可写

innerText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过 innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过 innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。

firstChild/lastChild/parentNode/previousSibling/nextSibling

第一个子节点，最后一个子节点，父亲节点，上一个兄弟节点，下一个兄弟节点

*** firstChild & firstElementChild 第一个子节点

现代浏览器支持这两个 IE低版本不支持firstElementChild。

兼容写法： oFirst=oUl.firstElementChild || oUl.firstChild （前后顺序不可颠倒）

实现表格的添加删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		姓名：<input type="text">年龄：<input type="text">性别：<input type="text"><input type="button" value="添加">
		<table>
			
		</table>
		<script type="text/javascript">
			var aInput = document.getElementsByTagName("input");
			var len = aInput.length;
			var oTable = document.getElementsByTagName("table")[0];

			aInput[aInput.length-1].onclick = function(){
				
				var oTr = document.createElement("tr");
				for(var i = 0; i < len-1; i++){
					var oTd = document.createElement("td");
					//var oTxt = document.createTextNode(aInput[i].value);
					oTd.innerHTML = aInput[i].value;
					oTr.appendChild(oTd);
				}
				
				/*var oBtn = document.createElement("input");
				oBtn.type = "button";
				oBtn.value = "删除";
				oTr.appendChild(oBtn);*/
				oTr.innerHTML += "<td><input type='button' class='delBtn' value='删除'></td>";
				oTable.appendChild(oTr);
				
				var oDelBtn = document.getElementsByClassName("delBtn");
					/*for(var i = 0; i < oDelBtn.length; i++){
						oDelBtn[i].onclick = function(){
							oTable.removeChild(this.parentNode.parentNode);
							//console.log(this.parentNode.parentNode);
						}
					}*/
					oDelBtn[oDelBtn.length - 1].onclick = function(){
							oTable.removeChild(this.parentNode.parentNode);
					}
				
			}
			
			
		</script>
	</body>
</html>