获取兼容的DOM子节点

简介:

浏览器对于DOM节点识别并非都是一致的,主要分为两个阵营,ie浏览器和非ie浏览器。(刚刚试了一下,ie9对DOM的识别好像和非ie一样了)。

    ie只把标签识别为节点,回车等文本符并不视为节点。而非ie把回车也视为一个节点。那怎么获取的的节点,在不同浏览器看来,都一样呢。看看下面的例子,大家就明白了。

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>获取兼容的子节点</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
li{list-style:none;}
.bc{border:1px blue solid;font-size:20px;margin:20px;}
</style>
</head>
<body>
    <ul id="all">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<script type="text/javascript">
<!--
  /*检测dom在不同浏览器中的识别情况*/
    var child=document.getElementById("all").childNodes;//获取ul下所有的节点,标签、注释、文本(包括回车)等都是节点。
    document.write("<p class='bc'>"+child.length+"</p>");//节点的个数,兼容问题:ie==>5;非ie浏览器==>11
 
/*获取兼容的dom节点*/ var childs=getChilds(document.getElementById("all")); document.write("<p class='bc'>"+childs.length+"</p>");
function getChilds(node){
var child=node.childNodes; var result=[]; for(var i=0;i<child.length;i++){ if(child[i].nodeType==1){ result.push(child[i]); } } return result; } </script> </body> </html>
复制代码

相关文章
|
11月前
|
JavaScript 算法
【Vue2.0源码学习】虚拟DOM篇-Vue中的DOM-优化更新子节点
【Vue2.0源码学习】虚拟DOM篇-Vue中的DOM-优化更新子节点
50 0
|
11月前
|
JavaScript 算法
【Vue2.0源码学习】虚拟DOM篇-Vue中的DOM-更新子节点
【Vue2.0源码学习】虚拟DOM篇-Vue中的DOM-更新子节点
52 0
|
JavaScript
DOM ------ 子节点第一个元素和最后一个元素
DOM ------ 子节点第一个元素和最后一个元素
|
JavaScript
DOM ------ 父节点&子节点
DOM ------ 父节点&子节点
|
JavaScript 前端开发
【JavaScript】DOM查询(子节点、父节点、兄弟节点)源码详解
【JavaScript】DOM查询(子节点、父节点、兄弟节点)源码详解
179 0
|
JavaScript
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
892 0
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
|
JavaScript
Dom中获取元素的第一个和最后一个子节点与元素节点
Dom中获取元素的第一个和最后一个子节点与元素节点
232 0
Dom中获取元素的第一个和最后一个子节点与元素节点
|
5天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
5天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
5天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)