首页 > 代码库 > 【JS学习笔记】DOM基础-字节点，父节点
【JS学习笔记】DOM基础-字节点，父节点
一、DOM基础
（1）什么是DOM？DOM，即document，是用来操作页面上的元素，比如操作div获取，修改样式等。是JS的组成部分，还是一套规范。
（2）浏览器的支持情况
现在主流的浏览器有3种，分别是IE,Chrome,Firefox。
IE：在IE6-8版本中，对DOM的支持差不多是百分之十几差不多了，但是到了IE9就有了质的飞跃。
Chrome：介于两者之间，在60%左右，对DOM支持的不是那么的好也不是那么的差。
Firefox：对于DOM的支持几乎可以用99%来形容。
二、DOM节点
在CSS阶段，我们认为是标签；
在JS阶段，我们认为是元素；
在DOM阶段，我们认为是节点。
（1）childNodes
获取子节点
特别注意，在Chrome中和IE9中，版本越高越会出现问题，它们会把空白文本也当做子节点，可是在IE6-8中却会正常运行，出现正确的子节点数，十分诡异。
文本节点，纯文本或者空白文本，比如aaaaa
元素节点，比如<span>aaaaaa</span>
nodeType，节点的类型
nodeType==3——>文本节点
nodeType==1——>元素节点
将childNodes和nodeType配合起来使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子节点</title>
<script>
window.onload = function()
{
var oUl=document.getElementById(‘ul1‘);
//alert(oUl.childNodes.length);/*在Chrome中，空的文本也会被当做子节点*/
//nodeType==3——>文本节点
//nodeType==1——>元素节点
for(var i=0;i<oUl.childNodes.length;i++)
{
//alert(oUl.childNodes[i].nodeType);
//判断子节点是不是元素节点
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background=‘red‘;
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
aaaaaaaa 文本节点
<span>aaaaaaaa元素节点</span>
</body>
</html>
children——非常好用，它只包括元素节点却不包括文本节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子节点</title>
<script>
window.onload = function()
{
var oUl=document.getElementById(‘ul1‘);
//alert(oUl.childNodes.length);/*在Chrome中，空的文本也会被当做子节点*/
//nodeType==3——>文本节点
//nodeType==1——>元素节点
/*for(var i=0;i<oUl.childNodes.length;i++)
{
//alert(oUl.childNodes[i].nodeType);
//判断子节点是不是元素节点
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background=‘red‘;
}
}*/
alert(oUl.children.length);
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
aaaaaaaa 文本节点
<span>aaaaaaaa元素节点</span>
</body>
</html>
（2）parentNode，只要是父节点不变，是不会发生变化的
例子：点击链接，隐藏整个li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父节点的应用</title>
<script>
window.onload = function()
{
var aA=document.getElementsByTagName(‘a‘);
for(var i=0;i<aA.length;i++)
{
aA[i].onclick = function ()
{
this.parentNode.style.display="none";/*this指代a的父节点是<li>，则把a所在的li隐藏掉*/
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>aaaaaaa <a href="javascript:;">隐藏</a></li>
<li>bbbbbbb <a href="javascript:;">隐藏</a></li>
<li>ccccccc <a href="javascript:;">隐藏</a></li>
<li>ddddddd <a href="javascript:;">隐藏</a></li>
<li>eeeeeee <a href="javascript:;">隐藏</a></li>
</ul>
aaaaaaaa 文本节点
<span>aaaaaaaa元素节点</span>
</body>
</html>
（3）offsetParent——和parentNode不同，它是获取元素用来定位的父级，不一定是前一个父节点，只能是有定位的父节点，可能是上级可能是上上级等等
获取元素在页面上的实际位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>offsetParent</title>
<style>
#div1{
width:200px;
height:200px;
background-color:#CCC;
margin:100px;
position:relative;
}
#div2{
width:100px;
height:100px;
background-color:red;
position:absolute;
left:50px;
top:50px;
}
</style>
<script>
window.onload = function ()
{
var oDiv2=document.getElementById(‘div2‘);
alert(oDiv2.offsetParent);
};
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
【JS学习笔记】DOM基础-字节点，父节点