详析获取标签
在前几期的文章当中,我们学习了JS的基础语法,它是我们学习其它知识点的重要前提。小编也与大家分享了JS逻辑与DOM的相结合,并带着大家去实现了一些简单的页面交互效果,涉及了获取标签—>绑定事件—>操作标签样式。而今天的文章主要带着大家来分析其它获取标签的方法,这样才能更灵活的去获取网页中的标签。
本文内容概要:
1 回顾通过ID名获取标签的方法
2 获取标签的其它方法
3 课程小结
4 课后作业
1 回顾通过ID名获取标签的方法
ID名获取标签需要给标签起一个ID名,然后通过getElementById()方法来获取标签。
实例:
<div class="wrap" id="wrapEle">HTML5学堂 - 陈能堡</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
// 输出获取到的标签
console.log(wrapObj);
</script>
结果:
2 获取标签的其它方法
通过类名获取标签
上面的实例是通过ID名来获取标签,那我们能不能通过类名来获取标签?具体来看下面的实例吧。
实例:
<div class="wrap">
<div class="tit">HTML5学堂 - 刘国利</div>
<div class="tit">HTML5学堂 - 刘国利</div>
<div class="tit">HTML5学堂 - 刘国利</div>
<div class="con">HTML5学堂 - 陈能堡</div>
<div class="con">HTML5学堂 - 陈能堡</div>
<div class="con">HTML5学堂 - 陈能堡</div>
</div>
<script type="text/javascript">
var titsEle = document.getElementsByClassName('tit');
var consEle = document.getElementsByClassName('con');
// 输出获取到的标签
console.log(titsEle);
console.log(consEle);
</script>
结果:
代码分析:
- 将getElementsByClassName()方法拆开理解:get的意思是获取,elements的意思是多个标签,by的意思是通过,className的意思是类名,结合起来的含义是通过类名获取多个标签;另外,在JS中函数名/方法名遵循小驼峰命名法,所以最终的方法名是getElementsByClassName;
- 在网页中类名是可以重复出现,而ID名是不能重复出现(独一无二);
- 既然类名可以重复出现,那么获取到的结果就不止一个了,因此getElementsByClassName()获取到的结果是以类似数组的形式返回(语法与数组类似,但不属于数组);代码14和15行,是通过数组下标的形式来访问获取到的标签。
浏览器支持程度:
Chrome、Firefox、IE9+(包含IE9)都支持
通过标签名获取标签
CSS的三个基本选择器有ID名选择器、类名选择器、标签名选择器,使用ID名和类名都能正常的获取标签,那能不能通过标签名来获取标签?
实例:
<div class="wrap">
<div id="website">
<h2>HTML5学堂</h2>
<p>HTML5技术原创分享平台</p>
</div>
<h2>HTML5学堂 - 陈能堡</h2>
<p>网名:梦幻雪冰</p>
<p>座右铭:技在手,能在身,思在脑,从容过生活——陈能堡</p>
<h2>HTML5学堂 - 刘国利</h2>
<p>网名:独行冰海</p>
<p>座右铭:为了自己心底的梦、珍重的事、守护的情而奋斗!</p>
</div>
<script type="text/javascript">
var pEles = document.getElementsByTagName('p');
var h2Eles = document.getElementsByTagName('h2');
// 输出获取到的标签
console.log(pEles);
console.log(h2Eles);
// 通过下标访问获取到的标签
console.log(pEles[2]);
console.log(h2Eles[1]);
</script>
结果:
代码分析:
- getElementsByTagName()与getElementsByClassName()有点类似,前者是通过标签名来获取标签,后者是通过类名来获取标签;
- getElementsByTagName()获取的结果也是以类似数组的形式返回(语法与数组类似,但不属于数组);
浏览器支持程度:
IE6+、Chrome、Firefox都支持
我们应该都知道标签选择器的选中范围比较广,不能够很精确的选中标签,那getElementsByTagName()方法与标签选择器类似,获取的标签范围比较广,那我们该如何缩小获取标签的范围?比如:前面我们是获取了网页中所有的p标签和h2标签,可是现在只要获取id名为"website"标签里面的p标签和h2标签,该如何实现?
实例:
<div class="wrap">
<div id="website">
<h2>HTML5学堂</h2>
<p>HTML5技术原创分享平台</p>
</div>
<h2>HTML5学堂 - 陈能堡</h2>
<p>网名:梦幻雪冰</p>
<p>座右铭:技在手,能在身,思在脑,从容过生活——陈能堡</p>
<h2>HTML5学堂 - 刘国利</h2>
<p>网名:独行冰海</p>
<p>座右铭:为了自己心底的梦、珍重的事、守护的情而奋斗!</p>
</div>
<script type="text/javascript">
// 缩小获取标签的范围
var h2Ele = document.getElementById('website').getElementsByTagName('h2');
var pEle = document.getElementById('website').getElementsByTagName('p');
// 输出获取到的标签
console.log(h2Ele);
console.log(pEle);
// 通过下标访问获取到的标签
console.log(h2Ele[0]);
console.log(pEle[0]);
</script>
结果:
代码分析:
- 代码第15和16行,先利用document.getElementById('website');找到id名为“website”的标签,再通过getElementsByTagName()方法查找id名为“website”里面的p标签和h2标签,这样就从查找整个网页的范围缩小到具体标签的范围,提升了JS获取标签的效率;
- 其实就是先获取id名为website的标签,然后在获取结果的基础上利用getElementsByTagName()获取相应的标签;
代码优化:
<div class="wrap">
<div id="website">
<h2>HTML5学堂</h2>
<p>HTML5技术原创分享平台</p>
</div>
<h2>HTML5学堂 - 陈能堡</h2>
<p>网名:梦幻雪冰</p>
<p>座右铭:技在手,能在身,思在脑,从容过生活——陈能堡</p>
<h2>HTML5学堂 - 刘国利</h2>
<p>网名:独行冰海</p>
<p>座右铭:为了自己心底的梦、珍重的事、守护的情而奋斗!</p>
</div>
<script type="text/javascript">
// 先获取id名为website的标签
// 然后在获取结果的基础上利用getElementsByTagName()获取相应的标签
var websiteEle = document.getElementById('website'),
h2Ele = websiteEle.getElementsByTagName('h2'),
pEle = websiteEle.getElementsByTagName('p');
// 输出获取到的标签
console.log(websiteEle);
console.log(h2Ele);
console.log(pEle);
// 通过下标访问获取到的标签
console.log(h2Ele[0]);
console.log(pEle[0]);
</script>
结果:
通过name属性获取标签
getElementsByName()与getElementsByClassName()方法相似,但是它是根据元素的name属性获取标签,而不是类名属性。另外,name属性可以重复出现(比如表单中的单选按钮通常具有相同的name属性),因此getElementsByName()方法返回的结果是以类似数组的形式返回(语法与数组类似,但不属于数组)。
实例:
<div class="wrap">
<form action="">
<input type="text" name="username" id="" />
<input type="text" name="age" id="" />
<input type="text" name="school" id="" />
</form>
<form action="">
<input type="text" name="username" id="" />
<input type="text" name="age" id="" />
</form>
<div name="username">陈能堡</div>
<p name="age">刘国利</p>
</div>
<script type="text/javascript">
var usernameEle = document.getElementsByName('username');
var ageEle = document.getElementsByName('age');
var schoolEle = document.getElementsByName('school');
// 输出获取到的标签
console.log(usernameEle);
console.log(ageEle);
console.log(schoolEle);
</script>
结果:
代码分析:
“username”与“age”属性都分别出现了三次,所以获取到的结果是三个;“school”属性只出现了一次,所以获取到的结果也就是一个。
浏览器支持程度:
IE9-(包括IE9)不支持非表单元素的获取,IE10+、Chrome、Firefox支持非表单元素的获取;比如:<div name="username">陈能堡</div>
使用querySelector和querySelectorAll来获取标签
平常我们在查找标签时总是一个个".getElementById..."这样一层层查找下去,不知不觉查找一个标签就会把代码写的很长,然后就会想,要是能像CSS选择器那样选择该多好啊。没错,今天介绍的querySelector和querySelectorAll就是可以直接使用CSS选择器一样的写法的方法。
语法:querySelector(CSS选择器),querySelectorAll(CSS选择器);
实例:
<img id="outside" src="HTML5学堂.jpg" alt="HTML5学堂" title="HTML5学堂" >
<div id="my-id">
<img id="inside" src="HTML5学堂.jpg" alt="H5Course" title="H5Course">
<div class="lonely"></div>
<div class="outer">
<div class="inner"></div>
</div>
</div>
<script type="text/javascript">
var outsideEle1 = document.querySelector("#outside");
var outsideEle2 = document.querySelectorAll("#outside");
var outerEle1 = document.querySelector(".outer div");
var outerEle2 = document.querySelectorAll(".outer div");
// 输出querySelector获取的标签
console.log(outsideEle1);
console.log(outerEle1);
// 输出querySelectorAll获取的标签
console.log(outsideEle2);
console.log(outerEle2);
</script>
结果:
代码分析:
querySelector和querySelectorAll他们之间的区别就好比getElementById和getElementsByTagName一样,querySelector返回的是单独的一个标签,而querySelectorAll返回的是一个标签集合,换句话说就是querySelectorAll返回的结果是以类似数组的形式返回(语法与数组类似,但不属于数组)。
浏览器支持程度:
IE8+(包括IE8)、Chrome、Firefox都支持
3 课程小结
学习多种获取标签的方法目的在于能够灵活的获取网页中的标签,便于操作网页中的标签;
今天所接触的获取标签的方法:
1、通过id获取标签:document.getElementById();
2、通过标签获取标签:document.getElementsByTagName();
3、通过类名获取标签:document.getElementsByClassName();
4、通过name获取标签:document.getElementsByName();
5、通过CSS选择器获取标签:document.querySelector();和document.querySelectorAll();
4 课后作业
根据给定的结构与样式,实现下方的效果。
结构:
<div class="wrap">
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
<div>HTML5学堂 - 堡堡 - 梦幻雪冰</div>
</div>
样式:
<style type="text/css">
.wrap div {
margin-bottom: 2px;
border: 1px solid gray;
text-align: center;
font-size: 30px;
cursor: pointer;
}
</style>
HTML5学堂小编 - 堡堡 耗时8小时
- 帝国cms文章页调用当前文章URL如何操作?
- dedecms文章页调用地址(当前文章URL)如何操作?
- 饭团开通一周,3人学会了比特币操作
- Sample K算法
- C#读取“我的文档”等特殊系统路径及环境变量
- winform CheckedListBox实现全选/全不选
- 机器学习该如何入门
- dedecms建的网站如何去掉/index.html
- WPF ContextMenu的使用
- Json的序列化与反序列化以及乱入的k_BackingField
- 亚马逊面试题
- VisualStudio 怎么使用Visual Leak Detector
- Cannot find module 'socket.io'
- 【学术】独热编码如何在Python中排列数据?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- scheduler-设计与实现
- 3分钟短文:太爽了,用Laravel写API接口!
- Spring mvc文件上传实现
- 「Mysql优化大师三」查询执行计划explain详解,含案例
- flutter BottomAppBar实现不规则底部导航栏
- Yarr:一个UI很漂亮的RSS阅读器
- kotlin Standard中的内联函数示例详解
- 解决react-native软键盘弹出挡住输入框的问题
- flutter编写精美的登录页面
- Flutter实现App功能引导页
- Flutter底部不规则导航的实现过程
- Flutter实现用视频背景的登录页的示例代码
- Flutter实现可循环轮播图效果
- Android判断登录情况
- linux尝试登录失败后锁定用户账户的两种方法