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

相关推荐
北冥湖畔的燕雀10 小时前
C++日志系统:从原理到实战实现
java·开发语言
小短腿的代码世界11 小时前
传感器暗战:Qt Sensors如何让桌面应用“感知“物理世界?
开发语言·qt
橙淮11 小时前
jQuery性能优化终极指南
javascript·jquery
小小编程路11 小时前
增强版 JavaScript 读取 Excel
开发语言·javascript·excel
吃好睡好便好11 小时前
在Matlab中绘制马鞍函数曲面图
开发语言·人工智能·学习·算法·matlab·信息可视化
测试员周周11 小时前
【Appium 系列】第01节-Appium 是什么 — 移动端自动化的行业标准
开发语言·人工智能·python·功能测试·appium·自动化·测试用例
ID_1800790547311 小时前
淘宝店铺所有商品 API 接口:核心能力与数据返回参考
java·服务器·前端
码界筑梦坊11 小时前
117-基于Python的印度犯罪数据可视化分析系统
开发语言·python·mysql·信息可视化·毕业设计·echarts·fastapi
Wy_编程11 小时前
golang 基础语法和函数
开发语言·go
Hello--_--World11 小时前
vite:什么是热更新?vite 和 webpack 有什么区别?vite常见配置和优化手段?
前端·webpack·node.js