<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. numpy的基础运算1

    import numpy as np #int16和int32内存少,int64内存大但精度高 a = np.array([1,23,4],dtype=np.int32) b = np.zeros(( ...

  2. CPU网卡亲和绑定

    #!/bin/bash # # Copyright (c) , Intel Corporation # # Redistribution and use in source and binary fo ...

  3. linux常用命令使用指南

    <软件自动化测试开发>出版啦 1 系统相关 useradd/userdel   添加用户/删除用户 su      切换用户命令 ls        用于查看所有文件夹的命令 列出目录内容 ...

  4. Leetcode 142题 环形链表 II(Linked List Cycle II) Java语言求解

    题目描述: 给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 p ...

  5. AI:拿来主义——预训练网络(一)

    我们已经训练过几个神经网络了,识别手写数字,房价预测或者是区分猫和狗,那随之而来就有一个问题,这些训练出的网络怎么用,每个问题我都需要重新去训练网络吗?因为程序员都不太喜欢做重复的事情,因此答案肯定是 ...

  6. 达拉草201771010105《面向对象程序设计(java)》第三周学习总结

    达拉草201771010105«面向对象程序设计(java)»第三周学习总结 第一部分:实验部分  1.实验目的与要求 (1)进一步掌握Eclipse集成开发环境下java程序开发基本步骤: (2)熟 ...

  7. 初识Arduino

    Arduino是一款便捷灵活.方便上手的开源电子原型平台.包含硬件(各种型号的Arduino板)和软件(Arduino IDE).由一个欧洲开发团队于2005年冬季开发.其成员包括Massimo Ba ...

  8. python随用随学-元类

    python中的一切都是对象 按着我的逻辑走: 首先接受一个公理,「python中的一切都是对象」.不要问为什么,吉大爷(Guido van Rossum,python之父)人当初就是这么设计的,不服 ...

  9. text-decoration与color属性

    text-decoration属性值 如果指定某个标签的text-decoration属性时,希望为其添加多个样式(比如:上划线.下划线.删除线),那么需要把所有的值合并到一个规则中才会生效 p{ t ...

  10. FCC 成都社区·技术周刊 第 14 期

    [前端] 1. React Fiber 架构 React16 启用了全新的架构,叫做 Fiber,其最大的使命是解决大型 React 项目的性能问题,再顺手解决之前的一些痛点. 详情:https:// ...