JS之获取子节点
在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之获取子节点的更多相关文章
- js 递归获取子节点所有父节点,深度遍历获取第一个子树
前端需求. 递归 深度优先遍历算法 // 查找一个节点的所有父节点 familyTree (arr1, id) { var temp = [] var forFn = function (arr, i ...
- js获取子节点和修改input的文本框内容
js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...
- 用JS和JQ来获取子节点!
用JS和JQ来获取子节点! 在JS中,如果通过document.getElementsByTagName来获取子元素有个弊端:它不单会获取符合要求的子元素,就连同孙元素也会获取.如果有特殊要求,那 ...
- JS获取子节点、父节点和兄弟节点的方法实例总结
转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...
- js|jq获取兄弟节点,父节点,子节点
08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; ...
- 遍历DOM树,获取子节点
获取子节点的方法有: 方法 说明 children() 选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点. find() 选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...
- ztree 获取子节点所有父节点的name的拼接
ztree 获取子节点所有父节点的name的拼接 //获取子节点,所有父节点的name的拼接字符串function getFilePath(treeObj){if(treeObj==null)retu ...
- java list根据id获取子节点
工作中因业务需求,将数据库中的树状结构的数据根据父节点获取所有的子节点 实现思路 1.获取整个数据的list集合数据 2.将数据分组,java8 list有groupby分组,java8之前的自己遍历 ...
- 问题:jQuery中遍历XML文件时候,获取子节点children不支持的情况(已解决)
问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...
随机推荐
- [SDOI2009]HH的项链 树状数组 BZOJ 1878
题目背景 无 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链 ...
- kuangbin专题七 HDU4027 Can you answer these queries? (线段树)
A lot of battleships of evil are arranged in a line before the battle. Our commander decides to use ...
- 2-32 while
do while
- $.ajax 错误信息
$.extend({ getHtml:function(url,callback){ $.ajax({ dataType:"html", url:url, timeout:1500 ...
- django组件之中间件
中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响到 ...
- mysql 存储引擎介绍
一 存储引擎解释 首先确定一点,存储引擎的概念是MySQL里面才有的,不是所有的关系型数据库都有存储引擎这个概念,后面我们还会说,但是现在要确定这一点. 在讲清楚什么是存储引擎之前,我们先来个比喻, ...
- day14 面向对象
. 面向对象和面向过程 .面向过程:核心是过程,是流水线 优缺点: .流程化,编写简单 .可扩展性差 .面向对象:核心是对象(对象:具有相同属性和动作的结合体) 优缺点: .可扩展行强 .复杂度高于面 ...
- 6.SpringMVC2
1.视图解析 当客户端发出请求后,交由SpringMVC的DispatcherServlet处理,接着Spring会分析看哪一个HandlerMapping定义的所有请求映射中对该请求的最合理的映射, ...
- python模块之beautifulSoup
1. Beautiful Soup的简单介绍 Beautiful Soup是python的一个库,主要的功能是从网页抓取数据,并对数据进行分析.官方解释为:Beautiful Soup提供一些简单的. ...
- java动态数组笔记
动态数组: 在java.lang.reflect包下提供了Array类,包括一系列static方法,通过这些方法可动态的创建数组.给元素赋值.取出元素值等等 //理解数组引用——下面定义的objs数组 ...