18、Dom--childNodes和nodeType的结合使用

来源：互联网发布：mac 更改ruby路径编辑：程序博客网时间：2024/06/06 02:26

1、DOM节点
. childNodes nodeType 两个一起使用,避免浏览器的差异
.获取子节点(第一级别的节点信息)
.IE获取的就是，标签节点的个数
.火狐和谷歌，获取的是标签节点和文本节点的个数
.children
. nodeType 1 标签节点
nodeType 3 文本信息

. parentNode 当前元素的父节点信息
.例子

点击连接,隐藏整个li信息

1.1、html代码

<body><input id="oValue" /><button type="button" id="oBtn">点击</button><ul id="oul"><li>111<a href="javascript:void(0);">删除</a></li><li>222<a href="javascript:void(0);">删除</a></li><li>333<a href="javascript:void(0);">删除</a></li><li>444<a href="javascript:void(0);">删除</a></li></ul></body>

1.2、JavaScript代码

<script type="text/javascript">//1、childNodes和nodeType 结合使用，处理 标签元素//window.onload = function() {//var oUl = document.getElementById("oul");//var aNodes = oUl.childNodes;//for (var i = 0; i < aNodes.length; i++) {//if (aNodes[i].nodeType == 1) {//aNodes[i].style.background = 'red';//    }//}//}//2、 利用parentNode, 隐藏li元素节点window.onload = function() {var aA = document.getElementsByTagName("a");var oUl = document.getElementById("oul");for (var i = 0; i < aA.length; i++) {aA[i].onclick = function() {//在Ul里面,删除li节点//this.parentNode 就是li节点this.parentNode.style.display = "none";}}}</script>

1 0