js中获取元素的方法总结

朱雀 2022-12-05 00:51 227阅读 0赞

## 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元素对象