正文
JS---DOM---点击操作---节点的方式---案例
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
点击操作---节点的方式---案例
案例1：点击按钮,设置p变色---节点的方式做
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid hotpink;
}
</style>
</head> <body>
<input type="button" value="变色" id="btn" />
<div id="dv">
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
<span>谁知盘中餐</span> <br />
<span>粒粒皆辛苦</span> <br />
<a href="#">唐诗宋词</a>
</div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
//先获取div
var dvObj = my$("dv");
//获取里面所有的子节点
var nodes = dvObj.childNodes;
//循环遍历所有的子节点
for (var i = 0; i < nodes.length; i++) {
//判断这个子节点是不是p标签, nodetype是1且nodename是大写的P
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
nodes[i].style.backgroundColor = "pink";
}
}
};
</script>
</body>
</html>
案例2：节点操作隔行变色
（写错一个字母查找bug花了好久时间，.nodes[i].nodeName 多了个s）
<body>
<ul id="uu">
<li>爆炒</li>
<li>油炸</li>
<li>清蒸</li>
<li>红烧</li>
<li>烧烤</li>
<li>糖醋</li>
<li>凉拌</li>
<li>鱼香</li>
</ul>
<input type="button" value="隔行变色" id="btn" /> <script src="common.js"></script>
<script>
my$("btn").onclick = function () {
//获取ul中所有的子节点
var count = 0; //记录有多少li
var nodes = my$("uu").childNodes;
for (var i = 0; i < nodes.length; i++) {
//判断这个节点是不是li标签
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
nodes[i].style.backgroundColor = count % 2 == 0 ? "pink" : "yellow";
count++;
}
}
}; </script>
</body>
案例3：封装节点兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title> </head>
<body>
<ul id="uu">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<script src="common.js"></script>
<script> //获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
if(element.firstElementChild){//true--->支持
return element.firstElementChild;
}else{
var node=element.firstChild;//第一个节点
while (node&&node.nodeType!=1){
node=node.nextSibling;
}
return node;
}
}
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if(element.lastElementChild){//true--->支持
return element.lastElementChild;
}else{
var node=element.lastChild;//第一个节点
while (node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
} console.log(getFirstElementChild(my$("uu")).innerText);
console.log(getLastElementChild(my$("uu")).innerText); //最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
//前一个节点和前一个元素的获取的代码在IE8中可能不支持
//后一个节点和后一个元素的获取的代码在IE8中可能不支持 //学习节点操作还是为了操作元素 </script>
</body>
</html>
案例4：切换背景图片
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>哈哈,我又变帅了</title>
<style>
* {
margin: 0px;
padding: 0px;
} body {
background-image: url("images/1.jpg");
} #mask {
background-color: rgba(255, 255, 255, 0.3);
height: 200px;
text-align: center;
} #mask img {
width: 200px;
margin-top: 35px;
cursor: pointer;
}
</style> </head> <body id="bd">
<div id="mask">
<img src="data:images/1.jpg" alt="">
<img src="data:images/2.jpg" alt="">
<img src="data:images/3.jpg" alt="">
</div>
<script src="common.js"></script>
<script>
//获取的所有的子元素
var imgObjs = my$("mask").children;
for (var i = 0; i < imgObjs.length; i++) {
//循环遍历所有img,注册点击事件
imgObjs[i].onclick = function () {
document.body.style.backgroundImage = "url(" + this.src + ")";
};
} </script>
</body> </html>
案例5：
1. 全选的时候，复选框里面状态和全选一致
2. 复选的时候，循环复选框，有一个不选中全选就flase
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .wrap {
width: 300px;
margin: 100px auto 0;
} table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
} th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} td {
font: 14px "微软雅黑";
} tbody tr {
background-color: #f0f0f0;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head> <body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>油炸榴莲</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>清蒸助教</td>
<td>田老师</td>
</tr> </tbody>
</table>
</div>
<script src="common.js"></script>
<script>
//获取全选的这个复选框
var ckAll = my$("j_cbAll");
//获取tbody中所有的小复选框
var ckSmall = my$("j_tb").getElementsByTagName("input");
//点击全选的这个复选框, 获取他当前的状态, 然后设置tbody中所有复选框的状态
ckAll.onclick = function () {
for (var i = 0; i < ckSmall.length; i++) {
ckSmall[i].checked = this.checked;
}
}; //获取tbody中所有的复选框,分别注册点击事件
for (var i = 0; i < ckSmall.length; i++) {
ckSmall[i].onclick = function () {
var flag = true;//默认都被选中了
for (var j = 0; j < ckSmall.length; j++) {
//判断是否所有的复选框都选中
if (!ckSmall[j].checked) {
flag = false;
break;
}
}
//全选的这个复选框的状态就是flag这个变量的值
ckAll.checked = flag;
};
} </script>
</body> </html>
