JavaScript 之 DOM

JavaScript 之 DOM
1. DOM

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

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

节点树
- 文档是一个文档节点。
- 所有的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>
```
相关阅读:
Dotfuscator 保护您的应用程序
 IOS 类方法
 播放音乐与视频
 windows phone 手机信息的查看
 更改枢轴视图的Item字的大小
 IOS 总结
 Windows Phone 中HttpWebRequest用法
 关于Listbox的 SelectionChanged 事件（同一个Item只触发一次问题）
windows phone 标准色值
 IOS GPS 定位
原文地址：https://www.cnblogs.com/a-peppa-pig/p/9460164.html

JavaScript 之 DOM

1. DOM