第十六天js元素操作练习、HTMLDOM、DOM事件监听

最新推荐文章于 2025-09-02 10:26:55 发布

原创最新推荐文章于 2025-09-02 10:26:55 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用JavaScript进行元素操作，包括添加、删除及修改元素，并深入探讨DOM事件监听机制，如点击、焦点和加载事件等。

第十六天js元素操作练习、HTMLDOM、DOM事件监听

1. 元素操作练习
2. HTMLDOM
2. DOM事件监听机制
- 2.1概念
- 2.2 常见的事件：

1. 元素操作练习

<html>
	<head>
		<title>学生信息表</title>
		<!--分析
			添加功能
			1.点击事件onclick方法
			2.使用getValue获取三个input中的value
			3.在表格的tr最末添加tr元素使用sppendChild()
			删除功能
			1.点击事件获取td的父节点tr，使用parentNode。
			2.删除改节点
		-->
		<style>
			div{
				border:1px solid red;
			}
			#div1{
				margin:0 auto;
				width:700px;
				height:25px;
			}
			table,tr,td,th{
				border:1px solid #000;
			}
		</style>
	</head>
	<body>
	<script>
			<!-- 画输入框 -->
			document.write('<div id="div1">');
			document.write('<input id="number_id" value="编号" type="text"/>');
			document.write('<input id="name_id" value="姓名" type="text"/>');
			document.write('<input id="gender_id" value="性别" type="text"/>');
			document.write('<input id="apoend_id" value="添加" type="button"/>');
			document.write('</div>');
			<!-- 画表格 -->
			document.write('<div id="div2">');
			document.write('<table id="table_id">');
			document.write('<tr>');
			document.write('<td>');
			document.write('编号');
			document.write('</td>');
			document.write('<td>');
			document.write('姓名');
			document.write('</td>');
			document.write('<td>');
			document.write('性别');
			document.write('</td>');
			document.write('</tr>');
			
			
			
			document.write('</table>');
			
			
			var apoend_id = document.getElementById("apoend_id");
			apoend_id.onclick = function(){
				<!-- 1.获取值 -->
				var div1 = document.getElementById('div1');
				number = div1.childNodes[0].value;
				name = div1.childNodes[1].value;
				gender = div1.childNodes[2].value;
				<!-- 2.创建 -->
				var tr = document.createElement("tr");
				var tr = document.createElement("tr");
				<!-- id -->
				var id_td = document.createElement("td");
				var id_td_text = document.createTextNode(number);
				id_td.appendChild(id_td_text);
				tr.appendChild(id_td);
				<!-- name -->
				var name_td = document.createElement("td");
				var name_td_text = document.createTextNode(name);
				name_td.appendChild(name_td_text);
				tr.appendChild(name_td);
				<!-- gender -->
				var gender_td = document.createElement("td");
				var gender_td_text = document.createTextNode(gender);
				gender_td.appendChild(gender_td_text);
				tr.appendChild(gender_td);
				<!-- a -->
				var a_td = document.createElement("td");
				var a = document.createElement("a");
				a.setAttribute("href","javascript:void(0);");
				a.setAttribute("onclick","delTr(this)");
				var a_text = document.createTextNode("删除");
				a.appendChild(a_text);
				a_td.appendChild(a);
				tr.appendChild(a_td);
				<!-- 添加 -->
				var table = document.getElementsByTagName("table")[0];
				table.appendChild(tr);
			}
			function delTr(obj){
				var table = obj.parentNode.parentNode.parentNode;
				var tr = obj.parentNode.parentNode;
				table.removeChild(tr);
			}
		</script>
	</body>
</html>

2. HTMLDOM

1.标签体的设置和获取：innerHTML
2.控制元素样式
使用元素的style属性来设置

div1.style.border = "1px solid red";
div1.style.width = "200px";

提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

div2.className = "定义好的css样式名称";

2. DOM事件监听机制

2.1概念

某些组件被执行了某些操作后，触发某些代码的执行

2.2 常见的事件：

点击事件：
onclick：单击事件
ondblclick：双击事件
焦点事件
onblur：失去焦点
onfocus:元素获得焦点。
加载事件：
onload：一张页面或一幅图像完成加载。
鼠标事件：
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
键盘事件：
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
选择和改变
onchange 域的内容被改变。
onselect 文本被选中。
表单事件：
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。