原生js获取元素的六种方式

在HTML文件中代码自上而下执行，下面这部分js代码置于body标签中的html代码上面时，显示结果如注释：

<script>
	// getElementById()  拥有特定ID的元素不存在则返回null。只有在作为 document 的方法时才能起作用，而在DOM中的其他元素下无法生效。
	var main = document.getElementById('main');
	console.log(main); // null 代码自上而下执行，执行到这里的时候还没有这个div
	console.dir(main); // null

	getElementsByTagName()  可以动态获取集合
	var divs = document.getElementsByTagName('div');
	console.log(divs.length);  // 0

</script>

js代码置于html代码下方时，可以正确获取到相应的DOM元素：

<div>1</div>
<div id="main">2
	<span>41</span>
	<span>42</span>
</div>
<div class="div3">3</div>
<div name="name">4</div>
<div class="user-panel main">
	<input type="text" name="login">
</div>

<script>
	// getElementById()
	var main = document.getElementById('main');
	console.log(main); // <div id = "main">2</div>
	console.dir(main); // 参数为object    div#main   对象类型 __proto__: HTMLDivElement 

	// getElementsByTagName()  
	var divs = document.getElementsByTagName('div');
	console.dir(divs); // __proto__: HTMLCollection 集合  伪数组
	for (var i = 0; i < divs.length; i++) {
		console.dir(divs[i]);  // 每一个div的类型都是HTMLDivElement
	}
	
	var main = document.getElementById('main');
	var span = main.getElementsByTagName('span'); // 作为document或其他元素的方法时都生效
	console.dir(span);  // HTMLCollection

	// 其他方法

	// 在IE和Opera中， getElementsByName()  方法还会返回那些 id 为指定值的元素
	var div = document.getElementsByName('main');
	console.dir(div); // NodeList  IE 和 Edge 都返回一个 HTMLCollection, 而不是NodeList 。

	// getElementsByClassName() 浏览器兼容性 IE9+  可以在任何元素上调用
	var div = document.getElementsByClassName('div3');
	console.dir(div); //  HTMLCollection
	console.log(div);

	// querySelector()  返回匹配的第一个 HTMLElement对象
	var main = document.querySelector('#main');
	var div3 = document.querySelector('.div3');
	console.dir(main);
	console.dir(div3);

	// querySelector()  querySelectorAll() 浏览器兼容性问题 IE8+ 移动端可以使用 
	var span = document.querySelector('span');   // 只能获取到一个元素
	console.dir(span); // HTMLSpanElement
	var span = document.querySelectorAll('span');  
	console.dir(span); // NodeList
	
	// 复杂表示
	var el = document.querySelector("div.user-panel.main input[name='login']");
	console.dir(el);
	
</script>