原生JS获取DOM元素的方法

JS获取DOM元素的方法（8种）

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的
获取body的方法（document.body）
document.body是专门获取body这个标签的。

1.通过ID获取

	<div id="app"><div>
	var div = document.getElementBuId('app')

• 返回值值获取到一个元素，没找到返回null
• 不需要写#
• 必须是字符串格式

2.通过name属性

	<input type="text" name="password" />
	var div = document.getElementByName('password')

• 必须传参数，参数是获取元素的name属性。

3.通过标签名

	<p>文字文字文字</p>
	<p>文字文字文字</p>
	<p>文字文字文字</p>
	<p>文字文字文字</p>
	var p = document.getElementByTagName('p')
	for(var i =0; i<p.lenght; i++){
		console.log(p[i])
	}

• 必须传参数，参数是获取元素的标签名。

4.通过类名

	<div class="app"></div>
	var app = document.getElementByClassName('app')

• 必须传参数，参数是获取元素的标签名。

5.通过选择器获取一个元素

	<div id="app" class="layout"></div>
	var app = document.querySelector('#app')
	var layout = document.querySelector('.layout')
	var div = document.querySelector('div')

• 必须传参数，参数是通过选择器获取元素
• 返回值只获取到第一个元素。

6.通过选择器获取一组元素

	<ul class="list">
		<li class="item">文字1</li>
		<li class="item">文字2</li>
		<li class="item">文字3</li>
		<li class="item">文字4</li>
		<li class="item">文字5</li>
	</ul>
	var li = document.querySelectorAll('.list .item')
	for(var i in li){
		console.log(li[i])
	}

• 必须传参数，参数是通过父级选择器获取子级选择器
• 返回值是一个类数组