详析获取标签

HTML5学堂

发布于 2018-03-13 03:16:57

2.2K00

代码可运行

运行总次数：0

代码可运行

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2016-06-02，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自懂点君微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度