获取元素

1 根据ID获取

语法：document.getElementById(id)

作用：根据ID获取元素对象

参数：id值，区分大小写的字符串

返回值：元素对象 或 null

//html

<div id="time">2019-9-9</div>

<script>

 // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面

  var timer = document.getElementById('time');

 console.log(timer);

console.log(typeof timer);

// console.dir打印我们返回的元素对象 更好的查看里面的属性和方法

console.dir(timer);

</script>

2 根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')

作用：根据标签名获取元素对象

参数：标签名

返回值：元素对象集合（伪数组，数组元素是元素对象）

//html

    <ul>

        <li>路遥知马力，日久见人心</li>

        <li>路遥知马力，日久见人心</li>

        <li>路遥知马力，日久见人心</li>

        <li>路遥知马力，日久见人心</li>

        <li>路遥知马力，日久见人心</li>

    </ul>

    <ul id="nav">

        <li>超链接</li>

        <li>超链接</li>

        <li>超链接</li>

        <li>超链接</li>

        <li>超链接</li>

</ul>

<script>

        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的

        var lis = document.getElementsByTagName('li');

        console.log(lis);

        console.log(lis[0]);

        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式

        for (var i = 0; i < lis.length; i++) {

            console.log(lis[i]);

        }

        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签

        var nav = document.getElementById('nav'); // 这个获得nav 元素

        var navLis = nav.getElementsByTagName('li');

        console.log(navLis);

 </script>

注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

3 根据类名获取元素集合

(Html5新增) getElementsByClassName(‘类名’) 根据类名获得某些元素集合。

document.getElementsByClassName(“box”);

4 获取指定选择器第一个元素

(Html5新增)  querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 “.” “#”。

document.querySelector('.box');

document.querySelector('#box');

document.querySelector(‘li’);

5 根据指定选择器返回所有元素

(Html5新增) querySelectorAll()返回指定选择器的所有元素对象集合。

document.querySelectorAll('.box');

document.querySelectorAll('li);