一、简介
1.对象的 HTML DOM 树
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
2.什么是 HTML DOM
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
# 二、元素 `1.通过 id 查找 HTML 元素` DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。 本例查找 id="intro" 的元素： ```javascript 例： var myElement = document.getElementById("intro"); ``` `2.通过标签名查找 HTML 元素` 查找所有 `
` 元素： ```javascript var x = document.getElementsByTagName("p"); ``` `3.通过类名查找 HTML 元素` 找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()。 本例返回包含 class="intro" 的所有元素的列表： ```javascript var x = document.getElementsByClassName("intro"); ``` `4.通过 CSS 选择器查找 HTML 元素` 查找匹配指定 CSS 选择器（`id、类名、类型、属性、属性值等等`）的所有 HTML 元素，请使用 querySelectorAll() 方法。 ```javascript var x = document.querySelectorAll("p.intro"); ``` `5.通过 HTML 对象选择器查找 HTML 对象` 本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值： ```javascript var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + "
"; } document.getElementById("demo").innerHTML = text; ```
# 三、表单 `1、HTML 表单验证` 表单域 (fname) 为空，该函数会提示一条消息，并返回 false，以防止表单被提交： **例：** ```javascript function validateForm() { let x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; } } ``` `2.JavaScript 可以验证数字输入` JavaScript 通常用于验证数字输入： 请输入 1 到 10 之间的数字：  ```javascript function myFunction() { // 获取 id = "numb" 的输入字段的值 let x = document.getElementById("numb").value; // 如果 x 不是数字或小于 1 或大于 10 let text; if (isNaN(x) || x < 1 || x > 10) { text = "输入无效"; } else { text = "输入没问题"; } document.getElementById("demo").innerHTML = text; } ``` `3.自动 HTML 表单验证` HTML 表单验证可以由浏览器自动执行： 如果表单字段 (fname) 为空，则 required 属性会阻止提交此表单： ```javascript ``` `4.数据验证` 数据验证是确保用户输入干净、正确和有用的过程。 大多数情况下，数据验证的目的是确保用户输入正确。 > 服务器端验证由 Web 服务器在输入发送到服务器后执行。 > > 在将输入发送到 Web 服务器之前，客户端验证由 Web 浏览器执行。 `5.HTML 约束验证` HTML 约束验证基于： - 约束验证 HTML input 属性 - 约束验证 CSS 伪选择器 - 约束验证 DOM 属性和方法 约束验证 HTML input 属性 | 属性 | 描述 | | :------- | :------------------------ | | disabled | 规定应禁用 input 元素。 | | max | 规定 input 元素的最大值。 | | min | 规定 input 元素的最小值。 | | pattern | 规定 input 元素的值模式。 | | required | 规定 input 字段必填。 | | type | 规定 input 元素的类型。 | 约束验证 CSS 伪选择器 | 选择器 | 描述 | | :-------- | :---------------------------------------- | | :disabled | 选择规定了 "disabled" 属性的 input 元素。 | | :invalid | 选择有无效值的 input 元素。 | | :optional | 选择未规定 "required" 属性的 input 元素。 | | :required | 选择规定了 "required" 属性的 input 元素。 | | :valid | 选择具有有效值的 input 元素。 |
