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查询的一些其他方法。

相关推荐
molly cheung4 分钟前
FetchAPI 请求流式数据 基本用法
javascript·fetch·请求取消·流式·流式数据·流式请求取消
疯狂踩坑人6 分钟前
结合400行mini-react代码,图文解说React原理
前端·react.js·面试
Mintopia8 分钟前
🚀 共绩算力:3分钟拥有自己的文生图AI服务-容器化部署 StableDiffusion1.5-WebUI 应用
前端·人工智能·aigc
街尾杂货店&11 分钟前
CSS - transition 过渡属性及使用方法(示例代码)
前端·css
兜有米啦21 分钟前
python练习题3
开发语言·python
CH_X_M23 分钟前
为什么在AI对话中选择用sse而不是web socket?
前端
Wzx19801229 分钟前
go基础语法练习
开发语言·后端·golang
Mintopia31 分钟前
🧠 量子计算对AIGC的潜在影响:Web技术的未来可能性
前端·javascript·aigc
街尾杂货店&32 分钟前
css - word-spacing 属性(指定段字之间的间距大小)属性定义及使用说明
前端·css
忧郁的蛋~1 小时前
.NET异步编程中内存泄漏的终极解决方案
开发语言·前端·javascript·.net