获取DOM节点的方法汇总
1.原生获取DOM节点的方法
1.1 通过顶层document节点获取：
document.getElementById("ID")document.getElementsByName("Name")document.getElementsByClassName("className")document.getElementsByTagName("tagName")注意，前两个都是document节点的专有方法，其他节点不能使用，尤其不能在ID下获取ID，这是非常愚蠢的做法。
1.2 通过父节点获取：
parentObj.firstChild：获取父节点下的第一个子节点（会将空格和换行计入），这个属性是可以递归使用的，即支持parentObj.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。parentObj.firstElementChild：获取父节点下的第一个子元素节点parentObj.lastChild：获取父节点下的最后一个子节点（会将空格和换行计入）。与firstChild一样，它也可以递归使用。parentObj.lastElementChild：获取父节点下的最后一个子元素节点parentObj.childNodes：获取父节点下的所有直接子节点（会将空格和换行计入）parentObj.children：获取父节点下的直接子元素节点。parentObj.getElementsByTagName("tagName")parentObj.getElementsByClassName("className")
1.3 通过子节点获取：
childObj.parentNode: 获取子节点的直接父节点。w3c标准childObj.parentElement: 获取子节点的直接父节点。IE标准
1.4 通过兄弟节点获取：
neighbourObj.parentNode.children[..]:通过父节点间接获取已知节点的兄弟节点neighbourObj.previousSibling：获取已知节点的上一个兄弟节点（会将空格和换行计入）neighbourObj.previousElementSibling: 获取已知节点的上一个兄弟元素节点neighbourObj.nextSibling：获取已知节点的下一个兄弟节点（会将空格和换行计入）neighbourObj.nextElementSibling: 获取已知节点的下一个兄弟元素节点
1.5 通过CSS选择器获取：
采用CSS选择器的语法，即#abc，div.abc,#abc .abc等。
document.querySelector("..."): 返回匹配的第一个节点document.querySelectorAll("..."): 返回匹配的所有节点
2.jQuery 获取 DOM 节点的方法
方法 | 用途 |
|---|---|
祖先 | |
$("#A").parent() | 获取A节点的直接父节点 |
$("#A").parents() | 获取A节点的所有祖先节点 |
$("#A").parents(".B") | 获取A节点的所有祖先节点中的B节点 |
$("#A").closet("B") | 获取A节点的第一个为B的祖先节点 |
后代 | |
$("#A").children() | 获取A节点的直接子节点 |
$(".A").children(".B") | 获取A节点的所有为B的直接子节点 |
$("#A").find("*") | 获取A节点的所有后代节点 |
$("#A").find(".B") | 获取A节点的所有为B的后代节点 |
同胞 | |
$("#A").prev() | 获取A节点的上一个兄弟节点 |
$("#A").prevAll() | 获取A节点之前的所有兄弟节点 |
$("#A").prevUntil(".B") | 获取A节点之前、B节点之后的所有兄弟节点 |
$("#A").next() | 获取A节点的下一个兄弟节点 |
$("#A").nextAll() | 获取A节点之后的所有兄弟节点 |
$("#A").nextUntil(".B") | 获取A节点之后、B节点之前的所有兄弟节点 |
$("#A").siblings() | 获取A节点的所有兄弟节点 |
$("#A").siblings(".B") | 获取A节点的所有为B的兄弟节点 |
过滤 | |
$("A B").first() | 获取第一个A节点的第一个B节点 |
$("A B").last() | 获取最后一个A节点的最后一个B节点 |
$(".A").eq(0) | 获取所有A节点中的第一个A节点 |
$("A").filter("B") | 获取A节点中的所有B节点 |
$("A").not("B") | 获取A节点中的不包括B节点的所有节点 |
3.HTMLCollection 和 NodeList
我们都知道，当获得所有节点（如：getElementsByTagName）或者获得所有子元素（如：element.childNodes）时，实际上返回的是包含一些DOM节点的集合，这个集合要么是 HTMLCollection，要么是 NodeList，两者其实都是类数组的对象。
HTMLCollection和NodeList的共同点：
- 都是类数组对象，都有length属性;
- 都有共同的方法：
item，可以通过item(index)或者item(id)来访问返回结果中的元素; - 一般都是实时变动的（live），document上的更改会反映到相关对象上（！！注意：
document.querySelectorAll返回的NodeList不是实时的）;
HTMLCollection和NodeList的不同点：
NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（elementNode）。HTMLCollection比NodeList多一项方法：NamedItem，可以通过传递id或name属性来获取节点信息
规定返回结果：
node.childNodes结果返回类型是NodeList，即所有子节点；node.children结果返回类型是HTMLCollection，即所有子元素节点；getElementsByXXX结果返回类型是HTMLCollection- 旧版本浏览器(尤其是IE)中，
node.children结果返回类型是NodeList