详析获取标签

在前几期的文章当中,我们学习了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 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

javascript实例:逐条记录停顿的走马灯

效果: ? 需求: 1.记录循环滚动; 2.每组记录之间不能有留白; 3.每条记录上移到容器的顶部时要停顿一下; 4.鼠标移入容器时停止滚动,移出时继续滚动。 ...

1715
来自专栏应用案例

D3.js 满足你对数据可视化的一切幻想

D3.js D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript...

24610
来自专栏菩提树下的杨过

silverlight中的几个冷门标记 {x:Null},d:DesignWidth,d:DesignHeight

{x:Null}:用于设置某属性值为Null,比如<Rectangle Fill="{x:Null}" />,其实就相当于<Rectangle />,个人感觉这...

1856
来自专栏前端杂货铺

节点插入

对于早期的w3c浏览器,并没有实现ie的私有方法insertAdjacentHTML(目前已是HTML5标准),可以用appendChild模拟该方法的实现: ...

2728
来自专栏阮一峰的网络日志

如何做到 jQuery-free?

jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使...

2994
来自专栏个人随笔

列表,表格与媒体元素

一.列表   列表就是信息资源的一种展示形式  1.列表及其应用    1)无序列表      无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无...

26610
来自专栏Flutter入门

Flutter开发实战分析-pesto_demo解析

以下代码基本参考于 flutter_gallery中的pesto_demo示例。(可以结合本文看源码)

1042
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,...

1837
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

1082
来自专栏Google Dart

AngularDart Material Design 图标 顶

确保考虑RTL。 具体来说,如果要为RTL UI翻转图标,请使用flip属性。 阅读这些指南,了解何时翻转何时不翻转图标。

806

扫码关注云+社区