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获取到的元素结果是一个动态集合，会将页面中后续添加的记录添加进去