DOM节点1
<!-- DOM节点1
childNodes nodeType
获取子节点
children
parentNode
例子：点击链接，隐藏整个li
offsetParent
例子：获取元素在页面上的实际位置 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function() {
alert(document.body.childNodes[1].nodeType);
}
</script>
</head>
<body>
aaafsa
<span>fff</span>
</body>
</html>
<!--
childNodes 和 nodeType （1）
nodeType: 1.element 2.attr 3.text
nodeName nodeValue -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function()
{
var oUl = document.getElementById(‘ul1‘);
var i = 0;
for(i; i< oUl.childNodes.length; i++)
{
if(oUl.childNodes[i].nodeType == 1)
{
oUl.childNodes[i].style.background=‘red‘;
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
</body>
</html>
<!-- childNodes 和 nodeType（2） -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function()
{
var aA = document.getElementsByTagName(‘a‘);
var i = 0;
for(i; i< aA.length; i++)
{
aA[i].onclick = function()
{
this.parentNode.style.display = ‘none‘;
}
}
}
</script>
</head>
<body>
<ul>
<li>aass<a href="javascript:">隐藏</a></li>
<li>5453<a href="javascript:">隐藏</a></li>
<li>cvxc<a href="javascript:">隐藏</a></li>
<li>ertert<a href="javascript:">隐藏</a></li>
</ul>
</body>
</html>
<!-- parentNode -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="div1" style="width:100px; height:100px; background:red; margin:100px;">
<div id="div2" onclick="alert(this.offsetParent.tagName)" style="width:100px; height:100px; background:yellow; position:absolute; left:100px; top:100px;"></div>
</div>
</body>
</html>
<!-- offsetParent -->
时间： 2024-08-14 16:09:33