javascript,jquery获取子节点

每个网页都是一个dom树，网页中所有的内容都是这个树上的一个节点。JavaScript的工作就是操作这些节点，对节点进行查增删改操作，或是给节点绑定事件。

以getElementBy开头的方法，可以根据具体的属性获取元素的后代节点。这些方法不只会获取子节点，他也会获取到所有符合条件的后代节点。

方法	依据属性	兼容性	其他
getElementById	id	兼容性好，推荐使用	如果存在多个id相同的元素，只会返回第一个
getElementsByTagName	标签名	不兼容ie8及以下版本	返回所有符合条件的元素的集合
getElementsByName	name	不兼容ie8及以下版本	返回所有符合条件的元素的集合
getElementsByClassName	class	不兼容ie8及以下版本	返回所有符合条件的元素的集合

二、child属性

每个dom元素都是一个对象，在dom元素对象中有四个专门用于获取子元素的属性：

属性名	作用	其他
childNodes	获取所有子节点	不推荐使用，如果有空格，会作为文本节点获取到
child	获取所有子节点	推荐使用
firstChild	获取首个子节点	推荐使用
lastChild	获取最后一个子节点	推荐使用

这四个属性都不存在兼容性问题，除了childNodes之外都是比较好用的。

要解决这个问题有两个方法：

方法一：去掉所有的回车空格等特殊字符，但是会影响程序的可读性和代码的规范。

方法二：动态过滤掉空白字符：

通过for循环遍历对象中的所有元素，删除纯文本元素。

完整的代码就是这样：

var a = document.getElementById("test"); var b = a.childNodes; for(i=0;i<b.length;i++){ if(b[i].nodeName == "#text"&& !/\s/.test(b.nodeValue)){ a.removeChild(b[i]); } }

第二种方法每次查询之前，都要先执行一段过滤代码。这样会影响程序的执行效率，因此childNodes属性不建议使用。

三、querySelector方法，强烈推荐！

querySelector的参数是css选择器，任何选择器都可以作为它的参数，这样就使得它非常方便灵活：

比如获取class=‘test’的标签下的第一个子元素，可以这样写querySelector('.test > * ')，也可以指定子元素的类型querySelector('.test > span ')，或者是：classquerySelector('.test > #f_div')

还可以使用querySelectorAll方法，这样会获取所有满足条件的元素，而不只是获取第一个元素。

querySelectorAll获取的结果是一个静态的集合，getElementBy获取到的元素结果是一个动态集合，会将页面中后续添加的记录添加进去

javascript,jquery获取子节点相关推荐

js与jquery获取子节点、父节点、兄弟节点的方法
js与jquery获取子节点.父节点.兄弟节点的方法在写代码时,时不时会遇到获取子节点.父节点等需要,但有的时候总是弄混淆不是很清晰,所以针对这些问题,总结了jquery与js获取节点的方法 js方 ...
jQuery.获取子节点
获取子节点方法说明 children() 选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点. find() 选取子节点,可以带过滤参数.可以选择子节点及孙子节点. <!DOC ...
jQuery获取父节点、子节点、兄弟节点
介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布. jQuery设计的宗 ...
js父元素获取子元素img_JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名 ...
mysql获取终节点_mysql 函数获取子节点
DELIMITER $$ USE `topsale`$$ DROP FUNCTION IF EXISTS `getShopIdByUserId`$$ CREATE DEFINER=`root`@`%` ...
jq获取 html元素节点,jQuery 获取当前节点的html
原标题:jQuery 获取当前节点的html 在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也 ...
sql读取获取子节点父节点
函数 CREATE FUNCTION GetChildren (@id varchar(20)) RETURNS @t table(id varchar(20)) AS BEGIN ins ...
JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名 ...
cocos2d-lua：获取子节点
在使用 Cocos2d-lua + ccs 进行开发的时候,获取ccs拼接的ui界面中的子节点的方法为 getChildByName(),例如: parent:getChildByName(" ...

javascript,jquery获取子节点

javascript,jquery获取子节点相关推荐

最新文章

热门文章