<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. 安卓权威编程指南 挑战练习:实现高效RecyclerView刷新

    Adapter的notifyDataSetChanged方法会通知RecyclerView刷新全部的可见列表项. 在CriminalIntent应用里,这个方法不够高效,我们知道,返回CrimeLis ...

  2. Python——8函数式编程①

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

  3. Vue组件传递数据

    组件命名 1.字母全小写且必须包含一个连字符 my-componnect 2.使用 kebab-case(短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例 ...

  4. Matplotlib数据可视化(4):折线图与散点图

    In [1]: from matplotlib import pyplot as plt import numpy as np import matplotlib as mpl mpl.rcParam ...

  5. 这么香的Chrome插件,你都安装了吗?

    工欲善其事必先利其器,今天长话短说,介绍13个敏捷.高效的Chrome插件 根据使用方式,本人将其划分为三大类: 开发者工具 日常效率工具类 浏览器管理类 开发者工具 1. Web Developer ...

  6. pip install mysqlclient报错(OSError: mysql_config not found)

    报错截图 一般情况是系统没有安装libmysqld-dev 执行 sudo apt install libmysqld-dev完成安装后再 pip install mysqlclient就可以了(系统 ...

  7. 7-36 jmu-python-统计字符个数 (10 分)

    输入一个字符串,统计其中数字字符及小写字符的个数 输入格式: 输入一行字符串 输出格式: 共有?个数字,?个小写字符,?填入对应数量 输入样例: helo134ss12 输出样例: 共有5个数字,6个 ...

  8. 面向web前端及node开发人员的vim配置

    鉴于 window 下基本用不到 vim,所以下面内容不再提及 window,具体可以在相应 github 中查看手册操作基础:已装有上有 nodejs(npm).没装的可以移步官网:https:// ...

  9. <select>标签,不要在select标签中写value属性!!!

    <select> select标签,一个选择框标签,在开发中很多时候会用到这个标签,例如选择生日19**年,或者在segmentfault中编辑文章时选择'原创','转载',还是'翻译'等 ...

  10. hadoop之完全分布式集群配置(centos7)

    一.基础环境 现在我们有两台虚拟机了,再克隆两台: 克隆好之后需要做三件事:1.更改主机名称 2.修改ip地址 3.将ip地址和对应的主机号加入到/etc/hosts文件中 1.永久修改主机名 hos ...