js选择器

一、getElement系列

// 1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名');
// 该方法只能由document调用

// 2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

// 3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

二、querySelect系列

// 1.获取第一个匹配到的页面元素
document.querySelector('css3语法选择器');
// 该方法可以由document及任意页面对象调用

// 2.获取所有匹配到的页面元素
document.querySelectorAll('css3语法选择器');
// 该方法可以由document及任意页面对象调用
// 返回值为NodeList (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空NodeList对象 ([])

三、实例

<body>
    <div id="box" class="box"></div>
    <script>
        var box1 = document.getElementById('box');
        var box2 = document.querySelector('.box');
        // box1 === box2，就代表页面id为box，class为box的div标签
    </script>
</body>

 

posted on 2020-02-14 15:23  软饭攻城狮  阅读(143)  评论(0)    收藏  举报

导航