在JS中获取子节点有以下几种方法:

firstElementChild、firstChild、childNodes和children

我们通过一个例子来分析这几种方法的区别(获取div下的p标签)

输出结果是这样的:

firstElementChild和Children 都成功获取到了p标签,那另外两个文本(#text)是什么东西呢?

其实是因为现在的标准浏览器会为空白符创建文本节点(标签之间换行或空格之类的都会产生空白符),而ie9以前的浏览器却不会。

我们知道DOM节点分为三大类

1.元素节点

2.文本节点

3.属性节点

firstElementChild和Children比较针对,只会返回指定元素里面的元素节点,其他一概不管,但firstElementChildren  在ie9以前不兼容,会返回undefined。

而firstChild、childNodes就厉害了,事无巨细,无论是元素、文本、属性啥都给你获取过来,所以上面那个例子里获取到的是空白符,

所以使用这俩的时候要小心一些,最好使用Children来获取比较保险。

但也不是没有办法,附上几种取巧的办法

解决办法:

1.标签之间不换行

可以这样写 <div><p>123</p></div>,结果就都一样了

更多方法请看   http://www.cnblogs.com/Gesangs/p/7193425.html

JS之获取子节点的更多相关文章

  1. js 递归获取子节点所有父节点,深度遍历获取第一个子树

    前端需求. 递归 深度优先遍历算法 // 查找一个节点的所有父节点 familyTree (arr1, id) { var temp = [] var forFn = function (arr, i ...

  2. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  3. 用JS和JQ来获取子节点!

    用JS和JQ来获取子节点!   在JS中,如果通过document.getElementsByTagName来获取子元素有个弊端:它不单会获取符合要求的子元素,就连同孙元素也会获取.如果有特殊要求,那 ...

  4. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  5. js|jq获取兄弟节点,父节点,子节点

    08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; ...

  6. 遍历DOM树,获取子节点

    获取子节点的方法有:  方法  说明  children()  选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点.  find()  选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...

  7. ztree 获取子节点所有父节点的name的拼接

    ztree 获取子节点所有父节点的name的拼接 //获取子节点,所有父节点的name的拼接字符串function getFilePath(treeObj){if(treeObj==null)retu ...

  8. java list根据id获取子节点

    工作中因业务需求,将数据库中的树状结构的数据根据父节点获取所有的子节点 实现思路 1.获取整个数据的list集合数据 2.将数据分组,java8 list有groupby分组,java8之前的自己遍历 ...

  9. 问题:jQuery中遍历XML文件时候,获取子节点children不支持的情况(已解决)

    问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...

随机推荐

  1. luogu1891 疯狂lcm ??欧拉反演?

    link 给定正整数N,求LCM(1,N)+LCM(2,N)+...+LCM(N,N). 多组询问,1≤T≤300000,1≤N≤1000000 \(\sum_{i=1}^nlcm(i,n)\) \( ...

  2. Nexus 相关

    https://help.sonatype.com/repomanager3/download https://www.jianshu.com/p/5fc8fb14d25c

  3. Lyft Level 5 Challenge 2018 - Final Round (Open Div. 2) B 1075B (思维)

    B. Taxi drivers and Lyft time limit per test 1 second memory limit per test 256 megabytes input stan ...

  4. 在Mvc中,ExpandoObjec类的使用

    创建一个基本mvc项目 1.向Models目录下添加一个类文件MyModel.cs文件,代码如下: using System; using System.Collections.Generic; us ...

  5. java经典学习路线

    恩,做开发的工作已经三年多了,说起来实在是惭愧,自己的知识树还像一棵小草一样,工作中使用到了许多的知识和技术,不过系统性不够.根基不牢.并且不够深入!当然,慢慢的我也更加的清楚,我需要学习一些什么样的 ...

  6. CMOS和BIOS

      CMOS是一类特殊的RAM(断电时将丢失其存储内容) BIOS是软件,是程序! CMOS是芯片,是硬件! 实际上我们是通过BIOS这个程序,去设置COMS的参数的.. COMS是一块芯片,继承在主 ...

  7. Problem04 分解质因数

    题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. 程序分析:对n进行分解质因数,应先找到一个最小的质数k,然后按下述步骤完成: (1)如果这个质数恰等于n,则说明分解质因数的 ...

  8. Hive 遇到 Class path contains multiple SLF4J bindings

    Hive 遇到 Class path contains multiple SLF4J bindings Root Issue; slf4j在两处找到了jar包.分别是在Hadoop和hive的安装目录 ...

  9. ES6多行字符串+模板字符串

    多行字符串 最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ` ... ` 表示: 'use strict'; // 如果浏览器支持模板字符串,将会替换字符串内部的变量: var name ...

  10. DTCMS 网站管理系统

    dtcms适合开发一些简单小型网站 开发的过程中遇见了各种问题,下面总结下我遇见的问题 1.遇见提示未开启生成静态功能 在系统设置里面将“伪URL重写”为“生成静态”可以解决 2.在生成静态页面的时候 ...