详析获取标签

在前几期的文章当中,我们学习了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>

结果:

代码分析:

  1. 将getElementsByClassName()方法拆开理解:get的意思是获取,elements的意思是多个标签,by的意思是通过,className的意思是类名,结合起来的含义是通过类名获取多个标签;另外,在JS中函数名/方法名遵循小驼峰命名法,所以最终的方法名是getElementsByClassName;
  2. 在网页中类名是可以重复出现,而ID名是不能重复出现(独一无二);
  3. 既然类名可以重复出现,那么获取到的结果就不止一个了,因此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>

结果:

代码分析:

  1. getElementsByTagName()与getElementsByClassName()有点类似,前者是通过标签名来获取标签,后者是通过类名来获取标签;
  2. 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>

结果:

代码分析:

  1. 代码第15和16行,先利用document.getElementById('website');找到id名为“website”的标签,再通过getElementsByTagName()方法查找id名为“website”里面的p标签和h2标签,这样就从查找整个网页的范围缩小到具体标签的范围,提升了JS获取标签的效率;
  2. 其实就是先获取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小时

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-06-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

WPF 可获得焦点属性

本文来告诉大家 WPF 的可获得焦点属性,如果希望一个元素可以获得键盘输入,那么就需要一个元素是可以获得焦点,而且焦点就在元素上。

412
来自专栏hotqin888的专栏

bootstrap treeview 增删改的正确姿势

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

653
来自专栏Java帮帮-微信公众号-技术文章全总结

【大牛经验】26种语言输出HelloWord

【大牛】26种语言输出HelloWord 1. C ? ---- 2. C++ ? ---- 3. C# ? ---- 4. Bash echo "Hello,...

3708
来自专栏布尔

select元素的options.add 与 insertbefore的区别

之前提到如果想改变元素的视觉效果(checkbox.checked=true会打钩),请在把元素添加到页面上再为其赋值,否则赋值无效。下拉框元素也有这样的问题,...

1877
来自专栏漏斗社区

CTF| SQL注入之login界面

SQL注入是CTF WEB方向必不可少的一种题型,斗哥最近也做了一些在线题目,其中最常见的题目就是给出一个登录界面,让我们绕过限制登录或者一步步注入数据。 万...

7588
来自专栏数据之美

shell 学习笔记(17)

声明:转载需署名出处,严禁用于商业用途! 1601.关于rsync相同文件后 du 大小不一样的问题: 不一样大小很正常,因为文件系统的block...

1978
来自专栏令仔很忙

新手学EasyUI(七)----DataGrid CheckBox 动态选中

页面首次加载的时候,右面的表格中的CheckBox都处于未选中的状态,现在是这么设计的,时段只有这么8条数据在一张单独的表里面。

752
来自专栏FreeBuf

如何在32位系统中使用ROP+Return-to-dl来绕过ASLR+DEP

传统的利用return-to-plt+ROP来绕过ASLR + DEP的技术需要知道库中函数的偏移地址,而在没有libc库的情况下可以使用Return-to-d...

2807
来自专栏james大数据架构

在ASPNET中使用JS集锦

(一).确认删除用法: 1. BtnDel.Attributes.Add("onclick","return confirm('"+"确认删除?"+"')")...

1817
来自专栏生信技能树

linux命令行文本操作一文就够

主要是 awk/grep/sed这三驾马车,加上vi这个神器,最后辅助一些小工具,包括 wc,cat,diff,join,paste,cut,uniq 这里 简...

3229

扫描关注云+社区