JavaScript笔记11：DOM文档对象模型的时间、方法_javascript文档对象模型时间-CSDN博客

本文链接：https://blog.csdn.net/Lanhaorena/article/details/109148846

DOM：文档对象模型
1. DOM（Document Object Model），文档对象模型
  1. 文档：整个HTML网页文档
  2. 对象：将网页中的每一个部分都转换为一个对象
  3. 模型：使用模型来表示对象之间的关系，这样方便我们获取对象
2. 节点（Node）
  1. 网页中的每一个部分都可以称为是一个节点
  2. 分为四类：
    1. 文档节点：整个HTML文档
    2. 元素节点：HTML文档中的HTML标签
    3. 属性节点：元素的属性
    4. 文本节点：HTML标签中的文本内容
  3. 文档节点：
    1. 浏览器已经为我们提供了文档节点对象，这个对象是window属性。可以在页面直接使用，文档节点代表整个网页

事件

事件是用户和浏览器的交互行为
各种事件：https://www.runoob.com/jsref/dom-obj-event.html

事件的使用：

<body>
	<button id="btn">我是一个按钮</button>
	<!--方式1-->
	<button id="btn2" onclick="alert('你点我干嘛？')">我是一个按钮2</button>
	
	<!--方式2，写在head中会不起作用，因为是自上而下执行的-->
	<script type="text/javascript">
		// 获取按钮对象
		var btn = document.getElementById("btn");
		// 绑定一个单击事件，为单击事件绑定的函数称为单击响应函数
		btn.onclick = function(){
			alert('你点我干嘛？');
		};
	</script>
</body>

事件想要写在head里，可以使用window.onload里。onload事件对应的响应函数将会在页面加载完成之后执行，可以确保所有DOM对象加载完毕

window.onload = function(){
   var btn = document.getElementById("btn");
	// 绑定一个单击事件，为单击事件绑定的函数称为单击响应函数
	btn.onclick = function(){
		alert('你点我干嘛？');
	}; 
}

DOM的一些方法

通过document对象调用
1. getElementByID()
  1. 方法，通过id属性获取一个元素节点对象
2. getElementsByTagName()
  1. 方法，通过标签名获取一组元素节点对象
3. getElementsByName()
  1. 方法，通过name属性获取一组元素节点对象
获取元素节点的子节点
1. getElementsByTagName()方法
  1. 返回当前节点的指定标签名后代节点
2. childNodes
  1. 属性，表示当前节点的所有子节点
3. firstChild
  1. 属性，表示当前节点的第一个子节点
4. lastChild
  1. 属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

parentNode
1. 属性，表示当前节点的父节点
previousSibling
1. 属性，表示当前节点的前一个兄弟节点

nextSibling

属性，表示当前节点的最后一个兄弟节点

// 获取body标签
				var body1 = document.getElementsByTagName("body");
				// document.body，它保存的是body的引用，所以获取body可直接调用该属性
				var body2 = document.body;
				console.log(body1 + "    " + body2)
				
				// document.documentElement保存的是html跟标签
				var html =  document.documentElement
				console.log(html)
				
				// document.all代表页面中所有的元素
				var all = document.all
				for(var i = 0; i<all.length; i++){
					console.log(all[i]);
				}
				
				// getElementsByClassName()：根据元素的class属性值查询一组元素节点对象，该方法不支持IE8及以下的浏览器
					// IE8中可以使用querySelector("")
				var box1 = document.getElementsByClassName("box1");
				console.log(box1.length);
				
				// querySelector("")方法可以根据一个CSS选择器来查询一个元素节点对象
					// 只返回一个，如果有多个，只会返回第一个
				var div = document.querySelector(".box1 div");
				console.log(div.innerHTML);
				
				// querySelectorAll()和querySelector()类似，但是会把所有满足条件的元素封装在一个数组中返回，即使是一个元素也会封装成数组
				box1 = document.querySelectorAll(".box1");
				box2 = document.querySelectorAll("#box2");

DOM的删除和添加

<script>
	
	window.onload = function(){
		/*
		 * 删除
		 * 点击删除键删除一个记录
		 */
		
		// 写一个删除函数，可用于绑定事件
		function delA(){
			// 点击超链接之后需要删除超链接所在的行
				// 使用this，点击谁，this就表示谁
					// 此处this表示的是超链接，连续两个父亲
			var tr = this.parentNode.parentNode;
			
			// 获取删除员工的名字，同于删除提示中
			var name = tr.getElementsByTagName("td")[0].innerHTML;
			
			// 删除之前给个提示
				// confirm()用于弹出一个带有确认和取消按钮的提示框；需要一个字符串作为参数，该字符串作为提示文字
					// 选择结果会返回，确认返回true，取消返回false
			if( confirm("是否确认删除" + name +"？") ){
				// 删除tr
				tr.parentNode.removeChild(tr);
			}
			
			/*
			 * 点击超链接后，超链接会跳转页面，早上超链接的默认行为
			 * 当不希望跳转页面时，可以通过在响应函数的最后添加“return false”来取消默认行为
			 */
			return false;
		}
		
		// 获取所有超链接
		var allA = document.getElementsByTagName("a");
		
		// 为每个超链接都绑定一个点击响应函数
		for(var i = 0; i < allA.length; i++){
			// 绑定单击事件为删除。注意不要写delA()
			allA[i].onclick = delA;
		}
		
		
		/*
		 * 添加
		 * 点击添加添加一条员工信息
		 */
		
		// 为提交按钮绑定一个单击响应函数
		var addEmpButton = document.getElementById("addEmpButton");
		addEmpButton.onclick = function(){
			// 获取员工填写的信息
				// 获取员工的name
			var name = document.getElementById("empName").value;
				// 获取员工的email
			var email = document.getElementById("email").value;
				// 获取员工的名字salary
			var salary = document.getElementById("salary").value;
			
			
			// 创建一个tr
			var tr = document.createElement("tr");
			
			// 设置tr中的内容
			tr.innerHTML = "<td>"+name+"</td>"+
							"<td>"+email+"</td>"+
							"<td>"+salary+"</td>"+
							"<td><a href='javascript:;'>Delete</a></td>"
			// 获取刚刚添加的a元素
			var a = tr.getElementsByTagName("a")[0];
			// 为a绑定单击点击响应函数
			a.onclick = delA;

			// 获取table
			var employeeTable = document.getElementById("employeeTable");
			// 获取employeeTable中的tbody
			var tbody = employeeTable.getElementsByTagName("tbody")[0];
			// 将tr添加到tbody中
			tbody.appendChild(tr);
		}
	}
</script>


<body>
	<table id="employeeTable" border="1px">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		
	</table>
	
	<div id="formDiv">
		<h4>添加员工</h4>
		<table border="1px">
			<tr>
				<td class="word">name:</td>
				<td class="inp"><input type="text" name="empName" id="empName" /></td>
			</tr>
			<tr>
				<td class="word">email:</td>
				<td class="inp"><input type="text" name="email" id="email" /></td>
			</tr>
			<tr>
				<td class="word">salary:</td>
				<td class="inp"><input type="text" name="salary" id="salary" /></td>
			</tr>
			<tr>
				<td colspan="2" align=""center" ">
					<button id="addEmpButton" value="abc">Submit</button>
				</td>
			</tr>
		</table>
		
	</div>
	
</body>