javascrip基础语法
为什么学习 JavaScript?
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 控制了网页的行为
1. JavaScript 输出
1.1 console.log()：用于将信息输出到浏览器控制台，例如console.log("Hello, World!");，可以输出字符串、变量、表达式等。
- 1.2 console.error()：专门用于输出错误信息，方便调试时快速定位问题，如
console.error("An error occurred!");。 - 1.3 console.warn()：用于输出警告信息，提示开发者可能存在的潜在问题，如
console.warn("This might cause an issue!");。
2. JavaScript 语法
- 2.1 语句与表达式
- 2.1.1 语句：JavaScript 代码的基本执行单元，以分号
;结尾，例如var x = 5;是一个赋值语句，if (x > 3) { console.log("x is greater than 3"); }是一个条件语句。 - 2.1.2 表达式：可以产生一个值，如
5 + 3是一个算术表达式，其值为8；x > 3是一个比较表达式，其值为true或false。
- 2.1.1 语句：JavaScript 代码的基本执行单元，以分号
- 2.2 代码块：用花括号
{}括起来的一组语句，常用于条件语句、循环语句等中，例如if (condition) { statements; }，花括号内的statements就是一个代码块。
3. JavaScript 语句
- 3.1 变量声明语句
- 3.1.1 var：函数作用域变量声明，例如
var num = 10;，在函数内声明的var变量在整个函数内都可访问，即使在声明之前使用也不会报错（变量提升），但值为undefined。 - 3.1.2 let：块级作用域变量声明，如
let count = 5;，只在声明所在的块（花括号内）及嵌套块中可访问，在声明之前使用会报错。 - 3.1.3 const：声明常量，值不可修改，如
const PI = 3.14;，必须在声明时初始化，且后续不能重新赋值，同样具有块级作用域。
- 3.1.1 var：函数作用域变量声明，例如
- 3.2 条件语句
- 3.2.1 if 语句：基本形式为
if (condition) { statements1; } else { statements2; }，根据condition的真假执行不同的代码块。还可以有if...else if...else的形式，例如if (x > 10) { console.log("x is greater than 10"); } else if (x > 5) { console.log("x is greater than 5 but less than or equal to 10"); } else { console.log("x is less than or equal to 5"); }。 - 3.2.2 switch 语句：根据表达式的值执行不同的代码块，例如：
- 3.2.1 if 语句：基本形式为
switch (expression) {
case value1:
statements1;
break;
case value2:
statements2;
break;
default:
defaultStatements;
}
当expression的值与某个case后的value相等时，执行对应的statements，直到遇到break跳出switch语句，若都不匹配则执行default后的代码。
4. JavaScript 注释
- 4.1 单行注释：以
//开头，注释该行后面的内容，例如// This is a single-line comment，常用于对单行代码进行简单说明。 - 4.2 多行注释：以
/*开头，以*/结尾，可注释多行内容，例如：
/*
This is a
multi-line comment
It can span across multiple lines
*/
常用于对一段代码或一个函数等进行详细注释。
5. JavaScript 变量
- 5.1 变量命名规则
- 可以包含字母、数字、下划线
_和美元符号$。 - 不能以数字开头。
- 区分大小写，例如
myVar和myvar是不同的变量。 - 不能使用 JavaScript 的关键字和保留字作为变量名。
- 可以包含字母、数字、下划线
- 5.2 变量作用域
- 全局作用域：在函数外部声明的变量具有全局作用域，可在整个 JavaScript 程序中访问，例如在 HTML 文档中引入的外部 JavaScript 文件中声明的全局变量，在该文档的所有脚本中都可访问。
- 函数作用域：在函数内部声明的
var变量具有函数作用域，可在该函数内部及嵌套函数中访问（变量提升）。 - 块级作用域：
let和const声明的变量具有块级作用域，只在声明所在的块（花括号内）及嵌套块中可访问，在块外不可访问。
6. JavaScript 数据类型
- 6.1 基本数据类型
- 6.1.1 数值类型：包括整数和浮点数，例如
10（整数）、3.14（浮点数）。JavaScript 中的数值可以进行各种算术运算。 - 6.1.2 字符串类型：用单引号
''或双引号""括起来的字符序列，如'Hello'、"JavaScript"。可以进行字符串连接、截取、查找等操作。 - 6.1.3 布尔类型：只有
true和false两个值，常用于条件判断和逻辑运算。 - 6.1.4 undefined：表示变量未被赋值，例如
var x;，此时x的值为undefined。 - 6.1.5 null：表示空值，通常用于主动将变量设置为空，例如
var y = null;，与undefined有所区别。
- 6.1.1 数值类型：包括整数和浮点数，例如
- 6.2 引用数据类型
- 6.2.1 对象：由键值对组成，例如
var person = { name: 'John', age: 30 };，可以通过.或[]访问对象的属性，如person.name或person['name']，对象还可以包含方法（函数）。 - 6.2.2 数组：一种特殊的对象，用于存储多个值，如
var colors = ['red', 'green', 'blue'];，可以通过索引访问数组元素，如colors[0]获取第一个元素'red'，数组有很多内置方法用于操作数组，如push()、pop()、slice()等。
- 6.2.1 对象：由键值对组成，例如
7. JavaScript 对象
- 7.1 对象创建
- 7.1.1 字面量方式：如上述
var person = { name: 'John', age: 30 };，直接使用花括号和键值对创建对象，简洁直观，常用于创建简单对象。 - 7.1.2 使用 new 关键字和构造函数：例如
var obj = new Object(); obj.name = 'Tom';，先创建一个空对象，然后通过点语法添加属性和方法。JavaScript 还提供了一些内置的构造函数，如Array、Date等，用于创建特定类型的对象。
- 7.1.1 字面量方式：如上述
- 7.2 对象属性和方法
- 7.2.1 属性：通过
.或[]访问，如person.name或person['name']，可以动态添加、修改和删除属性，例如person.city = 'New York';添加一个新属性，delete person.age;删除age属性。 - 7.2.2 方法：在对象中定义的函数，如
var person = { name: 'John', sayHello: function() { console.log('Hello!'); } }; person.sayHello();，通过对象名和方法名调用方法，方法内部可以访问对象的属性，使用this关键字指代当前对象。
- 7.2.1 属性：通过
8. JavaScript 函数
- 8.1 函数定义
- 8.1.1 函数声明：
function functionName(parameters) { statements; return value; }，例如function add(a, b) { return a + b; }，函数声明会被提升到当前作用域的顶部，所以可以在声明之前调用函数（但不推荐这样做，会影响代码可读性）。 - 8.1.2 函数表达式：
var functionName = function(parameters) { statements; return value; }，如var multiply = function(x, y) { return x * y; }，函数表达式不会被提升，只有在执行到赋值语句时，函数才被定义，所以必须在赋值之后才能调用。
- 8.1.1 函数声明：
- 8.2 函数参数
- 8.2.1 形参：函数定义时的参数，如
function add(a, b)中的a和b，用于接收函数调用时传递的实参。 - 8.2.2 实参：函数调用时传递的参数，例如
add(3, 5)中的3和5，实参会赋值给对应的形参。 - 8.2.3 默认参数：可以为函数参数设置默认值，如
function greet(name = 'Guest') { console.log('Hello,'+ name); }，如果调用函数时没有传递该参数，则使用默认值。
- 8.2.1 形参：函数定义时的参数，如
9. JavaScript 作用域
- 9.1 全局作用域：在函数外部定义的变量和函数具有全局作用域，可在任何地方访问，例如在 HTML 文档中引入的外部 JavaScript 文件中声明的全局变量和函数，在该文档的所有脚本中都可访问。全局作用域中的变量可能会导致命名冲突，尤其是在大型项目中，应谨慎使用。
- 9.2 函数作用域：在函数内部声明的变量和函数只在该函数内部及嵌套函数中可访问（对于
var声明的变量）。函数作用域内的变量和函数与外部的同名变量和函数互不干扰，形成了一个相对独立的作用域空间。 - 9.3 块级作用域：
let和const声明的变量具有块级作用域，只在声明所在的块（花括号内）及嵌套块中可访问。块级作用域使得变量的作用范围更加明确，有助于避免一些由于变量作用域不清晰导致的问题，例如循环中的变量污染等。
10. JavaScript 事件
- 10.1 事件类型
- 10.1.1 鼠标事件：如
click（点击）、mouseover（鼠标移入）、mouseout（鼠标移出）等，常用于响应用户对页面元素的鼠标操作，例如document.getElementById('myButton').addEventListener('click', function() { console.log('Button clicked!'); });，当点击id为myButton的按钮时，控制台输出'Button clicked!'。 - 10.1.2 键盘事件：如
keydown（按键按下）、keyup（按键抬起）等，可用于处理用户的键盘输入，例如document.addEventListener('keydown', function(event) { console.log('Key pressed:', event.key); });，当用户按下键盘上的键时，控制台输出按下的键。 - 10.1.3 页面加载事件：如
load，当页面及其资源（如图片、脚本等）完全加载完成后触发，例如window.addEventListener('load', function() { console.log('Page loaded!'); });，在页面加载完成后控制台输出'Page loaded!'。
- 10.1.1 鼠标事件：如
- 10.2 事件处理程序
- 10.2.1 内联事件处理：在 HTML 元素中直接指定事件处理函数，如
，当点击按钮时，会调用名为myFunction的 JavaScript 函数。这种方式将 HTML 和 JavaScript 紧密耦合，不利于代码的维护和管理，一般不推荐在大型项目中使用。 - 10.2.2 通过 JavaScript 代码绑定事件处理函数：使用
addEventListener方法为元素绑定事件处理函数，如document.getElementById('myButton').addEventListener('click', myFunction);，这种方式将 HTML 和 JavaScript 分离，更便于代码的组织和维护，是推荐的事件处理方式。addEventListener可以为同一个事件绑定多个处理函数，它们会按照绑定的顺序依次执行。
- 10.2.1 内联事件处理：在 HTML 元素中直接指定事件处理函数，如
11. JavaScript 字符串
- 11.1 字符串操作
- 11.1.1 连接字符串：使用
+运算符，如var str1 = 'Hello'; var str2 = 'World'; var result = str1 + str2;，result的值为'HelloWorld'。也可以使用+=运算符进行字符串的追加，例如str1 += str2;，此时str1的值变为'HelloWorld'。 - 11.1.2 获取字符串长度：通过
length属性获取字符串的长度，如var length = 'JavaScript'.length;，length的值为10。 - 11.1.3 提取子字符串：
substring(start, end)：提取从start索引（包含）到end索引（不包含）之间的子字符串，例如var str = 'Hello World'; var subStr = str.substring(0, 5);，subStr的值为'Hello'。substr(start, length)：从start索引开始，提取length个字符的子字符串，如var subStr2 = str.substr(6, 5);，subStr2的值为'World'。slice(start, end)：与substring类似，但slice支持负数索引，表示从字符串末尾开始计数，例如var subStr3 = str.slice(6, -1);，subStr3的值为'World'（不包含最后一个字符'd'）。
- 11.1.1 连接字符串：使用
12. JavaScript 字符串模板
- 12.1 模板字面量：用反引号括起来，可以包含变量和表达式，如
var name = 'John'; var greeting =Hello, ${name}!; console.log(greeting);，输出'Hello, John!'。模板字面量使得字符串的拼接更加方便和直观，尤其是在需要插入变量或表达式时，可以避免繁琐的字符串连接操作，提高代码的可读性。
13. JavaScript 运算
- 13.1 算术运算
- 加
+、减-、乘*、除/、取余%，例如var x = 5 + 3;，x的值为8；var y = 10 % 3;，y的值为1。 - 递增
++、递减--，分为前置和后置两种形式，前置++（--）会先将变量的值加（减）1，然后再使用该变量的值，例如var a = 5; var b = ++a;，此时a和b的值都为6；后置++（--）会先使用变量的值，然后再将变量的值加（减）1，例如var c = 5; var d = c++;，此时c的值为6，d的值为5。
- 加
- 13.2 比较运算
- 等于
==、全等===、不等于!=、不全等!==、大于>、小于<、大于等于>=、小于等于<=。==在比较时会进行类型转换，例如'5' == 5结果为true；===不会进行类型转换，'5' === 5结果为false。比较运算常用于条件判断，如if (x > 3) { console.log("x is greater than 3"); }。
- 等于
- 13.3 逻辑运算
- 与
&&、或||、非!，例如if (x > 0 && y < 10) { console.log('Both conditions are true'); }，只有当x > 0和y < 10都为true时，才会执行花括号内的代码；if (x > 0 || y < 10) { console.log('At least one condition is true'); }，只要x > 0或y < 10其中一个为true，就会执行花括号内的代码；if (!x) { console.log('x is false'); }，当x为false（或转换为false的值，如0、null、undefined、空字符串等）时，执行花括号内的代码。
- 与
14.JavaScript 比较 和 逻辑运算符
比较运算符
比较运算符在逻辑语句中使用，以测定变量或值是否相等。x=5，下面的表格解释了比较运算符：
| 运算符 | 描述 | 比较 | 返回值 | 实例 |
|---|---|---|---|---|
| == | 等于 | x==8 | false | 实例 » |
| x==5 | true | 实例 » | ||
| === | 绝对等于（值和类型均相等） | x==="5" | false | 实例 » |
| x===5 | true | 实例 » | ||
| != | 不等于 | x!=8 | true | 实例 » |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!=="5" | true | 实例 » |
| x!==5 | false | 实例 » | ||
| > | 大于 | x>8 | false | 实例 » |
| < | 小于 | x<8 | true | 实例 » |
| >= | 大于或等于 | x>=8 | false | 实例 » |
| <= | 小于或等于 | x<=8 | true | 实例 » |
逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符：
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
条件运算符
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
语法
variablename=(condition)?value1:value2
例子
如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。
voteable=(age<18)?"年龄太小":"年龄已达到";
15. JavaScript for 循环
- 15.1 基本语法：
for (initialization; condition; increment/decrement) {
// 循环体语句
}
initialization：初始化表达式，用于初始化循环变量，只在循环开始时执行一次。例如var i = 0;。condition：条件表达式，每次循环开始前都会检查该条件，如果为true，则执行循环体，否则循环结束。例如i < 5;。increment/decrement：递增或递减表达式，用于在每次循环体执行后更新循环变量的值。例如i++;。- 示例：
收起
javascript
for (var i = 0; i < 5; i++) {
console.log(i);
}
-
上述代码会输出
0、1、2、3、4。 -
15.2 for...in 循环：用于遍历对象的可枚举属性（包括继承的可枚举属性），但不建议用于遍历数组（因为会遍历数组的索引，且顺序不一定是数组元素的顺序）。
收起
javascript
for (var prop in obj) {
console.log(obj[prop]);
}
- 例如：
收起
javascript
var person = { name: 'John', age: 30 };
for (var key in person) {
console.log(key + ': ' + person[key]);
}
- 输出：
收起
plaintext
name: John
age: 30
16. JavaScript while 循环
- 16.1 while 循环：
while (condition) {
// 循环体语句
}
只要condition为true，就会一直执行循环体。
- 示例：
var i = 0;
while (i < 5) {
console.log(i);
i++;
}
输出0、1、2、3、4。
-
16.2 do...while 循环：
do {
// 循环体语句
} while (condition);
先执行一次循环体，然后再检查condition，如果为true，则继续执行循环体，直到condition为false。
- 示例：
var j = 0;
do {
console.log(j);
j++;
} while (j < 5);
输出0、1、2、3、4。
17. JavaScript break 和 continue 语句
- 17.1 break 语句：用于跳出当前循环（
for、while、do...while），不再执行循环体中剩余的语句，直接执行循环后面的代码。- 示例：
for (var k = 0; k < 5; k++) {
if (k == 3) {
break;
}
console.log(k);
}
输出0、1、2，当k等于3时，执行break，循环结束。
-
17.2 continue 语句：用于跳过当前循环的剩余语句，直接进入下一次循环的条件判断。
- 示例：
for (var l = 0; l < 5; l++) {
if (l == 2) {
continue;
}
console.log(l);
}
- 输出
0、1、3、4，当l等于2时，执行continue，跳过本次循环体中console.log(l);语句，直接进行下一次循环。
18. JavaScript typeof
- 18.1 用途：用于检测变量的数据类型，返回值为字符串。
- 示例：
typeof 5; // 返回'number'
typeof 'Hello'; // 返回'string'
typeof true; // 返回'boolean'
typeof undefined; // 返回'undefined'
typeof null; // 返回'object'（这是JavaScript的一个历史遗留问题，实际上null是一个特殊值，不是对象）
typeof {}; // 返回'object'
typeof []; // 返回'object'（数组也是对象的一种特殊形式）
typeof function() {}; // 返回'function'
19. JavaScript 类型转换
-
19.1 显式类型转换：
- 数值转换：
Number('123')：将字符串转换为数值，如果字符串不能转换为有效的数值，则返回NaN（Not a Number）。例如Number('123')返回123，Number('abc')返回NaN。parseInt('123')：将字符串转换为整数，从字符串开头开始解析，直到遇到非数字字符为止。例如parseInt('123abc')返回123，parseInt('abc123')返回NaN。还可以指定进制，如parseInt('10', 2)将二进制字符串'10'转换为十进制整数2。parseFloat('3.14')：将字符串转换为浮点数，与parseInt类似，但可以解析小数点。例如parseFloat('3.14abc')返回3.14，parseFloat('abc3.14')返回NaN。
- 字符串转换：
String(123)：将其他类型的值转换为字符串，例如String(123)返回'123'。123.toString()：将数值转换为字符串，注意null和undefined没有toString方法，如果直接调用会报错。例如(123).toString()返回'123'。
- 布尔转换：
Boolean(0)：将其他类型的值转换为布尔值，以下值转换为false：0、null、undefined、空字符串''、NaN，其他值都转换为true。例如Boolean(0)返回false，Boolean('abc')返回true。
- 数值转换：
-
19.2 隐式类型转换：在某些运算或操作中自动发生，例如：
'5' + 3：由于+运算符一侧是字符串，另一侧是数值，JavaScript 会将数值3隐式转换为字符串'3'，然后进行字符串连接，结果为'53'。'5' * 3：*运算符要求两侧都是数值，JavaScript 会将字符串'5'隐式转换为数值5，然后进行乘法运算，结果为15。
20. JavaScript 正则表达式
-
20.1 创建正则表达式：
- 字面量方式：
/pattern/flags，例如/abc/gi，pattern是正则表达式的模式，flags是可选的标志，g表示全局匹配（查找所有匹配，而不是在找到第一个匹配后停止），i表示不区分大小写。 - 使用
RegExp构造函数：new RegExp('pattern', 'flags')，例如new RegExp('abc', 'gi')，与字面量方式效果相同。
- 字面量方式：
-
20.2 正则表达式方法：
test()：用于检测字符串是否匹配正则表达式，返回true或false。
var regex = /abc/;
regex.test('abcdef'); // 返回true
regex.test('defabc'); // 返回false
match()：返回匹配的结果，如果正则表达式带有g标志，则返回所有匹配的结果组成的数组，否则返回第一个匹配的结果及相关信息（如匹配的起始位置等）。
var str = 'abcdefabc';
str.match(/abc/g); // 返回['abc', 'abc']
str.match(/abc/); // 返回['abc', index: 0, input: 'abcdefabc', groups: undefined]
21. JavaScript 错误
-
21.1 错误类型：
Error：基本错误类型，其他错误类型都继承自它。SyntaxError：语法错误，例如代码中存在拼写错误、缺少括号等语法问题时会抛出该错误。ReferenceError：引用错误，当使用未声明的变量或访问不存在的对象属性时会抛出该错误。TypeError：类型错误，例如对不支持的操作数进行操作，如'abc' + 5（字符串和数值相加），或者调用不存在的方法等情况会抛出该错误。
-
21.2 错误处理：
- 使用
try...catch语句来捕获和处理错误，例如：
- 使用
try {
// 可能出错的代码
var x = y; // y未声明，会抛出ReferenceError
} catch (error) {
console.log(error.message); // 输出错误信息
}
try块中放置可能会抛出错误的代码，catch块用于捕获错误并进行处理，可以通过error对象获取错误的相关信息，如message属性获取错误消息。
22. JavaScript 调试
-
22.1 浏览器开发者工具：
- 大多数现代浏览器都提供了开发者工具，通常可以通过按
F12键打开。开发者工具包含多个面板，如控制台（Console）、元素（Elements）、源代码（Sources）等。 - 在控制台面板中，可以查看代码运行时输出的信息（包括
console.log等输出）、错误信息等，还可以直接在控制台中输入 JavaScript 代码进行测试。 - 在源代码面板中，可以查看页面加载的 JavaScript 文件，设置断点（在代码行号旁边点击即可设置断点），当代码执行到断点时，会暂停执行，此时可以查看变量的值、调用栈等信息，方便调试代码。
- 大多数现代浏览器都提供了开发者工具，通常可以通过按
-
22.2 使用
debugger语句：在代码中设置断点，当代码执行到debugger时，会暂停执行，进入调试模式（前提是浏览器开发者工具已打开且处于调试状态）。例如：
function myFunction() {
var x = 5;
debugger;
var y = 10;
}
myFunction();
- 当执行
myFunction函数时，代码执行到debugger语句会暂停，此时可以在开发者工具中进行调试操作。
23. JavaScript 变量提升
- 23.1 变量提升现象：
- 使用
var声明的变量会发生变量提升，即变量声明会被提升到函数顶部，但赋值不会提升。例如：
- 使用
console.log(x); // 输出undefined
var x = 10;
-
在上述代码中，虽然
var x = 10;在console.log(x);之后，但由于变量提升，JavaScript 会将var x;提升到函数顶部，所以在console.log(x);时，x已经声明，但还未赋值，所以输出undefined。 -
let和const声明的变量不存在变量提升，在声明之前使用会报错。例如：
console.log(y); // 报错：ReferenceError: y is not defined
let y = 20;
24. JavaScript 严格模式
- 24.1 启用严格模式：
- 在函数内部开头添加
'use strict';，则该函数内的代码将处于严格模式。例如：
- 在函数内部开头添加
function strictFunction() {
'use strict';
// 函数内的代码处于严格模式
}
-
也可以在整个脚本开头添加（对于模块脚本，默认处于严格模式），则整个脚本内的代码都处于严格模式。
-
24.2 严格模式的限制和变化：
- 禁止使用未声明的变量，在非严格模式下，给未声明的变量赋值会自动在全局作用域创建该变量，但在严格模式下会报错。
- 禁止删除变量或对象，在非严格模式下，可以使用
delete操作符删除某些对象的属性，但在严格模式下，除了删除对象的可配置属性外，其他情况使用delete都会报错。 - 函数的参数不能有同名属性，在非严格模式下，函数参数可以像对象属性一样被赋值和修改，但在严格模式下，这种行为是不允许的，会报错。
- 不允许使用八进制字面量（如
010），在严格模式下，必须使用0o10表示八进制数。
25. JavaScript 使用误区
- 25.1 常见错误和不良实践：
- 全局变量滥用：在全局作用域中随意声明变量，可能导致命名冲突，尤其是在大型项目中，多个脚本文件可能会相互影响。例如在一个脚本中声明了
var globalVar = 10;，在另一个脚本中可能会不小心覆盖这个变量的值，或者使用了相同的变量名但含义不同，导致难以排查的问题。 - 不恰当的类型转换：如上述提到的隐式类型转换可能导致意外结果，开发者应该清楚地知道在什么情况下会发生类型转换，并根据需要进行显式类型转换，以避免出现不符合预期的结果。例如在进行数值计算时，如果涉及到字符串和数值的混合运算，应该先确保数据类型的正确性。
- 过度依赖隐式类型转换：使代码可读性变差，其他开发者可能不容易理解代码的意图和逻辑。例如
if ('5' == 5)这种比较，虽然在 JavaScript 中可以正常工作，但不如if (Number('5') === 5)这样的代码清晰易懂，明确地展示了类型转换的过程。
- 全局变量滥用：在全局作用域中随意声明变量，可能导致命名冲突，尤其是在大型项目中，多个脚本文件可能会相互影响。例如在一个脚本中声明了
26. JavaScript 表单
-
26.1 表单元素获取：
- 通过
document.getElementById()方法根据id获取表单元素，例如var inputElement = document.getElementById('myInput');，获取id为myInput的输入框元素。 - 通过
document.querySelector()方法使用 CSS 选择器获取表单元素，如var buttonElement = document.querySelector('button.submitButton');，获取类名为submitButton的按钮元素。 - 通过
document.querySelectorAll()方法获取多个符合条件的表单元素，返回一个 NodeList 集合，例如var inputElements = document.querySelectorAll('input[type="text"]');，获取所有type为text的输入框元素。
- 通过
-
26.2 表单元素的属性和方法：
- 属性：
value：获取或设置表单元素的值，例如inputElement.value获取输入框的值，inputElement.value = 'New Value';设置输入框的值。checked：对于复选框（checkbox）和单选按钮（radio），用于获取或设置是否选中，例如checkboxElement.checked = true;选中复选框。disabled：用于获取或设置表单元素是否禁用，例如buttonElement.disabled = true;禁用按钮。
- 方法：
focus()：使表单元素获得焦点，例如inputElement.focus();使输入框获得焦点，方便用户输入。blur()：使表单元素失去焦点，例如inputElement.blur();。
- 属性：
27. JavaScript 表单验证
- 27.1 客户端验证：
- 在表单提交前，使用 JavaScript 检查输入内容是否符合要求，例如：
function validateForm() {
var nameInput = document.getElementById('name');
if (nameInput.value === '') {
alert('请输入姓名');
return false;
}
// 其他验证逻辑，如邮箱格式、密码强度等
return true;
}
将onsubmit事件绑定到表单的onsubmit属性上，如，当validateForm函数返回false时，表单不会提交，从而实现客户端的表单验证，减少无效数据提交到服务器。
28. JavaScript 验证 API
- 28.1 HTML5 表单验证属性：HTML5 提供了一些内置的表单验证属性，可以在表单元素上直接设置，无需编写大量 JavaScript 代码。例如：
-
required：表示该表单元素为必填项，例如，如果用户未填写该输入框，表单提交时会自动提示必填。 -
pattern：用于设置正则表达式模式，验证输入内容是否符合指定的格式，例如，用于验证邮箱格式。 -
min、max：用于设置数值输入框的最小值和最大值，例如，限制输入的数值范围。 -
可以通过
checkValidity()方法检查表单元素是否有效，通过validity属性获取表单元素的有效性状态信息，例如
-
var inputElement = document.getElementById('myInput');
inputElement.checkValidity(); // 返回true或false，表示元素是否有效
inputElement.validity; // 返回一个对象