一.Dom结构
DOM:全称文档对象模型,是浏览器提供给 JavaScript 操作HTML文档的接口。
DOM可以将HTML文档转换成树形结构,树中的每个节点,也被称为 DOM 节点。
二.获取Dom
浏览器提供了很多中方法去获取DOM节点,现在最常用的方法有两种,如下:
方法名称 | 说明 | 入参 | 出参 |
document.querySelector | 数据传入的选择器,返回第一个匹配的DOM节点 | 选择器 | DOM节点对象 |
document.querySelectorAll | 数据传入的选择器,返回所有匹配的DOM节点 | 选择器 | 以类数组的形式返回所有DOM节点对象 |
获取 Dom 的主要目的是获取 Dom 的属性,从而得知当前页面的数据和转态。
每个DOM 节点都有很多的属性,不同的DOM节点也会有一些差异的属性,常用属性如下:
- innerHTML:可获取到 DOM 节点包裹的 HTML 内容,以字符串的方式返回。
const filter = document.querySelector('.class-name'); filter.innerHTML; //输出 .class-name 下的HTML内容
- textContext:可获取到 DOM 节点包裹的文本内容。
const cn = document.querySelector('.class-name'); cn.textContext; //仅输出筛选框文字内容
- value:可获取到表单元素(Input)用户输入的值。
const input = document.querySelector('input'); input.value; // 输出 input 框的值
- className:返回元素的类名。
const name = document.querySelector('.class-name'); name.className; //输出 .class-name 的类名
三.修改 Dom
- 增加:可通过 dom.innerHTML = '' 方式设置对应 Dom 节点包裹的 HTML 内容,达到内容新增的目的。注意,innerHTML赋值会覆盖掉原来的内容。
- 删除:可通过 dom.remove() 来删除当前 Dom 节点。
- 修改:通过设置属性来更改 Dom 属性,比如 dom.className = '',dom.value = ''。注意,会覆盖掉原来的类名。