JS获取DOM元素的五种方法

！！！首先创建一些可能用到的元素

    <div class="box" id="app">
          hello world
    </div>
        <ul class="list_box">
        <li>薛之谦</li>
        <li>薛之谦</li>
    </ul>
   遵循 想操作那个元素  就首先获取哪个元素

1.通过id名获取元素

> console.log(document.getElementById('app'))
> console.log(document.getElementById('box')) 如果想要获取的id不存在 返回值是一个 **null**

2.通过类名（ClassName）获取元素 获得到的是一个集合

> console.log(document.getElementsByClassName('box'))
> console.log(document.getElementsByClassName('box')[i])//通过索引获取想要的元素

3.通过标签获（TagName）取元素 获取的也是一组

> console.log(document.getElementsByTagName('li'))
> console.log(document.getElementsByTagName('li')[i]);//通过索引获取想要的元素

4.通过querySelector（css选择器）但是只能获取一个元素（第一个）

> console.log(document.querySelector('#app'))
> console.log(document.querySelector('.box'))

5. queryselectorAll(css选择器)

>console.log(document.querySelectorAll('.box'))
> console.log(document.querySelectorAll('.box')[2])//通过索引获取想要的元素