js获取标签的三种方式
2024-09-02 07:32:22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li{
color: black;
}
ul li.active{
color: red;
}
</style>
</head>
<body>
<div id="box">MJJ</div>
<ul id="box2">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
// 1.通过id获取单个节点对象
var box = document.getElementById('box');
console.log(box);
console.dir(box);
// // 2.通过标签名来获取节点对象
// var box2 = document.getElementsByTagName('div');
// console.log(box2);
// var lis = document.getElementsByTagName('li');
// for(var i = 0; i < lis.length; i++){
// // lis[i].className = 'active';
// lis[i].onclick = function(){
// // this指向了绑定onclick的那个对象
// // 排他思想
// for(var j = 0; j < lis.length; j++){
// lis[j].className = '';
// };
// this.className = 'active';
// }
// }
// // 3.通过类名获取
// var lis2 = document.getElementsByClassName('active');
// // console.log(lis2);
// // var box = document.getElementById('box2');
// // console.log(box.children);
</script>
</body>
</html>
1、通过id获取
1.1
1.2
var box = document.getElementById('box');
console.log(box);
1.3、console.dir(box)
2、通过标签名来获取节点对象
2.1
// // 2.通过标签名来获取节点对象
var box2 = document.getElementsByTagName('div');
console.log(box2);
2.2、实现点击哪个li,哪个li变成红色,其它不红。
var box2 = document.getElementsByTagName('div');
// console.log(box2);
var lis = document.getElementsByTagName('li'); //lis数组
for(var i = ; i < lis.length; i++){
// lis[i].className = 'active';
lis[i].onclick = function(){
// this指向了绑定onclick的那个对象
// 排他思想
for(var j = ; j < lis.length; j++){
lis[j].className = '';
};
this.className = 'active';
}
}
通过获取元素通过tag名字获得是这个标签的数组。
console.log(lis);
实现点击哪个li,哪个li变成红色,其它不红。
for(var i = 0; i < lis.length; i++){
// lis[i].className = 'active';
lis[i].onclick = function(){
// this指向了绑定onclick的那个对象
// 排他思想
for(var j = 0; j < lis.length; j++){
lis[j].className = '';
};
this.className = 'active';
1)获取所有指定标签元素,是个数组(好像是伪数组把??) #document.getElementsByTagName('li')
2)循环数组元素。点击某个标签之后先将所有的标签class设置为空字符串。 # lis[j].className = ''
3)再给点击到的标签添加类名 #this.className = 'active';
4)类名是有设置了css样式的。红色color值
5)点击之后的操作是onclick事件。给循环的每个数组元素绑定事件。 # lis[i].onclick = function(){};
6)给每个数组元素.onclick绑定事件,需要for循环遍历数组。事件是执行=的匿名函数function(){},将所有的这个li标签去掉类名,再加个有红色属性的类名,这样实现点击谁只有谁有这个类,只有这个标签变红。将所有li标签去掉类名就是在函数中再for循环数组对每个元素类名设置为空字符串
7)如果没有第2步,那么选中之后的标签不会变回黑色,标签不会只是单个变红
2.3、
var box2 = document.getElementsByTagName('div');
// console.log(box2);
var lis = document.getElementsByTagName('li');
console.log(lis);
for(var i = ; i < lis.length; i++){
// lis[i].className = 'active';
lis[i].onclick = function(){
// this指向了绑定onclick的那个对象
// 排他思想
for(var j = ; j < lis.length; j++){
lis[j].className = '';
};
this.className = 'active';
console.log(this);
console.log(typeof lis[i]);
console.log(lis[i]);
}
}
点击li 2 2变红,点击3 3变红 。打印this是每个li标签对象,是单个数组元素。 打印数组每个元素lis[i]类型是未定义,元素是未定义。
点击时可查看到对应的class在变化:
3、通过类名获取
3.1、
var lis2 = document.getElementsByClassName('active');
console.log(lis2);
4、获取所有子孩子对象 父对象.children
var box = document.getElementById('box2');
cd=box.children
console.log(cd);
for(var i = ; i < cd.length; i++){
console.log(i,cd[i])
}
#注意 console.log(i,cd[i])可以打印多个元素
最新文章
- 获取div或者元素相对于屏幕坐上角的绝对位置
- JS中取整以及随机颜色问题
- cocos2d内存管理
- hdu 1556 树状数组+点查询
- css的框架——base.css
- CISCO2691的OSPF点对点密文测评测试
- Powerdesigner中如何生成测试数据
- Scala学习笔记--List、ListBuffer
- 2014.8.20break,continue,字符串,数字和日期
- Python中的各种装饰器详解
- zabbix 布署实践【6 使用微信公众号-消息模版推送告警】
- Introduce: IEPI.BIATranscribe 图像表格拓写工具
- 携程React Native实践
- 201771010126 王燕《面向对象程序设计(Java)》第十四周学习总结(测试程序11)
- 作业二:构建swap函数
- [转]Centos系统中查看文件和文件夹大小
- 数据採集之Web端上传文件到Hadoop HDFS
- Singleton 单例模式(懒汉方式和饿汉方式)
- 检测IE浏览器兼容Edge模式及IE11
- Ubuntu 16.04 swoole扩展安装注意!!!
热门文章
- lua报错,看到报错信息有tail call,以为和尾调用有关,于是查了一下相关知识
- Leetcode 214.最短回文串
- 安卓常见错误Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace.
- Systemtap工具查看系统资源使用
- Jsp+servlet 验证码案例
- CF # 369 D2 D、E
- javascript 时间格式(很方便的原生函数)
- chassis & power
- 008 frame relay
- Chromium硬件加速渲染的UI合成过程分析