js中元素获取的5种方式

 <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);