js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取

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

网页

dom树

要操作dom节点，首先要获取到dom节点。这里我介绍几个原生js获取元素子节点的方法：

一、通过标签的属性值获取后代节点

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

方法

依据属性

兼容性

其他

getElementById

id

兼容性好，推荐使用

如果存在多个id相同的元素，只会返回第一个

getElementsByTagName

标签名

不兼容ie8及以下版本

返回所有符合条件的元素的集合

getElementsByName

name

不兼容ie8及以下版本

返回所有符合条件的元素的集合

getElementsByClassName

class

不兼容ie8及以下版本

返回所有符合条件的元素的集合

以getElementById为例，尽管有两个id为’Jan‘的元素，但是只会获取到第一个：

1

2

3

varj=document.getElementById('Jan');

console.log(j);

需要注意的是，在同一个文件中出现重复id是不符合规范的，应当尽量避免这样使用。

如果将上面代码中的getElementById('Jan')换成 getElementsByTagName('p')或者是getElementsByClassName('test')将会获取到符合条件的结果集。

二、child属性

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

属性名

作用

其他

childNodes

获取所有子节点

不推荐使用，如果有空格，会作为文本节点获取到

child

获取所有子节点

推荐使用

firstChild

获取首个子节点

推荐使用

lastChild

获取最后一个子节点

推荐使用

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

1. childNodes

childNodes属性可以获取元素的所有子节点，并封装到一个数组中，可以通过下标来获取某个子元素：

1

3

5