js中获取元素的方法总结

1,根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById('id');
使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

var time =document.getElementById('time');
console.log(time);

2,根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
注意： 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。得到元素对象是动态的如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

 document.getElementsByTagName('标签名');

还可以获取某个元素(父元素)内部所有指定标签名的子元素.
父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
element是父元素

element.getElementsByTagName('标签名');

var lis = document.getElementsByTagName('li'); //得到li标签(伪对象)
			console.log(lis);
			console.log(lis[0]);
			for (var i = 0; i < lis.length; i++) {
			    console.log(lis[i]);
			
			}

用element.getElementsByTagName来获取标签名

 var ol = document.getElementById('ol'); //得到ol的id
			 var ol1=ol.getElementsByTagName("li"); //在ol中li是子元素
			 console.log(ol1[0]);

3,通过 HTML5 新增的方法获取

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll(‘选择器’); // 根据指定选择器返回
   querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);

4,特殊元素获取

获取body元素

1. doucumnet.body // 返回body元素对象

获取HTML元素

1. document.documentElement // 返回html元素对象