第十六天js元素操作练习、HTMLDOM、DOM事件监听
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 重置按钮被点击。