在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等。。对于获取子元素还有另外一种获取方法ChildNodes

不过ChidNodes在高级浏览器除（IE6-8）里面来说是"不太正常"的,因为它除了获取到了元素节点的同时也获取到了文本节点，这就是传说中的买一送一？不过，这个送一的活动咱们不想要的时候可以和nodeType结合，就可以进行筛选。代码如下

当然，这个判断是针对高级浏览器。IE6-8是不要进行nodeType的判断的，因为它本来获取的就是只有元素节点，没有文本节点。

除了childNodes这种获取子元素的方法以外，还有一个方法叫做children，这个是不要判断兼容性的，IE6-8，其他高级浏览器都支持。具体用法如下：

再说说跟这两个相关的获取节点的方法：firstChild（firstElementChild）[第一个子元素]、lastChild（lastElementChild）[最后一个子元素]、nextSibling(nextElementSibling)[同级的下一个元素]、previousSibling(previousElementSibling)[同级的上一个元素]、parentNode[父节点]

其中括号里面的是在高级浏览器中获取元素节点的方法，括号外（IE6-8）和括号内(高级浏览器)就相当于是解决一个兼容性问题吧。都比较简单，我就不举例子了。

获取子元素节点(children,childNodes)的更多相关文章

  1. 原生js获取子元素

    感谢原文作者:归一山人 原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html 获取子元素的方法有 //获取第一个demo类 dom = d ...

  2. jquery获取子元素

    Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...

  3. jquery只获取自身文本节点，不获取子元素的

    jQuery.text()方法时候,会把子元素的文本也获取到,以下方法可获取自身文本节点,不包括子元素 <div id="demo">只获取我<a href=&q ...

  4. 由获取子元素的方法find和children所获

    html代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  5. js 下获取子元素的方法

    笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...

  6. jQuery获取子元素个数的方法

    //获取id=div1下的子元素的个数 $('#id').children().length; //获取id=div1下的p元素个数 $('#id').children('p').length;

  7. jQuery获取子元素的个数

    一.获取div下的子元素的个数 $("div").children().length; 二.获取div下的span子元素的个数 $("div").childre ...

  8. 一个样例看清楚JQuery子元素选择器children()和find()的差别

    近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.htm ...

  9. jquery 获取子元素的限制jquery

    今天练习jqueryAPI发现一个问题就是子元素如果采用nth-child,元素不同就获取不到,因此一个父元素下的子元素标签必须相同,如果不同第一个元素可以用这个方法实现,但是如果第二元素及以后如果出 ...

随机推荐

  1. 设置Acad2008默认启动 win10设置默认cad2008启动 调试设置.

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\AutoCAD.Drawing.17\shell\open\command]@=&quo ...

  2. JavaScript 函数式编程读书笔记2

    概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...

  3. LVS-1

    lvs 再调度上非常出色,能处理400万的并发: 在功能上不足,需要其他软件的支持.

  4. LeetCode:114_Flatten Binary Tree to Linked List | 将一棵二叉树变成链表的形式 | Medium

    要求:Given a binary tree, flatten it to a linked list in-place.将二叉树转化为平坦序列的树.比如: 结题思路: 该题有个提示,转化后的树的序列 ...

  5. css回归测试工具：backstopjs

    最近在看公开课,一位老师讲了一个自动化的工具,backstopjs,可以自动的对比UI出的图与前端写好的图,不一致的地方会标出,挺好用的,但是写的过程中也会遇到一些问题,现在写出来,记录一下 首先,要 ...

  6. c/c++本地时间获取

    在记录程序日志时,需要记录时间.如下: #include <iostream> #include <time.h> #include <windows.h> usi ...

  7. SpringBoot各类扩展点详解

    一.前言 上篇文章我们深入分析了SpringBoot的一站式启动流程.然后我们知道SpringBoot的主要功能都是依靠它内部很多的扩展点来完成的,那毋容置疑,这些扩展点是我们应该深入了解的,那么本次 ...

  8. CentOS 7 个性化配置指南

    博客原文地址:CentOS 7 个性化配置指南 - Wind Spirit 0x00 前言 该教程主要安装了如下软件包 iptables MySQL PHP PHP 相关模块 Nginx 主要配置实现 ...

  9. JVM笔记11-类加载器和OSGI

    一.JVM 类加载器: 一个类在使用前,如何通过类调用静态字段,静态方法,或者new一个实例对象,第一步就是需要类加载,然后是连接和初始化,最后才能使用. 类从被加载到虚拟机内存中开始,到卸载出内存为 ...

  10. laravel 制作购物车流程

    ① 购入车数据如何存放? 创建数据表 用户ID 购物时间 缺点: 对服务器有压力. 方案: 定时删除 coolie中: 缺点: 数据不能跨客户端 优点:不会对服务器产生压力 放东西和数量 显示购物车 ...