Java后端需要掌握的JS-------DOM
Java后端需要掌握的JS-------DOM
一、什么是DOM
它的全称是Document Object Model
文档对象模型。
作用:将标记语言文档的各个部分,封装成对象,通过这些对象对标记语言文档进行操作(CRUD)
二、DOM的常用对象
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Node:节点对象
Comment:注释对象
上面加黑的是常用的几个对象。
三、常用对象的使用
1.Document文档对象
常用的方法如下:
-
获取Element对象
<input type="button" id="btn"> <h2>我是h2</h2> <div class="div1">我是div</div> <input type="button" name="name" value="按钮"> <script> var btn = document.getElementById("btn");//根据id属性值获取元素对象 var h2 = document.getElementsByTagName("h2");//根据元素名称获取元素对象们。返回值是一个数组 var div1 = document.getElementsByClassName("div1");//根据Class属性值获取元素对象们。返回值是一个数组 var name = document.getElementsByName("name");//根据name属性值获取元素对象们。返回值是一个数组 </script>
主要就是以上四种方法,其中第一个用的最多。
-
创建其余的DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()用的比较多的就是上面的几个了,这里就不举例子了。
2.Element元素对象
常用的方法如下:
1. removeAttribute():删除属性
2. setAttribute():设置属性
3.Node节点对象
1. 这个对象很重要,经常使用,下面的几个方法是常用的方法:
appendChild():向节点的子节点列表的结尾添加新的子节点。
removeChild() :删除(并返回)当前节点的指定子节点。
replaceChild():用新节点替换一个子节点。
使用上面的三个方法可以对dom树进行CRUD
2.很重要的一个属性
parentNode
:返回节点的父节点(俗称找爸爸)
四、其他常用
1.标签体的设置和获取:innerHTML
这个在今后的开发中常常用的到,举个简单的例子,你就知道它的功能强大了。
实现动态表格案例:
普通版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table id="table">
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<script>
//1.获取btn
var btn_add = document.getElementById("btn_add");
//2.绑定单击事件
btn_add.onclick = function(){
//获取每一个输入框内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//获取表格
var table = document.getElementById("table");
//创建tr
var tr = document.createElement("tr");
//创建td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
tr.appendChild(td_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
tr.appendChild(td_name);
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
tr.appendChild(td_gender);
var td_option = document.createElement("td");
var a = document.createElement("a");
a.setAttribute("href","javascript:void(0);");
a.setAttribute("onclick","delTr(this)");
var text_a = document.createTextNode("删除");
a.appendChild(text_a);
td_option.appendChild(a);
tr.appendChild(td_option);
table.appendChild(tr);
}
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
上面我们使用CRUD来实现的,代码很复杂,并且很容易出错,再看下面的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<script>
//使用innerHTML添加
document.getElementById("btn_add").onclick = function() {
//2.获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//获取table
var table = document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML += "<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +
" </tr>";
}
//删除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
显而易见,开发中会选择后者,关于innerHTML的操作还有好多用处,后面的博客里还会接收到。
五、事件
常见的事件:
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件
1. onblur:失去焦点
2. onfocus:元素获得焦点。
3. 加载事件:
1. onload:一张页面或一幅图像完成加载。
4. 鼠标事件:
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件:
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。
本文地址:https://blog.csdn.net/qq_39594037/article/details/107471532
下一篇: 从PDF中提取指定内容的文本(需要去重)