详析获取标签

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

相关文章

来自专栏iKcamp

React 深入系列1:React 中的元素、组件、实例和节点

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 ---- React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在...

3668
来自专栏Flutter入门到实战

10分钟学会ikvStockChart制作K线图(股票走势图)

OK,Show me your code!Go!Go!Go! 先来看一波效果图:

2161
来自专栏知道一点点

bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 1...

833
来自专栏我就是马云飞

View的绘制流程源码分析

概述 View的绘制流程主要是指测量、布局以及绘制显示,在View中,measure是测量View的宽高,layout是控制View四个顶点的位置,而draw就...

1815
来自专栏木子昭的博客

<干货>5分钟快速回顾HTML CSS

一.html (一)标签类型 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 ...

2769
来自专栏听雨堂

在Mapx中设置单个图元的样式

        前几天研究了一下,感觉都快忘了。虽然去啃帮助仍然可以把这些东西啃出来,但有点烦。把记忆的东西零星整理一下: Mapx4不支持具体到图元的样式的指...

1867
来自专栏前端说吧

CSS-垂直|水平居中问题的解决方法总结

3806
来自专栏一“技”之长

Java开发GUI之滚动条 原

540
来自专栏十月梦想

HTML的行元素和块元素

本博客所有文章如无特别注明均为原创。作者:十月梦想 ,复制或转载请以超链接形式注明转自 十月梦想博客 。 原文地址《HTML的行元素和块元素》

832
来自专栏练小习的专栏

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional ...

3936

扫码关注云+社区