DOM：使用node节点获取第一个first子元素和最后一个last子元素

获取第一个子元素：
parentNode.firstChild，但要注意的是，firstChild获取的是第一个子节点，不管第一个是文本节点还是元素节点，如果找不到返回null。
获取最后一个子元素：
parentNode.lastChild，但要注意的是，lastChild获取的是最后个子节点，不管最后一个是文本节点还是元素节点，如果找不到返回null。

<ul>
	<li>11</li>
	<li>22</li>
	<li>33</li>
</ul>
<script>
	var uls = document.querySelector("ul");
	console.log(uls.firstChild); // 获取到的是text文本节点
	console.log(uls.lastChild); // 获取到的也是text文本节点
</script>

但我们在实际开发中要获取的大多数都是元素节点，所以可以使用另一个方法：parentNode.firstElementChild，它返回的第一个子元素节点，找不到则返回null。
parentNode.lastElementChild，它返回的最后一个子元素节点，找不到则返回null。
但这两个方法在IE9以上才支持，如果不考虑兼容性问题，就可以使用。

实际开发中，我们经常这么来写，既没有兼容性问题，也能获取到第一个或最后一个子元素。记住此写法就行
代码示例：

<ul>
	<li>11</li>
	<li>22</li>
	<li>33</li>
</ul>
<script>
	var uls = document.querySelector("ul");
	console.log(uls.children[0]); // 永远获取第一个元素
	console.log(uls.children[uls.children.length - 1]); // 永远获取最后一个元素，动态获取最后一个元素让ul的子元素的长度-1
</script>