Dom1 子节点
2017-03-15 本文已影响0人
maomizone
childNodes：数组存储,包含文本节点和元素节点
children： 数组存储,包含元素节点
- nodeType==3 文本节点 一串文字dasdsafd 没有标签
- nodeType==1 元素节点 ```
<a></a>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li{
list-style: none;
width: 200px;
height: 20px;
margin: 5px;
}
</style>
<script>
window.onload = function(){
var ul = document.getElementById("ul");
// nodeType==3 文本节点 一串文字dasdsafd 没有标签
// nodeType==1 元素节点
alert(ul.childNodes.length); // 9
alert(ul.children.length); // 4
// 包含文本节点和元素节点
for(var i = 0; i < ul.childNodes.length; i++){
if(ul.childNodes[i].nodeType == 1){
ul.childNodes[i].style.backgroundColor = "red";
}
}
// 只包含元素
for(var i = 0; i < ul.children.length; i++){
ul.children[i].style.backgroundColor = "red";
}
var aList = document.getElementsByTagName("a");
for(var i = 0; i < aList.length; i++){
aList[i].onclick = function(){
this.parentNode.style.display = "none";
};
}
}
</script>
</head>
<body>
<div>
<ul id="ul">
<li>1dfdsfgdgd<a href="javascript:;">隐藏</a></li>
<li>2shdghgfh<a href="javascript:;">隐藏</a></li>
<li>3rtgretye<a href="javascript:;">隐藏</a></li>
<li>4ytrrrrrrrrurtu<a href="javascript:;">隐藏</a></li>
</ul>
javascript:是表示在触发 a 默认动作时，执行一段JavaScript代码，
<br/>
而 javascript:; 表示什么都不执行，这样点击 a 时就没有任何反应。
</div>
</body>
</html>
