第一章 JavaScript --下
2.5.6 DOM操作
由于实际开发时基本上都是使用JavaScript的各种框架来操作,而框架中的操作方式和我们现在看到的原生操作完全不同,所以下面罗列的API仅供参考,不做要求。
2.5.6.1 在整个文档范围内查询元素节点
功能 |
API |
返回值 |
根据id值查询 |
document.getElementById(“id值”) |
一个具体的元素节 |
根据标签名查询 |
document.getElementsByTagName(“标签名”) |
元素节点数组 |
根据name属性值查询 |
document.getElementsByName(“name值”) |
元素节点数组 |
根据类名查询 |
document.getElementsByClassName(“类名”) |
元素节点数组 |
2.5.6.2 在具体元素节点范围内查找子节点
功能 |
API |
返回值 |
查找子标签 |
element.children |
返回子标签数组 |
查找第一个子标签 |
element.firstElementChild 【W3C考虑换行,IE≤8不考虑】 |
标签对象 |
查找最后一个子标签 |
element.lastElementChild 【W3C考虑换行,IE≤8不考虑】 |
节点对象 |
2.5.6.3 查找指定元素节点的父节点
功能 |
API |
返回值 |
查找指定元素节点的父标签 |
element.parentElement |
标签对象 |
2.5.6.4 查找指定元素节点的兄弟节点
功能 |
API |
返回值 |
查找前一个兄弟标签 |
node.previousElementSibling 【W3C考虑换行,IE≤8不考虑】 |
标签对象 |
查找后一个兄弟标签 |
node.nextElementSibling 【W3C考虑换行,IE≤8不考虑】 |
标签对象 |
扩展内容(根据选择器查找标签)
功能 |
API |
返回值 |
根据选择器查找一个标签 |
document.querySelector(“选择器”) |
标签对象 |
根据选择器查找多个标签 |
document.querySelectorAll(“选择器”) |
标签数组 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM查找节点</title>
</head>
<body>
<input type="text" id="username">
<input type="text" class="c1">
<input type="text" class="c1">
<div>
<div></div>
<div></div>
</div>
<script>
var elementById = document.getElementById("username");
var elementsByClassName = document.getElementsByClassName("c1");
var elementsByTagName = document.getElementsByTagName("input");
var children = document.getElementsByTagName("body")[0].children;
var parentNode = document.getElementById("username").parentNode;
var previousElementSibling = document.getElementById("username").previousElementSibling;
var nextElementSibling = document.getElementById("username").nextElementSibling;
var ipt1 = document.querySelector("#username");
var ipts = document.querySelectorAll("body div");
var i1 = document.querySelector("#username+input");
var i2 = document.querySelectorAll("#username~input");
console.log(i2)
</script>
</body>
</html>
2.5.6.5 属性操作
需求 |
操作方式 |
读取属性值 |
元素对象.属性名 |
修改属性值 |
元素对象.属性名=新的属性值 |
2.5.6.6 标签体的操作
需求 |
操作方式 |
获取或者设置标签体的文本内容 |
element.innerText |
获取或者设置标签体的内容 |
element.innerHTML |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作标签的属性和文本</title>
</head>
<body>
<input type="text" id="username" name="username" />
<div id="d1">
<h1>你好世界</h1>
</div>
<script>
var ipt = document.getElementById("username");
ipt.value = "张三"
var value = ipt.value;
console.log(value)
var innerText = document.getElementById("d1").innerText;
console.log(innerText)
var innerHTML = document.getElementById("d1").innerHTML;
console.log(innerHTML)
document.getElementById("d1").innerHTML = "<h1>hello world</h1>"
</script>
</body>
</html>
2.5.6.7 DOM增删改操作
API |
功能 |
document.createElement(“标签名”) |
创建元素节点并返回,但不会自动添加到文档中 |
document.createTextNode(“文本值”) |
创建文本节点并返回,但不会自动添加到文档中 |
element.appendChild(ele) |
将ele添加到element所有子节点后面 |
parentEle.insertBefore(newEle,targetEle) |
将newEle插入到targetEle前面 |
parentEle.replaceChild(newEle, oldEle) |
用新节点替换原有的旧子节点 |
element.remove() |
删除某个标签 |
element.innerHTML |
读写HTML代码 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建和删除标签</title>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="sz">深圳</li>
<li id="gz">广州</li>
</ul>
<script>
var liElement = document.createElement("li");
liElement.id = "cs"
liElement.innerText = "长沙"
var cityUl = document.getElementById("city");
var szElement = document.getElementById("sz");
cityUl.innerHTML = ""
</script>
</body>
</html>
2.5.7 JavaScript的事件驱动(很重要)
2.5.7.1 事件的概念
- HTML 事件是发生在 HTML 元素上的“事情”, 是浏览器或用户做的某些事情
- 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。
2.5.7.2 常见事件
属性 |
此事件发生在何时… |
onclick |
当用户点击某个对象时调用的事件句柄。 |
ondblclick |
当用户双击某个对象时调用的事件句柄。 |
onchange |
域的内容被改变。 |
onblur |
元素失去焦点。 |
onfocus |
元素获得焦点。 |
onload |
一张页面或一幅图像完成加载。 |
onsubmit |
确认按钮被点击;表单被提交。 |
onkeydown |
某个键盘按键被按下。 |
onkeypress |
某个键盘按键被按住。 |
onkeyup |
某个键盘按键被松开。 |
onmousedown |
鼠标按钮被按下。 |
onmouseup |
鼠标按键被松开。 |
onmouseout |
鼠标从某元素移开。 |
omouseover |
鼠标移到某元素之上。 |
onmousemove |
鼠标被移动。 |
2.5.7.3 事件绑定的方式
2.5.7.3.1 普通函数方式
说白了设置标签的属性
<标签 属性="js代码,调用函数"></标签>
2.5.7.3.2 匿名函数方式
<script>
标签对象.事件属性 = function(){
}
</script>
2.5.7.4 事件的使用介绍
-
点击事件
需求: 没点击一次按钮 弹出hello…
<input type="button" value="按钮" onclick="fn1()">
<input type="button" value="另一个按钮" id="btn">
<script>
function fn1() {
alert("我被点击了...")
}
let btn = document.getElementById("btn");
btn.onclick = function () {
console.log("点击了另外一个按钮")
}
</script>
-
获得焦点(onfocus)和失去焦点(onblur)
需求:给输入框设置获得和失去焦点
var ipt = document.getElementById("ipt");
ipt.onfocus = function () {
console.log("获取焦点了...")
}
ipt.onblur = function () {
console.log("失去焦点了...")
}
-
内容改变(onchange)
需求: 给select设置内容改变事件
<body>
<select onchange="changeCity(this)">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
</body>
<script>
function changeCity(obj) {
console.log("城市改变了"+obj.value);
}
</script>
-
键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)
ipt.onkeydown = function () {
}
ipt.onkeyup = function () {
console.log(ipt.value)
}
-
鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)
ipt.onmouseover = function () {
console.log("鼠标移入了...")
}
ipt.onmouseout = function () {
console.log("鼠标移出了...")
}
2.5.7.5 综合案例
需求
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例</title>
<style>
table,tr,td,th{
border: 1px solid black;
width: 500px;
text-align: center;
margin: auto;
}
div{
text-align: center;
}
</style>
</head>
<body>
<table cellspacing="0" id="tb">
<tr>
<th>序号</th>
<th>用户名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>
<button onclick="deletePerson(this)">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
<td>
<button onclick="deletePerson(this)">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>
<button onclick="deletePerson(this)">删除</button>
</td>
</tr>
</table>
<div>
<form action="#">
序号<input type="text" name="num" id="num"><br/>
用户<input type="text" name="username" id="username"/><br/>
性别<input type="text" name="gender" id="gender"/><br/>
<input type="button" value="添加用户" onclick="addPerson()"/>
</form>
</div>
<script>
function deletePerson(obj) {
obj.parentElement.parentElement.remove()
}
function addPerson() {
var numElement = document.getElementById("num");
var num = numElement.value;
var usernameElement = document.getElementById("username");
var username = usernameElement.value;
var genderElement = document.getElementById("gender");
var gender = genderElement.value;
var trElement = document.createElement("tr");
trElement.innerHTML = "<td>"+num+"</td>\n" +
" <td>"+username+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td>\n" +
" <button οnclick=\"deletePerson(this)\">删除</button>\n" +
" </td>"
var tb = document.getElementById("tb");
tb.appendChild(trElement)
numElement.value = ""
usernameElement.value = ""
genderElement.value = ""
}
</script>
</body>
</html>