文章目录

• 什么是 DOM
• DOM 树
• 获取元素
• • 1. querySelector
  • 2. querySelectorAll
• 事件
• • 1. 事件三要素
  • 2. 代码案例
• 获取 / 修改元素内容
• • 1. innerHTML
• 获取 / 修改元素属性
• 获取 / 修改表单元素属性
• 获取 / 修改样式属性
• • 1. 修改内联样式（修改 style 属性的值）
  • 2. 修改元素应用的 CSS 类名
• 新增元素
• 删除元素

什么是 DOM

DOM 全称为 Document Object Model，即 文档对象模型。

文档对象模型指的是，可以把 html 的每个标签都映射到 js 中的一个对应对象的。

换句话也就是：

• 标签上显示什么，都是可以通过 js 对象感应到的。
• js 对象修改的对应属性，能够影响到标签的展示。

通过 DOM 就可以让 js 代码来操作页面元素。

DOM 树

一个页面的结构是一个树形结构，称为 DOM 树。



重要概念:

• 文档：一个页面就是一个 文档，使用 document 表示。
• 元素：页面中所有的标签都称为元素，使用 element 表示。
• 节点：网页中所有的内容都可以称为节点(标签节点、注释节点、文本节点、属性节点等)，
  使用 node表示。

这些文档等概念在 JS 代码中就对应一个个的对象，所以才叫 “文档对象模型”。

获取元素

1. querySelector

querySelector （CSS 选择器）这个函数用来 选中页面元素。

abc
def

querySelector 是 document 对象里的一个方法。


document 是浏览器中的 全局对象 任何一个页面，都会有一个 document 对象。
所有的 dom api 都是通过 document 对象来展开的。

上述代码中的 elem1 是一个对象，上述打印出来的结果是一个文本。

现在来打印 elem1 当做一个对象打印。

 console.dir(elem1);

上面展示的这些都是选中的元素的属性。

也可以把代码中的其他标签也打印出来。

2. querySelectorAll

如果想要一次选中全部的元素，就可以使用 querySelectorAll 。

abc
def

上面的 querySelectorAll 会把所有的 div 都选中。

事件

时间就是针对用户的操作进行的一些响应。

要能够和用户交互，就需要知道用户干了什么，用户做的一些动作就是在浏览器上产生的一些事件，
代码就是要针对时间做出反应。


这里的时间可以是鼠标点击、鼠标双击、鼠标移动、键盘按下、调整浏览器窗口…

1. 事件三要素

1、事件源：哪个元素产生的事件。

2、事件类型：点击、双击、移动、键盘按下…

3、事件的处理类型：事件发生后，要执行哪个代码。（要执行的都是提前设定好的）

举个例子，比如张三的女朋友生气了。

此时的事件源就是 女朋友，事件类型就是 生气了，事件的处理程序就是 张三赶紧上去哄哄女朋友。

2. 代码案例

最简单的方式就是，直接在元素中使用像以 on 开头的方法，来绑定一个事件处理程序。

onclick 是一个鼠标点击的事件。

点我一下试试

div 就是一个事件源，onclick 就是一个事件类型，alert(‘hello’) 就是一个事件的处理类型。



点击之后就会出现一个提示框。

上面展示的代码会显得有点乱，还有一种比较整齐的写法。

可以使用 querySelector 先选中一个元素，然后再创建一个事件处理类型的 function 函数。

点我一下试试

获取 / 修改元素内容

1. innerHTML

先获取到该元素，使用 innerHTML 属性，就能拿到元素里的内容。
修改该属性，就会影响到界面的显示。

点我一下试试

当前点击一次 div 就会打印一次日志，但是因为这里相同的日志不会显示，因此只会在前显示一个点击的数量。

如果想修改元素里的内容，就需要使用下面的语句。

 div.innerHTML += '这是一个 div';

每点击一次，就会在内容中添加一次 “这是一个 div”。

获取 / 修改元素属性

html 的标签的属性，也会映射到 js 对象中。

先选中当前的 img 元素，在实现一个函数来更改它的属性。

点击上述的图片后，就回切换到另一张图片。

也是可以去修改其他的属性，下面就俩修改 src、width、title 属性。

下面就是修改后的属性。

可以发现图片变大了。

获取 / 修改表单元素属性

表单元素（input、textarea、select…）中有一些特殊的属性是普通标签没有的，

点我一下

每次在框中输入内容后，再点击按钮，就会打印一次日志。

这里不能使用 innerHTML，而只能使用 value。

将下面的语句添加到上面的代码中，会得到以下结果。

console.log(input.innerHTML);

这是因为 innerHTML 得到的是标签的内容，input 标签是单标签，是没有内容的。

接下来给 input 里放个数字，每次点击按钮，都会让数字 +1 并显示出来。

点我一下

当前的 input.value 是一个 string 类型，所以要将它转化为 正数。

这里的 parseInt 作用是将类型转化为 number，相当于是 java 里的强制类型转换。



输入一个数字，在每一次点击按钮后，这个数字都会累加 1。

接下来实现一个切换密码是否显示的案例。

隐藏密码

点击隐藏，就会隐藏，点击显示，就会显示。

获取 / 修改样式属性

1. 修改内联样式（修改 style 属性的值）

现在写一个 div ，每次点击都会让里面的字体放大。

将 div 里的字体初始值设为 20px，这里的 20px 是一个字符串，如果想把它相加则需要把它提取出一个数字来。

这里需要使用 parseInt 这个库函数，给它转成整数。

这是一个div,点击后会放大

需要注意的是给字体放大像素后，要加上 px 这个单位，不然不会有效果。



每次点击后，div 里的字体就会放大 10px。

2. 修改元素应用的 CSS 类名

下面写一个切换日间模式与夜间模式的案例。

这是个div, 默认是夜间模式, 点击切换日间模式

两种模式会随着点击 div 而改变。

新增元素

首先第一步是 创建一个元素。

这是一个 div

此时只是创建了一个元素，还没有放到 dom 树中，所以此时还不会显示出效果。

接下来第二步就是 将元素放到 dom 树中。

let div = document.querySelector('.one');
div.appendChild(input);

div.appendChild(input); 这一条语句含义就是 将 input 作为 div 的子元素给添加进去。

appendChild 会把子元素加入到子元素的末尾。

还可以同时添加多个元素

11
22

删除元素

下面来将 上面代码中的 33 这个元素删除。

11
22

33 这个元素是在 2 下标的位置，所以写上 2 下表即可。