js DOM补充及 超强querySelector()

1.补充

<script type="text/javascript">
			//在document中有一个属性body，它保存的是body的引用
			var body = document.body;
			//document.documentElement保存的是html根标签
			var html = document.documentElement;
			//页面里的所有元素
			var all = document.all;
			console.log(all[0]);
			//这样也是获取所有元素
			all = document.getElementsByTagName("*");
			
			/**
			 * getElementsByclassName()可以根据class属性值获取一组元素节点对象,但是该方法
			 * 不支持IE8及以下的浏览器
			 * */
			var con = document.getElementsByClassName("cont");
			console.log(con.length);
			
			
			//document.queryselector()
			/* document.queryselector()
			-需要一个选择器的字符串作为参数，
			可以根据一个CSS选择器来查询一个元素节点对象 */
			/**
			 *document.queryselector() 
			 * 使用该方法总会返回唯一的一个元素，
			 * 如果满足条件的元素有多个，那么它只会返回第一个
			 * */
			var res = document.querySelector("#box div");
			res = document.querySelector("#box");
			console.log(res);
			
			/**
			 * document.querySelectorAll()
			 * 该方法和querySelector()用法类似，
			 * 不同的是它会将符合条件的元素封装到一个数组中					返回
			 * */
		</script>

1.1body

在document中有一个属性body，它保存的是body的引用
var body = document.body;

1.2 html

document.documentElement保存的是html根标签
var html = document.documentElement;

1.3 all

页面里的所有元素
var all = document.all;
这样也是获取所有元素
all = document.getElementsByTagName("*");

1.4getElementsByclassName()可以根据class属性值获取一组元素节点对象,但是该方法

		 * 不支持IE8及以下的浏览器

getElementsByclassName()可以根据class属性值获取一组元素节点对象,但是该方法
* 不支持IE8及以下的浏览器

2.querySelector()和querySelectorAll()

			/* document.queryselector()
			-需要一个选择器的字符串作为参数，
			可以根据一个CSS选择器来查询一个元素节点对象 */
			/**
			 *document.queryselector() 
			 * 使用该方法总会返回唯一的一个元素，
			 * 如果满足条件的元素有多个，那么它只会返回第一个
			 * */
			var res = document.querySelector("#box div");
			res = document.querySelector("#box");
			console.log(res);
			
			/**
			 * document.querySelectorAll()
			 * 该方法和querySelector()用法类似，
			 * 不同的是它会将符合条件的元素封装到一个数组中					返回
			 * */

document.querySelectorAll()会将符合条件的元素封装到一个数组中