js获取标签的三种方式
<!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])可以打印多个元素
js获取标签的三种方式的更多相关文章
- js获取时间戳的三种方式
js获取时间戳的三种方式 CreateTime--2018年5月23日08:44:10 Author:Marydon // 方式一:推荐使用 var timestamp=new Date().ge ...
- js获取标签的几种方式
一:id获取(全部浏览器兼容) document.getElementById(""); <body> <div id="box">&l ...
- js声明变量的三种方式
JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用 正确用法: <script type="text/javascript"> ...
- Struts2(四.注册时检查用户名是否存在及Action获取数据的三种方式)
一.功能 1.用户注册页面 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 获取Type的三种方式
using System;using UnityEngine; public class Type_Test : MonoBehaviour{ private void Awake() { ...
- java 获取时间戳的三种方式
java 获取时间戳的三种方式 CreationTime--2018年7月13日16点29分 Author:Marydon 1.实现方式 方式一:推荐使用 System.currentTimeMi ...
- 【Struts2】Struts2获取session的三种方式
1.Map<String,Object> map = ActionContext.getContext().getSession(); 2.HttpSession session = S ...
- java:struts框架2(方法的动态和静态调用,获取Servlet API三种方式(推荐IOC(控制反转)),拦截器,静态代理和动态代理(Spring AOP))
1.方法的静态和动态调用: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCT ...
随机推荐
- LaTex/Overleaf使用笔记
1. 添加网页引用 @misc{ r1, author = "Wikipedia", title = "Binary decision diagram --- { ...
- 全文搜索(A-3)-用户建模
用户模型可以分为静态模型.动态模型.混合推荐用户模型. 静态模型往往通过显式方式收集用户偏好信息: 动态模型通过隐式方式收集用户偏好信息: 基于内容的用户系统的推荐模型: 关键字匹配,空间向量模型 协 ...
- linux 命令练习 2018-08-27
linux 命令练习 2018-08-27 uname 显示系统名字 [test@localhost ~]$ uname Linux uname -a 即列出linux的内核版本号 [test@ ...
- 51nod 1126 求递推序列的第N项 && hdu - 1005 Number Sequence (求周期)
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1126 http://acm.hdu.edu.cn/showproblem ...
- Jquery那些事
Jquery选择器介绍: 我们可以通过Jquery选择器从网页文档中找到我们需要的DOM节点: 主要还时看文档!! (1)基本选择器 属性id 类别class 文档标签 (2)属性选 ...
- Java面试题解析(一)
本文是面试题目系列的第一篇,题目主要来自 GitChat 上一个课程,在此特别记录自身想的答案和在网上查询的结果,分享出来,大家共同学习.如果有不对的地方,欢迎大家指出. Java基础 JDK 和 J ...
- 破碎纪念---记第二次Nexus4换屏
四太子的屏幕太易碎了.去年九月份在美国买的,十月便碎了,十二月修好,前几天又摔碎了. 本着对此机的喜爱,今天就进行了第二次换屏. 用同事的话说,如今已经是熟练工种了. 先来看看破碎景象: 右下角破碎, ...
- Java千百问_03基本的语法(001)_局部变量、类变量、实例变量有什么差别
点击进入_很多其它_Java千百问 局部变量.类变量.实例变量有什么差别 在聊局部变量.类变量.实例变量有什么差别之前,我们须要了解一下Java变量. 1.Java变量是什么 在数学世界中,我们知道有 ...
- Zend Studio如何调试?
1.安装Zend Studio之前,本机已安装Apache2.如果使用Apache2作为服务器 Window-Preferences-Php-Php Servers 配置好 URL和Server Ro ...
- mciSendString详解(转)
做个mp3播放器,用realplay和WMP做出来的程序内存占用太大.如果你仅仅是播放MP3,建议使用API函数mciSendString,我把该函数的详细资料罗列如下供你参考.Option Expl ...