文本与 JavaScript 交互299

在现代网页开发中，JavaScript 发挥着至关重要的作用，它使我们能够动态地修改网页内容和行为。而文本是网页中的基本组成部分，学习如何使用 JavaScript 来操作和修改文本至关重要。

获取文本内容

要在 JavaScript 中获取文本内容，可以使用以下方法：* innerHTML：获取元素包含的所有 HTML 内容，包括子元素。
* textContent：获取元素文本内容，不包括 HTML 标记。
* nodeValue：获取元素节点的值，包括文本和注释节点。
```javascript
const text = ("myText");
(); // 打印包含 HTML 标记的文本内容
(); // 打印不含 HTML 标记的文本内容
(); // 打印文本节点的值
```

设置文本内容

要设置文本内容，可以使用以下方法：* innerHTML：设置包含 HTML 标记的文本内容。
* textContent：设置不含 HTML 标记的文本内容。
* nodeValue：设置文本节点的值。
```javascript
= "新的文本内容"; // 设置包含 HTML 标记的文本内容
= "新的纯文本内容"; // 设置不含 HTML 标记的文本内容
= "新的文本节点值"; // 设置文本节点的值
```

修改文本样式

JavaScript 还允许我们修改文本样式，改变其字体、大小、颜色和对齐方式：* ：设置字体。
* ：设置字体大小。
* ：设置字体颜色。
* ：设置对齐方式。
```javascript
= "Arial"; // 设置字体为 Arial
= "24px"; // 设置字体大小为 24px
= "red"; // 设置字体颜色为红色
= "center"; // 设置对齐方式为居中
```

文本事件

JavaScript 中可以监听文本元素的各种事件，例如：* onchange：当文本内容发生更改时触发。
* onfocus：当文本元素获得焦点时触发。
* onblur：当文本元素失去焦点时触发。
```javascript
("onchange", () => {
("文本内容已更改");
});
("onfocus", () => {
("文本元素获得焦点");
});
("onblur", () => {
("文本元素失去焦点");
});
```

文本验证

JavaScript 也可用于验证文本输入，确保其符合特定格式：* 正则表达式：使用正则表达式来匹配输入文本。
* HTML5 验证属性：使用 HTML5 的验证属性，例如 required、pattern 和 minlength。
```javascript
// 使用正则表达式验证电子邮件地址
const email = "example@";
const re = /^(([^()[\]\\.,;:s@"]+(\.[^()[\]\\.,;:s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const isValidEmail = (email);
// 使用 HTML5 验证属性验证文本输入

```

理解如何在 JavaScript 中操作文本内容至关重要。它使我们能够动态地修改网页文本，增强用户体验，并对表单输入进行验证。本文介绍了获取、设置、修改文本样式、监听文本事件和执行文本验证的基本技术。

2024-12-19

上一篇：JavaScript简介及基础概念

下一篇：JavaScript 中的毫秒：全面指南