【JavaWeb】知识总结Ⅳ(JavaScript中的DOM)

最新推荐文章于 2024-05-07 16:45:26 发布

边境矢梦°

最新推荐文章于 2024-05-07 16:45:26 发布

阅读量1.1k

点赞数 3

分类专栏： Java 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/dandelionl_/article/details/131622981

版权

Java 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

🎄欢迎来到@dandelionl_的csdn博文，本文主要讲解Java web的相关知识🎄

🌈我是dandelionl_，一个正在为秋招准备的学弟🌈
🎆喜欢的朋友可以关注一下，下次更新不迷路🎆

Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大)🌑🌒🌓🌔🌕

一. 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 输出流

JavaScript 能够创建动态 HTML 内容：
```
Sun Jul 09 2023 19:53:18 GMT+0800 (中国标准时间)
```
在 JavaScript 中，document.write() 可用于直接写入 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 浏览器执行。

边境矢梦°

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
【JavaWeb】知识总结Ⅳ(JavaScript中的DOM)

当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。HTML DOM模型被结构化为对象树：HTML DOM（Document Object Model）表单是通过JavaScript与HTML表单元素进行交互的机制。它提供了一组方法和属性，用于获取、设置和操作HTML表单元素的值和状态。
复制链接

扫一扫