JS学习笔记DOM基础-字节点,父节点
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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基础-字节点,父节点的主要内容,如果未能解决你的问题,请参考以下文章