浅谈DOM（一）

最新推荐文章于 2022-07-04 20:19:44 发布

原创最新推荐文章于 2022-07-04 20:19:44 发布 · 677 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM #javascript

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了DOM中的关键概念，包括childNodes、nodeType、children等属性的功能及使用方法，并探讨了不同浏览器间的兼容性问题。

今天我们来了解下DOM的一些基础知识。

DOM节点

1、childNodes

返回节点的所有子节点的集合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>childNodes</title>
</head>
<body>
	<ul id="ul1">
		<li>111</li>
		<li>222</li>
		<li>333</li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	alert(oUl.childNodes.length);
}
</script>

通过上面的代码，我们发现在ie下子节点个数是3，而在firefox下子节点个数是7，这是为什么呢？后面会告诉原因。

2、nodeType

返回节点的类型（整数）具体数值参考这里：http://www.w3school.com.cn/htmldom/dom_nodes_info.asp

回到刚才的代码，我们来看下ul下的第一个子节点的类型是什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>nodeType</title>
</head>
<body>
	<ul id="ul1">
		<li>111</li>
		<li>222</li>
		<li>333</li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	alert(oUl.childNodes[0].nodeType);
}
</script>

可以看出在ie下返回的是1，也就是元素节点；在firefox下返回的是3，文本节点。

通过上面例子我们可以得到这样的信息，firefox把空格也一起算进去，所以会显示有7个子节点。

那么如何做兼容呢？答案是children

3、children

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>children</title>
</head>
<body>
	<ul id="ul1">
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	alert(oUl.children.length);	//ie => 3，firefox => 3。children可以看做childNodes兼容版
}
</script>

4、parentNode

返回当前节点的父节点，ie和firefox都兼容

例子：点击链接，隐藏整个li

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>parentNode</title>
</head>
<body>
	<ul id="ul1">
		<li>11111 <a href="javascript:;">隐藏</a></li>
		<li>22222 <a href="javascript:;">隐藏</a></li>
		<li>33333 <a href="javascript:;">隐藏</a></li>
		<li>44444 <a href="javascript:;">隐藏</a></li>
		<li>55555 <a href="javascript:;">隐藏</a></li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	var aA = oUl.getElementsByTagName('a');
	
	for(var i = 0; i < aA.length; i++){
		aA[i].onclick = function(){
			this.parentNode.style.display = 'none';
		}
	}
}
</script>

5、首尾子节点（有兼容问题）

firstChild //for ie

firstElementChild //for firefox

返回节点的第一个子节点

lastChild //for ie

lastElementChild //for firefox

返回节点的最后一个子节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>firstChild和firstElementChild</title>
</head>
<body>
	<ul id="ul1">
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	
	//oUl.firstChild.style.background = 'red';	//for ie
	//oUl.firstElementChild.style.background = 'red';	//for firefox
	
	//for ie and firefox
	var oFirst = oUl.firstElementChild || oUl.firstChild;
	oFirst.style.background = 'red';
}
</script>

6、兄弟节点（有兼容问题）

nextSibling //for ie

nextElementSibling //for firefox

返回节点的后一个兄弟节点

previousSibling //for ie

previousElementSibling //for firefox

返回节点的前一个兄弟节点

PS：博客搬家了，以后不再优快云更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/