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