在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. 快速部署Apache服务静态网站

    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速.可靠并且可通过简单的API扩充, ...

  2. javascript从作用域到闭包-笔记

    读<你不知道的javascript>一书做个笔记;编译原理:    js是一门编译型的语言,与传统编译语言类似,传统编译的过程分为三个阶段 ;     1. 分词/词法分析; 2.解析/语 ...

  3. 一篇入门 -- Scala

    整体介绍 Scala 是一门多范式(multi-paradigm)的编程语言,设计初衷是要集成面向对象编程和函数式编程的各种特性. 联邦理工学院洛桑(EPFL)的Martin Odersky于2001 ...

  4. touch-action属性引起的探索

     最近在做微信项目的时候遇到一个奇怪的问题: 常购清单的商品多了以后往上滑没有任何反应,不能滑动.但商城首页又可以往上滑.而且ios没有这个问题,安卓才有这个问题. 起初我以为是因为这2个页面调用接口 ...

  5. 200行代码实现简版react🔥

    200行代码实现简版react

  6. undefined 和 undeclared 的区别

    var a; //undefined b; // b is not defined 区别:在变量作用域中已经申明但没有赋值的变量(如 a),是undefined.相反,在变量作用域中没有申明过的变量, ...

  7. Screen会话命令 Linux

    由于经常在服务器上运行程序,本地不可能一直和服务器保持连接,而且如果本地和服务器的连接断开,在服务器上运行的程序将会终止,为了,查找了一些网络资料,发现screen 会话命令可以保持本地和服务器断开后 ...

  8. MLlib之LR算法源码学习

    /** * :: DeveloperApi :: * GeneralizedLinearModel (GLM) represents a model trained using * Generaliz ...

  9. 私服仓库 nexus 环境搭建（win10）

    1.1 简介: Nexus 是Maven仓库管理器,如果你使用Maven,你可以从Maven中央仓库 下载所需要的构件(artifact),但这通常不是一个好的做法,你应该在本地架设一个Maven仓库 ...

  10. hadoop之editlogs和fsimage

    一.概述 hadoop的namenode和secondarynamenode: 1.   namenode负责 负责客户端请求的响应 元数据的管理(查询,修改) 2.    元数据管理 namenod ...