原生JS-常用选择器详解

listenlgs

已于 2024-05-24 00:41:04 修改

阅读量650

点赞数 5

分类专栏：原生JS HTML/CSS javascript 文章标签： javascript 前端 html

于 2024-05-24 00:34:26 首次发布

本文链接：https://blog.csdn.net/michaelli918/article/details/127015048

版权

原生JS 同时被 3 个专栏收录

5 篇文章 1 订阅

订阅专栏

HTML/CSS

2 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

原生JavaScript提供了一些选择器，用于选择和操作HTML元素，下面展示下常见选择器方法和之间的区别

1） getElementById方法通过元素的唯一标识符ID来选择元素。它返回指定ID的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            let oDiv = document.getElementById('box')
            console.log(oDiv)//<div id="box">我是ID</div>
        }
    </script>
</head>
<body>
    <div id="id">我是ID</div>
</body>
</html>

兼容性：getElementById方法支持所有常见浏览器版本

2） getElementsByName, 通过name属性获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            let aNames=document.getElementsByName('box')
            console.log(aNames)// NodeList(4) [div, span, div, input]
        }
    </script>
</head>
<body>
    <div id="box">我是ID</div>
    <div  name="box">我是box1</div>
    <span name="box">我是box2</span>
    <div  name="box">我是box3</div>
    <br />
    我是pox4<input name="box" type="text" />
</body>
</html>

getElementsByName方法返回的是一个NodeList集合，兼容性：IE10以下只能获取表单中带name的属性，IE10以上和chrome和FF高版本都可以兼容。（注：IE已废除不更新，所以不考虑IE下可以使用）

3） getElementsByClassName，通过元素的类名来选择元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
           
            let aclass=document.getElementsByClassName('box')
            console.log(aclass)//HTMLCollection(3) [input.box, div.box, div.box]
        }
    </script>
</head>
<body>
    <div  class="box2">我是box3</div>
    <br />
    我是pox4<input class="box" type="text" />
    <div  class="box">我是box1</div>
    <div  class="box">我是box1</div>
</body>
</html>

getElementsByClassName方法返回一个HTMLCollection集合。兼容性： IE9以下版本不兼容此方法，其他chrome,FF高版本兼容。（注：IE已废除不更新，所以不考虑IE下可以使用）

4）getElementsByTagName，通过元素的标签名称来选择元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            let aTags=document.getElementsByTagName('div')
            console.log(aTags)
            // HTMLCollection(4) [div#box, div, div.box, div.box, box: div#box]
        }
    </script>
</head>
<body>
    <div id="box">我是ID</div>
    <div  name="box">我是box1</div>
    <span name="box">我是box2</span>
    <div  class="box">我是box3</div>
    <div  class="box">我是box4</div>
</body>
</html>

getElementsByTagName方法返回一个指定标签名的所有元素的HTMLCollection集合。兼容：兼容所有IE版本和chrome\FF常见浏览器版本。

5）querySelector, 通过CSS选择器来选择元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            // 获取类名为myClass的元素（只匹配第一个）
            let oClass = document.querySelector('.myClass');
            console.log(oClass) // <div  class="myClass">我是myClass1</div>
            
            // 获取ID为myId的元素
            let oId = document.querySelector('#myId');
            console.log(oId) //  <div  id="myId">我是myClass2</div>

            // 获取多条件组合的元素，选取name为'big'且class为'bigName'的a标签(只匹配第一个)
            let oA = document.querySelector("a[name='big'][class='bigName']");
            console.log(oA) // <a href="#" name="big" class="bigName">我是a1</a>

            // 选取class为‘classBox’的下的span标签(只匹配第一个)
            let oSpan = document.querySelector(".classBox span");
            console.log(oSpan) //<span>我是span1</span>

            // 选取class为‘classBox’的下的i标签(只匹配第一个)
            let oi = document.querySelector(".classBox > i");
            console.log(oi) //<i>我是i标签1</i>
        }

    </script>
</head>
<body>
    <div  class="myClass">我是myClass1</div>
    <div  class="myClass">我是myClass2</div>
    <div  id="myId">我是myClass2</div>
    <a href="#" name="big" class="bigName">我是a1</a>
    <a href="#" name="big" class="bigName">我是a2</a>
    <div class="classBox">
        <i>我是i标签1</i>
        <i>我是i标签2</i>
        <span>我是span1</span>
        <span>我是span2</span>
    </div>
    <div class="classBox">
        <span>我是span</span>
    </div>
