<ul id="box">
<li>第一个节点</li>
<li>第二个节点</li>
<li>第三个节点</li>
<li>第四个节点</li>
</ul>
var box = document.getElementById('box');
//标准浏览器(非IE6-8)中会把空格和换行当做文本节点处理
console.log(box.childNodes); //NodeList(9) [text, li, text, li, text, li, text, li, text]
//如果只想要元素节点,但是IE6-8下使用children会把注释也当做元素节点
console.log(box.children);
//获取children指定上下文所有元素的子节点兼容IE6+所有浏览器
function children(context){
var res = [],nodeList = context.childNodes;
for(var i = 0;i<nodeList.length;i++){
var item = nodeList[i];
item.nodeType === 1 ? res.push(item):null;
}
return item;
}
console.log(children(box).length);
 

DOM中获取元素的节点兼容IE6-8封装,带jquery源码分析children的更多相关文章

  1. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  2. jQuery 源码分析(二十) DOM操作模块 插入元素 详解

    jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...

  3. jQuery 源码分析(十九) DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...

  4. jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...

  5. Set存储元素为啥是唯一的(以HashSet为例源码分析)

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作,如有错误之处忘不吝批评指正! 说些废话 以前面试的时候会遇到有人问Set 和list的区别 这个很好答,但 ...

  6. jQuery源码分析系列(33) : AJAX中的前置过滤器和请求分发器

    jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求,分别是: 1.前置过滤器 jQuery. ajaxPrefilter 2.请求分发器 jQuery. ajaxTran ...

  7. jQuery源码分析-jQuery中的循环技巧

    作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 前记:本文收集了jQuery ...

  8. jQuery源码分析--为什么在参数列表中传入undefined

    (function(window, undefined){ //jQuery code; })(window); 为什么要传入undefined? 1.没有传入undefined: <!DOCT ...

  9. lodash源码分析之compact中的遍历

    小时候, 乡愁是一枚小小的邮票, 我在这头, 母亲在那头. 长大后,乡愁是一张窄窄的船票, 我在这头, 新娘在那头. 后来啊, 乡愁是一方矮矮的坟墓, 我在外头, 母亲在里头. 而现在, 乡愁是一湾浅 ...

随机推荐

  1. ES:在线迁移集群索引,数据不丢失

    一.背景 生产环境由于某些原因需要跨机房迁移ES集群,或者同机房原有集群中所有节点全部更换,期间ES索引要求完整,客户端请求中断不超过五分钟. 二.应用场景 1.同机房不同集群之间数据迁移: 2.跨机 ...

  2. elasicsearch数据自动清理脚本

    elasticsearch随着保存的数据越来越多,磁盘占用越来越大,有必要进行定期自动清理. 直接上脚本 cat es-index-clear.sh #/bin/bash #查看索引信息 #curl ...

  3. Opengl-法线贴图(用来细化表面的表现表现的凹凸)

    我们通过这张图可以看出来,使用了法线贴图的物体表面更有细节更逼真,其实这就是发现贴图的作用,没什么钻牛角尖的. 其实表面没有凹凸的情况是因为我们把表面一直按照平整来做的,要想突出这个表面的凹凸就要用到 ...

  4. 关于Linux文件系统

    前言 文件系统是在内核中实现,能够对存储在磁盘上的二进制数据进行有效的层次化管理的一种软件.而用户程序为了实现在磁盘上使用或者创建文件,向内核发起系统调用(实际由文件系统向内核发起的系统调用)并转换为 ...

  5. CountDownLatch源码探究 (JDK 1.8)

    CountDownLatch能够实现让线程等待某个计数器倒数到零的功能,之前对它的了解也仅仅是简单的使用,对于其内部如何实现线程等待却不是很了解,最好的办法就是通过看源码来了解底层的实现细节.Coun ...

  6. 身为 Java 程序员必须掌握的 10 款开源工具!

    本文主要介绍Java程序员应该在Java学习过程中的一些基本和高级工具.如果你是一位经验丰富的Java开发人员,你可能对这些工具很熟悉,但如果不是,现在就是是开始学习这些工具的好时机.Java世界中存 ...

  7. SpringBoot&Shiro实现权限管理

    SpringBoot&Shiro实现权限管理 引言 相信大家前来看这篇文章的时候,是有SpringBoot和Shiro基础的,所以本文只介绍整合的步骤,如果哪里写的不好,恳请大家能指出错误,谢 ...

  8. C/C++ 手动开O2

    手动O2比赛不能用,平时玩玩就好 #pragma GCC optimize (2) #pragma G++ optimize (2)

  9. spring——AOP原理及源码(五)

    前情回顾: 在上一篇中,通过 wrapIfNecessary 方法,我们获取到了合适的增强器(日志方法)与业务类进行包装,最终返回了我们业务类的代理对象. 本篇我们将从业务方法的执行开始,看看增强器( ...

  10. 【猫狗数据集】利用tensorboard可视化训练和测试过程

    数据集下载地址: 链接:https://pan.baidu.com/s/1l1AnBgkAAEhh0vI5_loWKw提取码:2xq4 创建数据集:https://www.cnblogs.com/xi ...