3-31 javascript
DOM
获取元素节点的子节点
●通过具体的元素节点调用.
- getElementsBy TagName()
- 方法,返回当前节点的指定标签名后代节点
- childNodes ,
- 属性,表示当前节点的所有子节点
- childNodes属性会获取包括文本节点在内的所有节点
- 根据DOM标签标签间空白也会当成文本节点
- children属性可以获取当前元素的所有子元素
- firstChild
- 属性,表示当前节点的第一 个子节点
- lastChild
- 属性,表示当前节点的最后一个子节点
获取父节点和兄弟节点
通过具体的节点调用
- parentNode
- 属性,表示当前节点的父节点
- previousSibling
- 属性,表示当前节点的前一个兄弟节点
- 会获取包括文本节点在内的所有节点
- previous ElementSibling
- 属性,获取前一个兄弟元素,IE8及以下不支持
- nextSibling
- 属性,表示当前节点的后-个兄弟节点
innerText:
- 该属性可以获取到元素内部的文本内容
- 它和innerHTML类似,不同的是它会自动将html去除
全选练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="D:\wpp快好好学习\前端\代码\前端基础\bread.png" type="image/x-icon">
<title>3-31 全选练习</title>
<style>
* {
margin: 0;
padding: 0;
}
.first {
width: 500px;
margin: 0 auto;
padding-top: 100px;
}
.box {
width: 500px;
height: 500px;
background-color: beige;
}
.btn {
border: 0px;
background-color: rgb(162, 231, 208);
padding: 5px 10px 5px 10px;
margin: 10px;
cursor: pointer;
}
.btn:hover {
border: 0px;
background-color: rgb(151, 240, 210);
padding: px 10px 5px 10px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="first">
<div class="box">
<div style="padding: 20px;">
<p style="font-size: 20px;">请选择你最喜欢的老公:</p>
<input type="checkbox" name="hus" value="张艺兴" />张艺兴
<input type="checkbox" name="hus" value="曾柯朗" />曾柯朗
<input type="checkbox" name="hus" value="檀健次" />檀健次
<input type="checkbox" name="hus" value="汪苏泷" />汪苏泷
<br><br>
<button class="btn" id="checkAll">全选</button>
<button class="btn" id="noCheck">全不选</button>
<button class="btn" id="reCheck">反选</button>
<button class="btn" id="send">提交</button>
</div>
</div>
</div>
<script>
window.onload = function () {
// checkAll
var checkAll = document.getElementById("checkAll");
var noCheck = document.getElementById("noCheck");
var reCheck = document.getElementById("reCheck");
var send = document.getElementById("send");
checkAll.onclick = function () {
var checkbox = document.getElementsByName("hus");
for (let i = 0; i < checkbox.length; i++) {
checkbox[i].checked = true;
};
};
noCheck.onclick = function () {
var checkbox = document.getElementsByName("hus");
for (let i = 0; i < checkbox.length; i++) {
checkbox[i].checked = false;
};
};
reCheck.onclick = function () {
var checkbox = document.getElementsByName("hus");
for (let i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked == true) {
checkbox[i].checked = false;
}
else{
checkbox[i].checked = true;
}
};
};
send.onclick = function () {
var sendAll = document.getElementsByName("hus");
for (let i = 0; i < sendAll.length; i++) {
if (sendAll[i].checked == true) {
alert("我最喜欢 "+sendAll[i].value+" 宝贝啦!!");
}
}
}
}
</script>
</body>
</html>
全选练习