javaScript学习1——获取元素的几种方法

1.getElementById获取元素

通过id来获取元素

<div id="time">2018174</div>
<script>
    var timer = document.getElementById('time');
    console.log(timer);
    console.log (typeof timer);
     console.dir(timer);  //打印返回的元素对象 更好的查看里面的属性和方法
</script>

2.getElementsByTagName

getElementsByTagName获取某类标签元素。返回的是获取元素的集合，以伪数组的形式存储 就算只有一个数据 也返回的是伪数组 没有数据返回空的伪数组。

<ul>
    <li>知否知否</li>
    <li>知否知否</li>
    <li>知否知否</li>

</ul>
<script>
   var lis= document.getElementsByTagName('li');  
   console.log(lis);
   </script>

因为getElementsByTagName返回出来的数据是以伪数组的形式存储的，所以可以通过遍历（循环）的方法获取他们的值。

3.H5新增的获取元素的方式

document.getElementsByClassName(‘类名’); 根据类名返回对象集合
document.querySelector(‘选择器’) 根据选择器来返回第一个元素对象
document.querySelectoAllr(‘选择器’) 根据选择器返回所有的元素对象的集合

4.获取body和html元素

document.body 获取body元素
document.documentElement 获取html元素

<script>
    var bodyA = document.body;  //获取body元素
    console.log(bodyA);
    console.dir(bodyA);
    var htmlA = document.documentElement; //获取html元素
    console.log(htmlA);
</script>