每个网页都是一个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