getElementByTagName与querySelectorAll

区别1

getElementByTagName：
这种方式获取到的类数组，无法通过 forEach 进行遍历（可以通过for循环）
querySelectorAll：
可以通过forEach 进行遍历。

区别2

通过 getElementByTagName 获取这种方式获取到的类数组是动态的；而 querySelectorAll 这种方式获取到的是静态的（但是如果是 querySelectorAll 获取到的dom内部发生的变化，依旧是会动态改变的）

代码：

<div>
		<p></p>
		<p></p>
		<p></p>
	</div>
	<script>
		var div = document.getElementsByTagName("div")[0];
		var elems = document.querySelectorAll("div p");
		console.log(elems);//输出querySelectorAll类数组
		var ps = document.getElementsByTagName("p");
		console.log(ps);//输出getElementsByTagName类数组
		var p = document.createElement("p");//新建一个p标签
		div.appendChild(p);//加入div
	</script>

结果：接下来，我们将一个新的标签放到第一个p标签的内部

代码：

<div>
		<p></p>
		<strong></strong>
		<p></p>
		<i></i>
	</div>
	<script>
		var div = document.getElementsByTagName("div")[0];
		var elems = document.querySelectorAll("div p")[0];
		var p = document.createElement("p");
		elems.appendChild(p);
		console.log(elems);
	</script>

结果：
可以发现，通过 querySelectorAll 获取到的dom并不是绝对静态的，添加到这些dom内部的变化，依旧可以检测到。