js基础知识（二十五）--DOM查询的其他方法、获取元素的后代和子元素

任重道远。

于 2022-08-06 22:39:55 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_47928499/article/details/126202477

这篇博客介绍了DOM查询的相关方法，包括document对象的body和documentElement属性，以及querySelector和querySelectorAll方法用于获取元素。此外，还讲解了如何获取元素的后代和子元素，如children、firstChild和lastElementChild等属性，以及如何获取节点的相邻元素。同时，文中提到了innerHTML、innerText和textContent属性，用于获取元素的HTML内容或纯文本内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、DOM查询的其他方法
在document提供了一些直接获取元素的方法
document.body获取到页面的body元素
document.documentElement获取页面html中的根元素
document.querySelector():根据css选择器来获取一个元素节点,需要一个选择器的字符串作为参数，会根据选择器去页面中获取元素，该方法只会返回符号条件的第一个元素
document.querySelectorAll():根据css选择器返回所有符合条件的元素节点

二、获取元素的后代和子元素
childNodes表示当前元素的所有子节点，空白的文本节点也会被当成子节点返回
children获取当前元素的所有子元素
firstChild用来获取当前元素的第一个子节点
firstElementChild用来获取当前元素的第一个子元素
lastChild最后一个子节点
lastElementChild最后一个子元素
parentNode用来获取当前元素的父节点
previousSibling获取当前节点的前一个兄弟节点
previousElementSibling获取当前节点的前一个兄弟元素
nextSibling 获取下一个兄弟节点
nextElementSibling 获取下一个兄弟元素
innerHTML表示标签内部的html代码（包含标签的）
innerText表示标签内部的文本内容（不含标签）
textContent表示标签内部的文本内容（不含标签）