Silentash-默尘

获取DOM节点的方法有很多，如常用的getElementById()、getElementsByTagName()，前者返回一个节点元素，后者返回的是节点的集合。看似相同，实际上其中大有文章：
1、getElementById()
返回的节点可以保存到变量中，即便使用removeChild()方法移除，也能再通过保存的变量使用该节点。
测试下面的代码：

<div id="test">hello world</div>
<script type="text/javascript">
	(function(){
		var oDiv = document.getElementById('test');
		document.body.removeChild(oDiv);
		alert(oDiv.innerHTML);//hello world
	})()
</script>

2、getElementsByTagName()
返回的值仅仅是对DOM节点地址的引用，如果使用removeChild()删除节点，返回值是会变化的。可能用图示更清晰吧

测试下面的代码加深印象：

<ul id="test">	<li>hello world</li>	<li>hello world2</li></ul><script type="text/javascript">
	(function(){
		var oDiv = document.getElementById('test'),oLi = document.getElementsByTagName('LI');
		oDiv.removeChild(oLi[0]);
		alert(oLi[0].innerHTML);//期望的是hello world,实际上输出的是hello world2
	})()
</script>

这种引用问题时有发生，解决的方法可用数组结合去存储返回值，类似于getElementById:

<ul id="test">	<li>hello world</li>	<li>hello world2</li></ul><script type="text/javascript">
	(function(){
		var oDiv = document.getElementById('test'),oLi = document.getElementsByTagName('LI'),arr = [];
		arr[0] = oLi[0];
		arr[1] = oLi[1];//数量多了可用循环遍历
		oDiv.removeChild(oLi[0]);
		alert(arr[0].innerHTML);//hello world
	})()
</script>

不过问题又来了，如果我们用innerHTML=”"代替removeChild，你会发现在IE浏览器下最后的输出会是空的。

<ul id="test">	<li>hello world</li>	<li>hello world2</li></ul><script type="text/javascript">
	(function(){
		var oDiv = document.getElementById('test'),oLi = document.getElementsByTagName('LI'),arr = [];
		arr[0] = oLi[0];
		arr[1] = oLi[1];//数量多了可用循环遍历
		oDiv.innerHTML='';
		alert(arr[0].innerHTML);//IE下为空
	})()
</script>

再次改进存储方法，使用强大的cloneNode()

<ul id="test">	<li>hello world</li>	<li>hello world2</li></ul><script type="text/javascript">
	(function(){
		var oDiv = document.getElementById('test'),oLi = document.getElementsByTagName('LI'),arr = [];
		arr[0] = oLi[0].cloneNode(true);
		arr[1] = oLi[1].cloneNode(true);
		oDiv.innerHTML='';
		alert(arr[0].innerHTML);//hello world
	})()
</script>