JavaScript获取元素

1.根据ID获取

语法：document.getElementById(id)

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

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

返回值：元素对象 或 null

    <div id="dome">根据ID获取</div>
    <script>
        var dome = document.getElementById('dome');
        console.log(dome);
    </script>

2. 根据标签名获取元素

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

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

参数：标签名

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

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

    <a href="">链接1</a>
    <a href="">链接2</a>
    <a href="">链接3</a>
    <script>
        var domeA = document.getElementsByTagName('a');
        console.log(domeA);
    </script>

 

3.根据类名获取元素集合 （HTML5新增）

语法：document.getElementsByClassName(‘类名’)

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

    <a href="">链接1</a>
    <a href="">链接2</a>
    <a href="">链接3</a>
    <script>
        var domeA = document.getElementsByTagName('a');
        console.log(domeA);
    </script>

4.获取指定选择器第一个元素（HTML5新增）

语法：document.querySelector (‘属性值’)

作用：根据选择器获取元素对象

注：里面的选择器需要加符号 “.” “#”。

    <a href="">链接1</a>
    <a href="">链接2</a>
    <a href="" id="A2">链接3</a>
    <a href="" class="A1">链接4</a>
    <script>
        var domeA = document.querySelector('a');//这里获取的是第一个a标签
        console.log(domeA);
        var A2 = document.querySelector('#A2');
        console.log(A2);
        var A1 = document.querySelector('.A1');
        console.log(A1);
    </script>

5 根据指定选择器返回所有元素 （HTML5新增）

语法：document.querySelectorAll (‘属性值’)

作用：根据选择器获取元素对象

注：里面的选择器需要加符号 “.” “#”。

    <span class="demo1">span1</span>
	<span class="demo1">span2</span>
	<span class="demo1">span3</span>
    <script>
        //都能得到所有的span标签
        var demo = document.querySelectorAll('span');
        console.log(demo);
        var demo1 = document.querySelectorAll('.demo1');
        console.log(demo1);
    </script>

6.获取特殊元素 

document.body //返回body元素

document.documentElement //返回HTML元素

        var body = document.body;
        console.log(body);
        var html = document.documentElement;
        console.log(html);