目录
一. DOM介绍
✨HTML DOM（文档对象模型）
二. HTML DOM
二. HTML DOM 表单
✨JavaScript 表单验证
✨自动 HTML 表单验证
✨数据验证
一. DOM介绍
✨HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
对象的 HTML DOM 树
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件
总结为下图:
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
学习完之后你将掌握如下技术:
如何改变 HTML 元素的内容
如何改变 HTML 元素的样式（CSS）
如何对 HTML DOM 事件作出反应
如何添加和删除 HTML 元素
二. HTML DOM
✨ HTML DOM 文档对象是您的网页中所有其他对象的拥有者。
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
DOM（文档对象模型）是一种表示网页文档结构的编程接口。它提供了一种访问和操作HTML、XML和SVG文档元素的方法。
DOM元素是HTML、XML或SVG文档中的一个节点。它可以是任何HTML标签、XML元素或SVG图形对象。每个元素都有特定的属性，如id、class和style，可以通过DOM接口进行访问和操作。
DOM表单是HTML表单中的一组元素，用于收集用户输入的数据。常见的表单元素包括文本框、复选框、单选按钮和下拉列表框。使用DOM方法，可以获取、设置和验证表单元素的值，并在提交表单时处理用户输入。
DOM方法是指用于操作DOM元素和文档的JavaScript函数。这些方法包括获取元素、修改元素样式、添加、删除和替换元素，以及响应用户事件等。通过调用这些方法，可以实现对网页内容和交互的动态控制。
DOM文档是整个HTML、XML或SVG文档的根节点，代表整个文档结构。通过DOM文档对象，可以访问和操作整个文档的元素、属性和内容。DOM提供了一系列的API，使开发者可以轻松地遍历和操作文档树的节点。
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
改变 HTML 内容
修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。
如需修改 HTML 元素的内容，请使用此语法：
document.getElementById(id).innerHTML = new text
本例修改了 <p> 元素的内容：
改变属性的值
如需修改 HTML 属性的值，请使用如下语法：
document.getElementById(id).attribute = new value
本例修改了 <img> 元素的 src 属性的值：
二. HTML DOM 表单
HTML DOM（Document Object Model）表单是通过JavaScript与HTML表单元素进行交互的机制。它提供了一组方法和属性，用于获取、设置和操作HTML表单元素的值和状态。
通过HTML DOM表单，我们可以实现以下操作：
获取表单元素：使用getElementById()、getElementsByName()、getElementsByTagName()等方法获取表单中的具体元素对象。
获取或设置元素值：使用value属性可以获取或设置文本输入框、文本域、下拉列表框等元素的值。
操作复选框和单选按钮：使用checked属性可以获取或设置复选框和单选按钮的选中状态。
操作下拉列表框：使用selectedIndex属性可以获取或设置下拉列表框当前选中项的索引，使用options属性可以访问下拉列表框的所有选项。
提交表单：使用submit()方法提交表单，将表单数据发送到服务器。
验证表单数据：使用checkValidity()方法可以检查表单元素的有效性，使用setCustomValidity()方法可以设置自定义的验证错误消息。
监听表单事件：使用addEventListener()方法可以为表单元素添加事件监听器，以便在用户与表单元素交互时执行相应的操作。
通过HTML DOM表单，我们可以实现表单的动态控制、数据验证和提交等功能，从而实现与用户的交互和数据处理。
✨JavaScript 表单验证
HTML 表单验证可以通过 JavaScript 完成。
如果表单域 (fname) 为空，该函数会提示一条消息，并返回 false，以防止表单被提交：
JavaScript 实例
function validateForm() { let x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; } }
提交表单时可以调用该函数：
HTML 表单实例
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>
✨自动 HTML 表单验证
HTML 表单验证可以由浏览器自动执行：
如果表单字段 (fname) 为空，则 required 属性会阻止提交此表单：
HTML 表单实例
<form action="/action_page.php" method="post"> <input type="text" name="fname" required> <input type="submit" value="Submit"> </form>
✨数据验证
数据验证是确保用户输入干净、正确和有用的过程。
典型的验证任务是：
用户是否填写了所有必填字段？
用户是否输入了有效日期？
用户是否在数字字段中输入了文本？
大多数情况下，数据验证的目的是确保用户输入正确。
验证可以通过许多不同的方法定义，并以许多不同的方式部署。
服务器端验证由 Web 服务器在输入发送到服务器后执行。
在将输入发送到 Web 服务器之前，客户端验证由 Web 浏览器执行。
