1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

DOM 操作

DOM 的全称是 Document Object Model(文档对象模型),相当于把页面的内容映射成了一个对象,通过 DOM 我们可以获取并修改页面上的任何内容。

本章节的内容就是对如何获取与修改页面元素有一个初步的了解。

获取元素

一般我们获取元素有两个步骤:

  1. HTML 中设置元素的 id 属性。
  2. JavaScript 中通过 document.getElementById() 方法获取元素。

点击实例中的 执行代码 并查看控制台中的输出,在实例中的 HTML 定义了一个 p 元素并设置 id 为 title,还定义了一个按钮绑定了点击事件,当点击时通过 document.getElementById() 获取元素并打印到控制台中。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/XWVPzLB?default-tab=js%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

通过 document.getElementById() 方法获取到的是一个元素对象,便可以通过操作此元素对象获取或修改元素内容。

获取或修改元素内 HTML

innerHTML 属性可以通过 HTML 代码的形式获取或修改元素内 HTML 内容。

实例中定义了绑定了两个按钮事件,一个在点击时获取元素的内容并通过 alert 输出,另一个则修改元素内的 HTML 代码为一个 img 元素。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/abEaEKo?default-tab=js%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

获取或修改元素 HTML

outerHTMLinnerHTML 的区别在于, outerHTML 属性获取或修改的元素 HTML 内容包括了自身。因此当修改 outerHTML 的内容时就相当于替换了一个新的元素。

实例中修改元素的 outerHTML 时将自身也替换掉了。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/qBpMpLO?default-tab=js%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

获取或修改元素内文本

textContent 属性获取的是元素内所有的纯文本内容,不包括标签或属性。当设置 textContent 属性时,设置的值也会被当作纯文本内容。

实例中获取 textContent 时仅输出了纯文本,并且修改的 img HTML 代码并没有生效,原因是这些代码被当成了纯文本对待。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/oNpPpRz?default-tab=js%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

获取或修改 input 的值

对于 input 元素,可以通过 value 属性获取或修改其值。

实例中定义了一个输入框,并绑定了三个按钮事件:

  • 获取用户名:输出元素的 value 值
  • 默认用户名:将元素的 value 值设置为 三眼鸭
  • 清空用户名:将元素的 value 值设置为空字符串

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/OJzoQNE?default-tab=js%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

计算器实例

以下代码演示了一个加法计算器的实例。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/xxpaWza?default-tab=js%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>


练习

  1. 实现以下实例效果。

$$demo

<body>

<input id="num1" type="number" placeholder="第一个数" />

<select id="operator">

<option value="plus">+</option>

<option value="sub">-</option>

<option value="mult">*</option>

<option value="divide">/</option>

</select>

<input id="num2" type="number" placeholder="第二个数" />

<button onclick="calc()">=</button>

<span id="result"></span>

</body>

<script>

function calc() {

let num1 = Number(document.getElementById("num1").value)

let num2 = Number(document.getElementById("num2").value)

let op = document.getElementById("operator").value

let result

switch (op) {

case "plus":

result = num1 + num2

break

case "sub":

result = num1 - num2

break

case "mult":

result = num1 * num2

break

case "divide":

result = num1 / num2

break

}

document.getElementById("result").textContent = result

}

</script>

$$