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>
案例6:
JS---DOM---点击操作---节点的方式---案例的更多相关文章
- JS DOM用不同方法获取节点及对节点插入、复制和移除
操作节点的方法 appendChild() insertBefore() replaceChild() cloneNode() normalize() splitText() sppendChild( ...
- JS DOM元素的操作(创建,添加,删除,和修改属性)
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- JS DOM之表格操作
一个能给添加行的表格 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- js dom操作获取节点的一些方法
在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...
- js dom 操作技巧
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
- js基础总结01 --操作DOM
1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...
- JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
随机推荐
- [TimLinux] MySQL 导入sql文件数据慢的问题解决办法
慢的时候执行的命令: mysql -uusername -p -hip_address -Ddb_name < ./db.sql 快的时候执行的命令: mysql -uusername -p - ...
- HDU5343 MZL's Circle Zhou(SAM+记忆化搜索)
Problem Description MZL's Circle Zhou is good at solving some counting problems. One day, he comes u ...
- 最全的三剑客和linux正则符号讲解
第2章 linux符号系列与三剑客 194 2.1 特殊符号系列 194 2.1.1 普通符号系列 194 2.1.2 引号符号系列 196 2.1.3 定向符号 197 ...
- ARTS-S sed替换
网上有大量替换的例子,比如 sed 's/aaa/bbb/g' a.txt 其实分隔符可以用别的字符,比如#,所以下面的命令也是正确的 sed 's#aaa#bbb#g' a.txt 用#号在用环境变 ...
- Orleans 序列化遇到的坑
真的是巨坑 搞明白问题的我简直无法用言语来描述我的心情 先上架构图 理想中的架构 服务随便上 网关只负责分发 然后跟随官方教程写遇到了序列化问题 以前有经验,不慌,以前稀里糊涂就搞定了. 再然后遇到一 ...
- Tesseract-OCR 字体库下载地址
https://github.com/tesseract-ocr/tesseract/wiki/Data-Files
- 工具类中注入service和dao
今天编写了个工具类需要用到service成和dao层的代码 如下: //第一步:需要将工具类注入到容器中 @Component public class RuleUtils { //第二部注入 @ ...
- 【JS】336- 拆解 JavaScript 中的异步模式
点击上方"前端自习课"关注,学习起来~ JavaScript 中有很多种异步编程的方式.callback.promise.generator.async await 甚至 RxJS ...
- Java 从入门到进阶之路(十三)
在之前的文章我们介绍了一下 Java 类的 private,static,final,本章我们来看一下 Java 中的抽象类和抽象方法. 我们先来看下面一段代码: // 根据周长求面积 class S ...
- centos7 启动停止命令
apache启动systemctl start httpd停止systemctl stop httpd重启systemctl restart httpd mysql启动systemctl start ...