一、操作子节点
-
childNodes
通过该方式可以获取父节点下的所有子节点，但是由于浏览器的差异，这写节点中可能包含文本节点。
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function (){
var oUl = document.getElementById(‘ul1‘);
alert(oUl.childNodes.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
我们通过浏览器打开上面的代码会发现提示框是5。这是因为 ul 标签中的空白处可以被视为文本节点。如果只直接访问 li 节点则需要进行节点类型判断。
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function (){
var j=0;
var node;
var oUl = document.getElementById(‘ul1‘);
for(i=0; i<oUl.childNodes.length; i++){
//1表示该节点是一个元素节点
if(oUl.childNodes[i].nodeType == 1)
j++;
}
alert(j);
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
-
children
通过该方法可以直接获取父节点下的元素节点
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function (){
var oUl = document.getElementById(‘ul1‘);
alert(oUl.children.length);
oUl.children[0].style.background = "red";
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
二、操作父节点
-
parentNode
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function(){
var oAs = document.getElementsByTagName(‘a‘);
for(var i=0; i<oAs.length; i++){
oAs[i].onclick = function (){
this.parentNode.style.display = "none";
};
}
}
</script>
</head>
<body>
<ul id="ul1">
<li><a href ="javascript:void(0);">隐藏</a></li>
<li><a href="javascript:void(0);">隐藏</a></li>
</ul>
</body>
</html>
通过上面的方式可以让父节点隐藏
-
offsetParent
寻找脱离文档流的父节点(使用了绝对定位或相对定位的父节点)
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById(‘div2‘);
oDiv.offsetParent.style.backgroundColor="yellow";
}
</script>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
#div2{
width: 100px;
height: 100px;
position: absolute;
top: 20px;
left: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
如果去掉#div1中的position属性，则整个body的背景会变为黄色，如果不去则只有div1的背景是黄色
时间： 2024-08-07 21:19:44