<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. Python不使用元类创建缓存实例

    问题 当创建类实例时我们想返回一个缓存引用,让其指向上一个用同样参数(如果有的话)创建出来的类实例. 这个问题常常出现在当我们想确保针对一组输入参数只会有一个类实例存在时. 解决方法: 使用一个与类本 ...

  2. javascript中的function命名空間與模擬getter、setter

    function的命名空間 在javascript中,function也可以擁有自己的命名空間例如以下這段程式碼: 12345678 function () { return 'I am A';} A ...

  3. MySQL安装和常用命令

    一.安装MySQL groupadd mysqluseradd -r -g mysql mysqlgroups mysqlfind / -name mysql | xargs rm -rfwget h ...

  4. Hello World!(这不是第一篇)

    如题,这不是第一篇blog,但是为了表示这个闲置了1年多的blog现在被我正式启用了,我还是走个过场吧. #include <iostream> using namespace std; ...

  5. 对话|首席研究员童欣:从长远看,AR的应用范围远比VR广泛

    ​童欣博士现任微软亚洲研究院网络图形组首席研究员.1993年毕业于浙江大学计算机系,获工学学士学位:1996年获浙江大学计算机系硕士学位:1999年获清华大学计算机系博士学位,同年加入微软亚洲研究院. ...

  6. C++走向远洋——33(静态成员的应用)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:time.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  7. 2、【Spark】Spark环境搭建(集群方式)

    Spark集群方式搭建结构如图所示,按照主从方式.

  8. 启动时查看配置文件application.yml

    Spring Boot Application 事件和监听器 在多环境的情况下. 可能需要切换配置文件的一个对应的属性来切换环境 面临的问题就是 如何在springboot加载完配置文件的时候就可以立 ...

  9. python从一个目录中复制全部文件图片至另一个目录中,及删除指定目录中的图片

    import shutil import os #目录自己改一下即可,复制 path = "./static/imgs/" new_path = "./static/up ...

  10. (数据科学学习手札79)基于geopandas的空间数据分析——深入浅出分层设色

    本文对应代码和数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 通过前面的文章,我们已经对geopanda ...