当前位置 知且行 大前端 js中查询DOM及DOM节点关系 下一篇:

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

关于我

我希望能成为一个认真、有趣、创造更多价值的人
关注微信
微信扫一扫关注我

微信扫一扫关注我

返回顶部