DOM基础操作

最新推荐文章于 2024-08-22 14:32:34 发布

青天诀

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量458

点赞数

分类专栏： Web前端文章标签： Web前端 javascript

本文链接：https://blog.csdn.net/u012193330/article/details/41214359

版权

Web前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

html代码：

<body>
		<ul id="list">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>

javascript 代码如下：

<script>
	window.οnlοad=function(){
	var oUl=document.getElementById('list');
	for(var i=0;i<oUl.childNodes.length;i++)
	{
		if(oUl.childNodes[i].nodeType==3)//nodeType=3 代表的是此节点为文本节点
		{
			alert('3');
		}
		if(oUl.childNodes[i].nodeType==1)
<span style="white-space:pre">		</span>{
<span style="white-space:pre">			</span>alert('1');
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}
};
</script>

如果我们要获取ul里的子元素，我们需要用到childNodes，childNodes包括里面的文本节点和元素节点，所以如果我们弹出childNodes.length时，弹出的是13，而不是我们希望的6

childeNodes 在高版本的浏览器中包含文本节点、元素节点，在低版本的浏览器中是正常的
childeNodes有一个替换的标签children，它只包含元素节点，兼容各种浏览器，所以以后可以使用children来代替用到childNodes的地方
firstChild lastChild 也有这样的问题，对于高版本不适用，在高版本中使用firstElementChild lastElementChild，通过if语句，去兼容各种浏览器
offsetParent 取得的是往上第一个设置position:relative的父级元素；parentNode，取得是父级元素

下面是自定义的一个函数，这个函数可以取得具有class为同一样式的元素集合

function getByClass(oParent,sClass)
{
	var aLi=oParent.getElementsByTagName('*');
	for(var i=0;i<aLi.length;i++)
	{
		if(aLi[i].className=sClass)
		{
			result.push(aLi[i]);
		}
	}
	return result;
}