本文共 711 字，大约阅读时间需要 2 分钟。

DOM节点选择与元素关系

ES5新增选择器

在ES5标准中，`document.querySelector('css选择器')`用于获取基于CSS选择器匹配的单个元素对象。注意：建议仅用于获取单个元素，若需获取多个元素，请使用`document.querySelectorAll('css选择器')`返回元素对象类数组。

注意：IE6、IE7不支持上述方法

节点关系

通过`node.parentNode`可以获取到元素的父节点对象。

`element.childNodes`返回元素的所有子节点对象列表，需注意子节点包括文本节点和空白节点。

`node.firstChild`和`node.lastChild`分别返回第一个和最后一个子节点对象。

`node.nextSibling`和`node.previousSibling`分别返回元素的下一个和上一个兄弟节点对象。

元素关系

使用`element.parentElement`可以获取到元素的父节点元素对象（IE9及以上兼容）。

`element.children`返回当前元素的所有子节点元素对象列表（IE9及以上兼容）。

`element.nextElementSibling`和`element.previousElementSibling`分别返回元素的下一个和上一个元素节点对象（IE9及以上兼容）。

`element.firstElementChild`和`element.lastElementChild`分别返回当前元素的第一个和最后一个子节点元素对象（IE9及以上兼容）。

以上方法均为IE9及以上版本支持，建议根据具体浏览器版本选择使用方式。