js中查询DOM及DOM节点关系
document是JS内置的一个对象，表示整个HTML文档。根据document查询，意思就是在整个文档范围内查询。
document获取DOM
| 方法名 | 返回值 |
|---|---|
| getElementById(元素id) | 一个dom对象 |
| getElementsByTagName(标签名) | 包含dom对象的数组 |
| getElementsByClassName(类名) | 包含dom对象的数组 |
| getElementsByName(元素的name属性) | 包含dom对象的数组 |
| querySelector(css选择器) | 一个dom对象 |
| querySelectorAll(css选择器) | 包含dom对象的数组 |
示例：
<ul>
<li class="a">罗辑</li>
<li id="b">章北海</li>
<li class="a">云天明</li>
<li>维德</li>
</ul>
<p class="a">四个拯救太阳系的男人</p>
js获取DOM
var b = document.getElementById('b');
b.style.color = 'red'; // 修改样式
var lis = document.getElementsByTagName('li'); // 返回所有li
console.log(lis);
var as = document.getElementsByClassName('a'); // 返回所有类名为a的元素
console.log(as);
DOM节点关系
| 方法/属性 | 说明 | 返回 | 支持 |
|---|---|---|---|
| 父节点.children | 查询所有子节点，非w3c标准 | 数组 | 所有浏览器 |
| 父节点.childNodes | 查询所有子节点，包括文本节点 | 数组 | 所有浏览器 |
| 父节点.firstChild | 查询第一个子节点，包括文本节点 | 对象 | 所有浏览器 |
| 父节点.firstElementChild | 查询第一个子节点，不包括文本节点 | 对象 | IE8+ |
| 父节点.lastChild | 查询最后一个子节点，包括文本节点 | 对象 | 所有浏览器 |
| 父节点.lastElementChild | 查询最后一个子节点，不包括文本节点 | 对象 | IE8+ |
| 父节点.getElementBy....() | 节点继续调用getEle...系列方法查询子节点 | 数组/对象 | 所有浏览器 |
| 子节点.parentNode | 查询父节点 | 对象 | 所有浏览器 |
| 兄弟.previousSibling | 查询上一个兄弟，包括文本节点 | 对象 | 所有浏览器 |
| 兄弟.previousElementSibling | 查询上一个兄弟，不包括文本节点 | 对象 | IE8+ |
| 兄弟.nextSibling | 查询下一个兄弟，包括文本节点 | 对象 | 所有浏览器 |
| 兄弟.nextElementSibling | 查询下一个兄弟，不包括文本节点 | 对象 | IE8+ |
0级DOM
早期DOM访问形式，在一些特定元素的获取上比较方便。被保留下来使用，W3C标准化之后 称为“0级DOM”。
| 方法/属性 | 说明 | 返回 | 支持 |
|---|---|---|---|
| document.body | 访问body节点 | 返回body节点 | 所有浏览器 |
| document.forms | 访问所有的表单 | 返回数组 | 所有浏览器 |
| document.formName.name | 访问表单项 | 返回单个表单项或数组 | 所有浏览器 |
| document.anchors | 访问所有的锚点 | 返回数组 | 所有浏览器 |
| document.links | 访问所有的链接 | 返回数组 | 所有浏览器 |
| document.images | 访问所有的图片 | 返回数组 | 所有浏览器 |
| document.all | 访问所有的元素 | 返回数组 | 所有浏览器 |
转载必须注明出处：https://www.zhiqiexing.com/150.html
