js中元素获取的5种方式_javascript通过id或class获取页面元素

作者：盐析白兔 | 2024-02-19 07:22:08

踩

javascript通过id或class获取页面元素


 <div class="box" id="box1">
        <p>段落1</p>
        <p>段落1</p>
        <p>段落1</p>
        <p>段落1</p>
        第一个
    </div>
    <div class="box" id="box2">
        <p>段落2</p>
        <p>段落1</p>
        <p>段落1</p>
        <p>段落1</p>
        第二个
    </div>
    <div class="box" id="box3">
        <p>段落3</p>
        <p>段落1</p>
        <p>段落1</p>
        <p>段落1</p>
        第三个
    </div>

1、通过id获取元素

通过id获取到的元素是唯一的，id的名字是不能重复的


var box1 = document.getElementById('box1');
        console.log(box1);

2、H5中新增加的 querySelector获取元素

querySelector只能获取页面中的第一个元素，括号中可以使用选择器

通俗理解：就是样式中的选择器怎么写，括号中就怎么写


var box3 = document.querySelector('.box');
        console.log(box3);

通过id获取元素和 querySelector，只能获取一个元素，注意两者之间的区别

3、H5中新增加的querySelectorAll获取元素


 var p3 = document.querySelectorAll('div p');
        console.log(p3);

4.通过class获取元素

class获取元素也是获取到多个，形成一个数组


var box2 = document.getElementsByClassName('box');
        console.log(box2);

5、通过标签名获取元素

标签名获取元素也是获取到多个，形成一个数组


var a1 = document.getElementsByTagName('div')
        console.log(a1);
 
var box5 = document.getElementsByTagName('div')[0];
        var p1 = box5.getElementsByTagName('p');
        console.log(p1);

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/113345