<!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获取标签的三种方式的更多相关文章

  1. js获取时间戳的三种方式

      js获取时间戳的三种方式 CreateTime--2018年5月23日08:44:10 Author:Marydon // 方式一:推荐使用 var timestamp=new Date().ge ...

  2. js获取标签的几种方式

    一:id获取(全部浏览器兼容) document.getElementById(""); <body> <div id="box">&l ...

  3. js声明变量的三种方式

    JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用 正确用法: <script type="text/javascript"> ...

  4. Struts2(四.注册时检查用户名是否存在及Action获取数据的三种方式)

    一.功能 1.用户注册页面 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. 获取Type的三种方式

    using System;using UnityEngine; public class Type_Test : MonoBehaviour{    private void Awake()    { ...

  7. java 获取时间戳的三种方式

      java 获取时间戳的三种方式 CreationTime--2018年7月13日16点29分 Author:Marydon 1.实现方式 方式一:推荐使用 System.currentTimeMi ...

  8. 【Struts2】Struts2获取session的三种方式

    1.Map<String,Object> map =  ActionContext.getContext().getSession(); 2.HttpSession session = S ...

  9. java:struts框架2(方法的动态和静态调用,获取Servlet API三种方式(推荐IOC(控制反转)),拦截器,静态代理和动态代理(Spring AOP))

    1.方法的静态和动态调用: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCT ...

随机推荐

  1. LaTex/Overleaf使用笔记

    1. 添加网页引用 @misc{ r1,   author = "Wikipedia",   title = "Binary decision diagram --- { ...

  2. 全文搜索(A-3)-用户建模

    用户模型可以分为静态模型.动态模型.混合推荐用户模型. 静态模型往往通过显式方式收集用户偏好信息: 动态模型通过隐式方式收集用户偏好信息: 基于内容的用户系统的推荐模型: 关键字匹配,空间向量模型 协 ...

  3. linux 命令练习 2018-08-27

    linux 命令练习 2018-08-27 uname  显示系统名字 [test@localhost ~]$ uname Linux uname -a   即列出linux的内核版本号 [test@ ...

  4. 51nod 1126 求递推序列的第N项 && hdu - 1005 Number Sequence (求周期)

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1126 http://acm.hdu.edu.cn/showproblem ...

  5. Jquery那些事

    Jquery选择器介绍: 我们可以通过Jquery选择器从网页文档中找到我们需要的DOM节点: 主要还时看文档!! (1)基本选择器 属性id    类别class       文档标签 (2)属性选 ...

  6. Java面试题解析(一)

    本文是面试题目系列的第一篇,题目主要来自 GitChat 上一个课程,在此特别记录自身想的答案和在网上查询的结果,分享出来,大家共同学习.如果有不对的地方,欢迎大家指出. Java基础 JDK 和 J ...

  7. 破碎纪念---记第二次Nexus4换屏

    四太子的屏幕太易碎了.去年九月份在美国买的,十月便碎了,十二月修好,前几天又摔碎了. 本着对此机的喜爱,今天就进行了第二次换屏. 用同事的话说,如今已经是熟练工种了. 先来看看破碎景象: 右下角破碎, ...

  8. Java千百问_03基本的语法(001)_局部变量、类变量、实例变量有什么差别

    点击进入_很多其它_Java千百问 局部变量.类变量.实例变量有什么差别 在聊局部变量.类变量.实例变量有什么差别之前,我们须要了解一下Java变量. 1.Java变量是什么 在数学世界中,我们知道有 ...

  9. Zend Studio如何调试?

    1.安装Zend Studio之前,本机已安装Apache2.如果使用Apache2作为服务器 Window-Preferences-Php-Php Servers 配置好 URL和Server Ro ...

  10. mciSendString详解(转)

    做个mp3播放器,用realplay和WMP做出来的程序内存占用太大.如果你仅仅是播放MP3,建议使用API函数mciSendString,我把该函数的详细资料罗列如下供你参考.Option Expl ...