JavaScript 获取元素

1、根据ID获取 getElementById()

<div id="time">2021-10-31</div>
<script>
    // 1、因为文档页面从上往下加载，所以得现有标签 所以script写到标签下面
    // 2、get 获得 element 元素 by 通过 驼峰命名法
    // 3、参数id是大小写敏感的字符串
    // 4、返回的是一个元素对象 element对象
    var timer = document.getElementById('time');
    console.log(timer);  
    console.dir(timer); 
    // console.dir() 打印返回的元素对象 更好查看属性和方法

</script>

2、根据元素标签选择 getElementsByTagName()

// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2.可以使用for循环遍历数组中的元素
for(var i= 0;i<lis.length;i++){
    console.log(lis[i]);
}
//3.如果转义一个元素 返回的同样是伪数组的形式
//4.如果页面中没有这个元素 返回一个空的伪数组a

3、H5新增选择方式

// 1.getElementsByClassName() 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);

// 2.querySelector() 返回指定选择器的第一个元素对象 选择元素需要加符号 .box #nav
var firstBox = document.querySelector('.box');

// 3.querySelectorAll() 返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');

4、获取特殊元素 body和html元素

// 1.获取body元素
var bodyEle=document.body;
console.log(bodyEle);
console.dir(bodyEle);

// 2.获取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);
console.dir(htmlEle);