JS获取DOM元素的常用方法

通过ID名获取元素（getElementById）

上下文必须是document

必传参数，参数string类型

返回值：是一个元素对象，即当前id的对象（如果页面上没有你所获取的id，则返回null）

document.getElementById('id')

通过name属性的值获取元素（getElementsByName）

上下文必须是document
必传参数，参数是获取元素的name属性

返回值：是一个伪数组，页面上没有对应标签的时候返回空数组

不推荐使用，在IE和欧朋浏览器中，通过这个方式会获取到相同的id元素

document.getElementsByName('name')

	
		
	
	
		JavaScript
	
	

通过标签名获取元素（getElementsByTagName）

上下文可以是document，也可以是一个元素，元素必须存在

参数是获取元素的标签名属性，不区分大小写

返回值：是一个伪数组，页面上没有对应标签的时候返回空数组

document.getElementsByTagName('p')

通过类名获取元素（getElementsByClassName）

上下文可以是document，也可以是一个元素

参数是元素的类名

返回值：是一个伪数组，页面上没有对应标签的时候返回空数组

document.getElementsByClassName("class")

获取html标签（document.documentElement）

document.documentElement是专门获取html这个标签的

获取body标签（document.body）

document.body是专门获取body这个标签的

通过选择器获取一个元素（document.querySelector）

上下文可以是document，也可以是一个元素

参数是选择器，如：div 、.className

返回文档中匹配指定的选择器组的第一个元素

document.querySelector(“选择器”)

通过选择器获取一组元素（document.querySelectorAll）

上下文可以是document，也可以是一个元素

参数是选择器，如：div 、.className

返回文档中匹配指定的选择器组的所有元素

返回值：是一个伪数组

document.querySelectorAll(“选择器”)

通过子元素获取父节点（parentNode）

子元素.parentNode

通过父元素获取全部子节点（childNodes）

父元素.children

获取到的是一个伪数组，使用的时候需要加上下标，指定子元素

获取元素的属性（getAttribute）

元素对象.getAttribute(“属性”)

//获取元素的高度属性
let height = document.getElementById("div_box").getAttribute("height");

设置元素的属性（setAttribute）

元素对象.setAttribute('属性','属性值')

let height = document.getElementById("div_box").setAttribute("style","width: 100px;height: 100px;");