</body>
</html>

querySelector它返回第一个匹配选择器的元素。几乎支持所有CSS选择器的方式。兼容性: IE10以下不支持，其他chrome、FF高版本支持。（注：IE已废除不更新，所以不考虑IE下可以使用）

6）querySelectorAll, 通过CSS选择器来选择元素, 返回所有匹配选择器的元素的集合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            // 获取所有类名为myClass的元素
            let aClass = document.querySelectorAll('.myClass');
            console.log(aClass) // NodeList(2) [div.myClass, div.myClass]

            // 获取所有div标签元素
            let aDiv = document.querySelectorAll('div');
            console.log(aDiv) 
            // NodeList(5) [div.myClass, div.myClass, div#myId, div.classBox, div.classBox]

            // 获取多个条件组合下的元素，选取name为'big'的，并且class为'bigName'的a标签
            let aA = document.querySelectorAll("a[name='big'][class='bigName']");
            console.log(aA) // NodeList(2) [a.bigName, a.bigName]

            // 选取class为‘classBox’的下的span标签
            let aSpan = document.querySelectorAll(".classBox span");
            console.log(aSpan) //NodeList(3) [span, span, span]

            // 选取class为‘classBox’的下的i标签(只匹配第一个)
            let ai = document.querySelectorAll(".classBox > i");
            console.log(ai) // NodeList(2) [i, i]

            // "多个" 选取条件, 用逗号隔开 (相当于 X 或 Y)
            let aX = document.querySelectorAll(".classX, #idY");
            console.log(aX) // NodeList(2) [div#idY, div.classX]

            // 选取类名为list下，类名为listLi的Li标签，下面的全部兄弟节点们         
            let aBrothers = document.querySelectorAll(".list li.listLi1 ~ li ");
            console.log(aBrothers)// NodeList(3) [li.listLi, li.listLi3, li.listLi2]

            // 选取类名为list下，类名为listLi的Li标签，紧挨着的下一个兄弟节点    
            let prview = document.querySelectorAll(".list li.listLi1 + li ");
            console.log(prview)// NodeList [li.listLi]
        }

    </script>
</head>
<body>
    <div  class="myClass">我是myClass1</div>
    <div  class="myClass">我是myClass2</div>
    <div  id="myId">我是myClass2</div>
    <a href="#" name="big" class="bigName">我是a1</a>
    <a href="#" name="big" class="bigName">我是a2</a>
    <div class="classBox">
        <i>我是i标签1</i>
        <i>我是i标签2</i>
        <span>我是span1</span>
        <span>我是span2</span>
    </div>
    <div class="classBox">
        <span>我是span</span>
    </div>
    <div id="idY">我是idY</div>
    <div class="classX">我是classX</div>
    <ul class="list">
        <li class="listLi4">
            <strong>我strong</strong>
         </li>
         <li class="listLi1">
            <strong>我strong</strong>
         </li>
         <li class="listLi">
            <p>我是p1</p>
            <p>我是p2</p>
            <p>我是p3</p>
         </li>
         <li class="listLi3">
            <p>我是p4</p>
            <p>我是p5</p>
         </li>
         <li class="listLi2"></li>
    </ul>
</body>
</html>

总之，常见的原生JS选择器一般由上面几种方式，在当前不考虑IE的情况下（IE已停更），所有选择器都可以使用。其中querySelectorAll和querySelector最为强大，几乎支持了所有css选择器的方式，使用起来更为方便

listenlgs

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
原生JS-常用选择器详解

总之，常见的原生JS选择器一般由上面几种方式，在当前不考虑IE的情况下（IE已停更），所有选择器都可以使用。getElementsByName方法返回的是一个NodeList集合，兼容性：IE10以下只能获取表单中带name的属性，IE10以上和chrome和FF高版本都可以兼容。原生JavaScript提供了一些选择器，用于选择和操作HTML元素，下面展示下常见选择器方法和之间的区别。6）querySelectorAll, 通过CSS选择器来选择元素, 返回所有匹配选择器的元素的集合。
复制链接

扫一扫

专栏目录