JavaScript初级——DOM查询

一、获取元素节点

二、innerHTML

通过这个属性可以获取到元素内部的 html 代码

------ 对于自结束标签,这个属性没有任何意义

三、getElementsByTagName ()

可以根据标签名来获取一组元素节点对象,这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中。

四、读取元素节点属性

如果要读取元素节点属性,直接使用 元素.属性名

例如:元素.id元素.name、元素.value

注意:class 属性不能使用这种方式,读取class属性时要使用 元素.className。

五、获取元素节点的子节点

六、获取父节点和兄弟节点

七、childNodes属性

会获取包括文本节点在内的所有节点,根据DOM标签间的也会当成文本节点

注意: IE8 及以下的浏览器中,不会将空白文本当成子节点。

八、children 属性

可以获取当前元素的所有子元素。

九、firstElementChild

不支持IE8及以下的浏览器,如果需要兼容他们尽量不要使用。

十、innerText

该属性可以获取到元素内部的文本内容,它和 innerHTML 类似,不同的是他会自动将html去除

十一、previousElementSibling

获取前一个兄弟元素,IE8及以下不支持。

十二、文本框的value属性值

就是文本框中填写的内容。

十三、checked属性

通过多选框的checked属性可以来获取或设置多选框的选中状态。

十四、响应函数

在事件的响应函数中,响应函数是给谁绑定的this 就是谁

本文分享先到这里,下一节继续分享关于DOM查询的一些其他方法。

相关推荐
天空'之城1 分钟前
C 语言工业级通用组件手写 25:简易日志系统
c语言·开发语言·日志系统·嵌入式调试·调试打印
程序喵大人13 分钟前
【C++进阶】STL算法与函数对象 -【C++进阶】STL算法与函数对象
开发语言·c++·算法
用户0595401744623 分钟前
把AI聊天机器人记忆存储测试从3小时压到5分钟,我用Pytest + Docker搭了一套自动化回归
前端·css
明月_清风24 分钟前
显存即正义:不同显存容量能训多大的模型?一文说清硬件边界与训练策略
前端·后端·ai编程
weixin_BYSJ198725 分钟前
【java项目分享】springboot阅读推荐平台10600
java·javascript·spring boot·python·django·flask·php
Sterting29 分钟前
第 9 节:本地存储 — 数据不丢的前端缓存
前端·javascript·缓存
IT_陈寒31 分钟前
Vite的HMR在我项目上突然失效,排查三天找到离谱原因
前端·人工智能·后端
牛马也想出海33 分钟前
使用Playwright被检测为机器人的原因及反检测方案
开发语言·网络·人工智能·机器人·php
人间凡尔赛38 分钟前
React Compiler 1.0 正式落地:告别 useMemo / useCallback,2026 前端性能优化的新范式
前端·性能优化·react
GrowthDiary00740 分钟前
Python 常用函数总结
开发语言·python