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),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
随机推荐
- 华为云DevCloud为开发者提供高效智能的可信开发环境
在HUAWEI CONNECT 2019期间,在华为云云服务开发者分论坛上,华为云布道师做了<CloudIDE:开发者的高效.智能的可信开发环境>专题演讲,主要介绍了华为云DevCloud ...
- su和sudo的区别与使用
一. 使用 su 命令临时切换用户身份 1.su 的适用条件和威力 su命令就是切换用户的工具,怎么理解呢?比如我们以普通用户beinan登录的,但要添加用户任务,执行useradd ,beina ...
- Dict.setdefault()
""" setdefault方法参数输入已有键,返回对应值,找不到已有键,创建新键,值为None """ >>> dict ...
- MRC ARC 混编
今天一个人问我 什么是MRC 什么是ARC 要是一个工程里用到了MRC和ARC 怎么办 我当时就无语了 什么情况 这是.... 好了正经一点 我说一下iOS5.0以后就开始可以使用ARC( Aut ...
- tensorflow处理mnist(一)
这个文章是对google官方教程的解释 预备知识 神经网络卷积,神经网络原理 argmaxsum axis tensorflow里面有类似的函数,含义和numpy中的一样. tensorflow最基础 ...
- Mybatis获取自动增长Id
Mybatis获取自动增长Id MyBatis成功插入后获取自动增长的id 1.向xxMapping.xml配置中加上两个配置. <insert id="insertUser" ...
- srvany.exe读取配置文件问题
使用instsrv.exe与srvany.exe将自己的程序弄成免登录系统就能自动启动了,然而程序运行需要读取相应的配置文件,所以程序是跑起来了,但不能正常使用,找了很久终于找到了答案.在之前的基础上 ...
- Caffe源码-Solver类
Solver类简介 Net类中实现了网络的前向/反向计算和参数更新,而Solver类中则是对此进行进一步封装,包含可用于逐次训练网络的Step()函数,和用于求解网络的优化解的Solve()函数,同时 ...
- LeetCode刷题总结-哈希表篇
本文总结在LeetCode上有关哈希表的算法题,推荐刷题总数为12题.具体考察的知识点如下图: 1.数学问题 题号:149. 直线上最多的点数,难度困难 题号:554. 砖墙,难度中等(最大最小边界问 ...
- Microsemi Libero使用技巧——FPGA全局网络的设置
前言 刚开始做Microsemi FPGA+SoC开发时,会用到几个ARM专用的IP Core,功能一复杂起来,就会遇到某些信号如rst_n不能分配到指定的引脚上的情况,IO类型为CLKBUF,并不是 ...