在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. Android开发 - Retrofit 2 使用自签名的HTTPS证书进行API请求

    为了确保数据传输的安全,现在越来越多的应用使用Https的方式来进行数据传输,使用https有很多有点,比如: HTTPS协议是由SSL+HTTP协议构建的可进行加密传输.身份认证的网络协议,要比ht ...

  2. SVM理解

    https://blog.csdn.net/feilong_csdn/article/details/62427148

  3. 2019-4-22 jdbc学习笔记

    jdbc 一.定义:java database connector 二.常用的接口 java.sql.Driver  驱动 java.sql.Connection  链接 java.sql.State ...

  4. SQL注入的优化和绕过

    作者:Arizona 原文来自:https://bbs.ichunqiu.com/thread-43169-1-1.html 0×00 ~ 介绍 SQL注入毫无疑问是最危险的Web漏洞之一,因为我们将 ...

  5. shell if 条件判断

    condition='123' if [ -z condition]; then echo "condition 是空的" fi 字符串判断: = 两个字符串相等. != 两个字符 ...

  6. Java学习笔记47（JDBC、SQL注入攻击原理以及解决）

    JDBC:java的数据库连接 JDBC本质是一套API,由开发公司定义的类和接口 这里使用mysql驱动,是一套类库,实现了接口 驱动程序类库,实现接口重写方法,由驱动程序操作数据库 JDBC操作步 ...

  7. 阿里开源项目arthas安装使用

    文档地址 https://alibaba.github.io/arthas/install-detail.html 开始安装 我本地就装window版本了,下载zip包 按照快速入门,编译demo程序 ...

  8. Source Insight函数调用关系显示设置

    当我们需要设置source Insight的项目代码中函数调用关系时,可通过如下的设置来实现: 1.显示函数调用关系窗口 Source Insight工具栏中“View”—>“Relation  ...

  9. Spring Boot 单元测试详解+实战教程

    Spring Boot 的测试类库 Spring Boot 提供了许多实用工具和注解来帮助测试应用程序,主要包括以下两个模块. spring-boot-test:支持测试的核心内容. spring-b ...

  10. LeetCode--No.015 3Sum

    15. 3Sum Total Accepted: 131800 Total Submissions: 675028 Difficulty: Medium Given an array S of n i ...