后端开发教程 - Java、Spring Boot 实战 - msg200.com
足够的 JavaScript 入门指南：#14 理解 DOM
什么是 DOM？
👉 文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它代表页面，以便程序可以更改文档的结构、样式和内容。DOM 将文档表示为节点和对象。这样，编程语言就可以连接到页面。
把这个扔出窗外，我很困惑😵
👉好的，让我给你一个简单的定义，让你的概念更清晰。DOM 代表所有 HTML 层次结构，以便在 JavaScript 中更好地访问 -> DOM 具有文档对象 -> 它包含我们所有具有结构和样式的 HTML 元素。
👉 DOM 的存在使我们可以直接在 JavaScript 中使用元素，我们不需要 HTML 和 JS 之间的任何中间件。它代表所有 HTML 元素及其属性和样式。
视觉环境中的 DOM
DOM 的必要性
👉故事：考虑制作一个问候网站，点击按钮时会说早上好，但你不能用简单的 HTML 来做到这一点。添加更多内容，假设你想要动态应用一些样式，而这只能通过 DOM 来实现
👉 DOM 使用层次结构创建我们的 HTML 代码的快照，并可用于直接从 JS 播放 HTML
👉 用非常简单的话来说，DOM 的存在是为了让你可以操作、添加、删除元素，添加/删除元素的样式，获取/设置/删除 HTML 属性src等href。
👉 DOM 可用于
👉 选择元素
👉 操作元素
👉 更改其样式和属性
👉 静态/动态添加事件
👉 遍历子元素和父元素
我们将讨论什么？📓
👉 我们将创建一个问候应用程序，其中涵盖选择和操作元素以及样式😁
👉 完成整个 DOM 超出了本文的范围，我强烈建议您阅读MDN上的完整文章
👉 我们将通过
- 选择元素
- 通过 addEventListener 添加事件
- 使用属性
- 操控风格
选择元素
👉 从 DOM 中选择元素可能比较棘手，尽管我们可以使用上述技术来选择元素
getElementById()getElementsByClassName()getElementsByTagName()querySelector()
👉 getElementById获取 HTML 中给出的 id 名称并返回节点，以便我们可以使用 JS 更改或操作该节点。
👉 在index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>greet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="hide" id="heading1">Hey , How Are you?</h1>
<br />
<button id="btn">get greeting</button>
<script src="app.js"></script>
</body>
</html>
👉 在app.js
// selecting node by id
var greet = document.getElementById("heading1");
// changing text of node
greet.textContent = "Hello world";
👉此 JavaScript 可以选择带有“heading1”的节点并为其分配“Hello World”文本
👉getElementsByClassName作为className参数并返回具有与参数相同的 className 的匹配节点列表。
👉 在index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>greet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="header">Hey , How Are you?</h1>
<br />
<button id="btn">get greeting</button>
<script src="app.js"></script>
</body>
</html>
👉 在app.js
// selecting node by className
// notice we're selecting first node from the list by writing '[0]'
var greet = document.getElementsByClassName("header")[0];
// changing text of node
greet.textContent = "Hello world";
👉
getElementsByTagName以标签名称（如h1，p）a作为参数，并从 DOM 树返回匹配的节点元素数组。
👉querySelector以 className 或 Id 作为参数并选择第一个节点元素
👉 如果我们传递一个类，那么我们必须在类前加上.类似前缀.active，如果我们传递 id，那么我们必须传递类似前缀#id。
👉 在index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>greet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="header">Hey , How Are you?</h1>
<br />
<button id="btn">get greeting</button>
<script src="app.js"></script>
</body>
</html>
👉 在app.js
var greet = document.querySelector("#header");
// changing text of node
greet.textContent = "Hello world";
更改节点元素的样式
👉 可以通过两种方式更改节点元素的样式
- 使用风格
- 使用 classList
👉 使用 style 属性更改 body 的背景颜色
document.body.style.backgroundColor = "red";
👉 使用 ClassList 附加 css 类（红色）
document.body.classList.add("red");
改变属性的属性
👉 考虑到你必须在运行时更改背景颜色或图像，你不能在 HTML 中静态地执行此操作
DOM 还提供了在某些事件触发时甚至在没有事件的情况下设置或操作（添加/删除/更改）属性的方法
👉使用 JS更改 Body 的颜色<body>和 src 👉 在<img>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="img" src="" alt="">
<script src="./main.js"></script>
</body>
</html>
👉 在main.js
// setting bg color property of body to red
document.body.setAttribute("bgcolor", "red");
// setting src property of img to some image
document
.getElementById("img")
.setAttribute("src", "2.jpg");
👉setAttibute用于设置HTML属性的值，它需要2个参数，即属性名称和我们要设置的值！
👉请注意，我已经在代码中写入了，这称为方法链。document.getElementById("img").setAttribute("src", "2.jpg");
👉 方法链用于实现相同的目标，但不将该节点/元素存储在一些不需要的变量中（导致代码优化😁）
👉 以相同的方式getAttribute()获取元素属性的名称并返回该属性的值。
👉removeAttribute()还获取属性的名称并从 HTML 中删除该特定属性。
事件监听器
👉 事件监听器用于确定触发某些事件时会发生什么
👉 因此，例如，我有一个按钮，index.html并且我想console.log()在单击按钮时执行某些操作，我必须将 eventListener 附加到按钮上。
👉 在index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">click me</button>
<script src="./main.js"></script>
</body>
</html>
👉 在main.js
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log("hello user");
});
👉addEventListener用于向 HTML 元素添加事件监听器，以便当事件发生时我们可以对 JS 做一些事情。
👉addEventListener需要 2 个参数，即事件名称（在我们的例子中为“click”）和一个函数，该函数告诉事件监听器在事件发生时该做什么（在我们的例子中为问候用户）。
👉请注意，此函数没有名称，这些类型的函数也称为匿名函数，因为它们是在某些事件发生时触发的，因此它们不需要任何名称。
制作一个问候应用程序
👉定义：当最终用户点击问候按钮时，JS 需要根据早上时间或晚上时间加载图像
👉 我们将使用之前学到的所有这些东西，并Date()对象将为我们提供将其传递到条件并动态更改内容的确切时间
👉 在index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>greet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="hide" id="heading1">Hey , How Are you?</h1>
<br />
<button id="btn">get greeting</button>
<script src="app.js"></script>
</body>
</html>
👉 在app.js
// selecting elements
var btn = document.getElementById("btn");
var greet = document.getElementById("heading1");
// attaching event on click
btn.addEventListener("click", function () {
// getting exact hour
var hour = new Date().getHours();
// checking condition
if (hour <= 12) {
document.body.style.backgroundImage =
"url('./morning.jpg')";
greet.textContent = "Good Morning !";
} else {
document.body.style.backgroundImage =
"url('./evening.jpg')";
greet.textContent = "Good Evening!";
}
document.body.style.backgroundPosition = "center";
document.body.style.backgroundSize = "cover";
document.body.style.backgroundRepeat = "no-repeat";
// hiding button
btn.classList.add("hide");
// display the greeting
greet.classList.remove("hide");
});
👉 赞美自己，你已经走了这么远🎉
如果您有任何疑问或反馈，请在评论部分告诉我。为蓬勃发展的开发者社区付出时间总是值得的:)
继续编码❤