Dom选择器初识，节点树

一、Dom选择器：
1、id选择器：
getElementById:

<div id="only"></div>
...
var div = document.getElementById('only');

2、标签名选择器：
getElementsByTagName：

<div id="only"></div>
...
var div = document.getElementsByTagName('div')[0];

3、name选择器:
getElementsByName：

<div id="only" name="pipi"></div>
...
var div = document.getElementsByName('pipi')[0];

4、class选择器:
document.getElementsByClassName：

<div id="only" name="pipi" class="hp"></div>
...
var div = document.getElementsByClassName('hp')[0];

一般TagName选择器用得最多

附: query选择器:

<div>
		<span>
			<strong class = "demo">
				
			</strong>
		</span>
	</div>
	<div>
		<strong>
			
		</strong>
	</div>
	...
	var strong = document.querySelector('div>span strong.demo');
	var strong1 = document.querySelectorAll('div > span strong.demo');

缺点:1、兼容问题；2、并不能实时的改变。