跳到主要内容

WTF HTML极简教程: 11. HTML和JavaScript

WTF HTML 教程,帮助新人快速入门 HTML。

推特@WTFAcademy_@0xAA_Science

WTF Academy 社群: 官网 wtf.academy | WTF Solidity 教程 | discord | 微信群申请

所有代码和教程开源在 github: github.com/WTFAcademy/WTF-HTML


JavaScript 是一种轻量级的编程语言,经常与 HTML 和 CSS 一起使用,用于创建交互式的网站。在本章,我们将介绍如何使用 <script> 标签在 HTML 中插入 JavaScript,HTML DOM模型,以及如何使用 JavaScript 操作 HTML 元素。

使用 <script> 标签插入 JavaScript

在 HTML 中,我们可以使用 <script> 标签插入 JavaScript 代码。<script> 标签可以放在 HTML 文档的 <head><body> 部分。通常,为了避免阻塞页面的渲染,我们会将 <script> 标签放在 <body> 标签的末尾。

下面是一个简单的示例:

<!DOCTYPE html>
<html>
<body>

<h2>HTML 和 JavaScript 示例</h2>

<button onclick="displayDate()">显示日期</button>

<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

在这个示例中,当用户点击按钮时,JavaScript 函数 displayDate() 会被执行,显示当前的日期和时间。

HTML DOM模型

DOM (Document Object Model) 是一个跨平台和语言独立的接口,允许程序和脚本动态访问和更新文档的内容、结构和样式。

HTML DOM 是一个标准对象模型和编程接口。它将 HTML 文档转化为一个树形结构,其中每个节点都是一个对象,代表了 HTML 文档的一部分。

使用JavaScript操作HTML元素

JavaScript 可以通过 HTML DOM 来访问和更改 HTML 元素。下面是一些常用的 DOM 方法:

  • document.getElementById(id):返回对拥有指定 id 的第一个对象的引用。
  • document.getElementsByClassName(name):返回一个包含所有带有指定类名的元素的 NodeList。
  • document.getElementsByTagName(name):返回一个包含所有带有指定标签名的元素的 NodeList。
  • document.querySelector(cssQuery):返回文档中匹配指定 CSS 选择器的第一个元素。
  • document.querySelectorAll(cssQuery):返回文档中匹配指定 CSS 选择器的所有元素的 NodeList。

这些方法可以用来获取 HTML 元素,然后可以使用 DOM 属性和方法修改这些元素,比如改变元素的文本内容、属性值或样式。

例如,下面的 JavaScript 代码使用 getElementById 方法获取了一个元素,并修改了该元素的文本内容:

<!DOCTYPE html>
<html>
<body>

<h1 id="myHeading">Hello World!</h1>

<button onclick="changeText()">点击改变文本</button>

<script>
function changeText() {
var heading = document.getElementById("myHeading");
heading.innerHTML = "Hello WTF!";
}
</script>

</body>
</html>

当用户点击按钮时,页面上的标题会从 "Hello World!" 变为 "Hello WTF!"。

总结

HTML和JavaScript是紧密配合的两个技术,JavaScript提供了操作HTML元素的能力,而HTML DOM模型则为我们提供了一种标准的方式来表示和操作HTML文档。掌握这两个技术,可以帮助你创建更加动态和交互式的网站。