网页开发从无到有——html前端学习（五）

JavaScript在html中的使用

在web开发中，HTML、JavaScript、css、php可以说是缺一不可，这节我们就来讲讲HTML与JavaScript之间的简单应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本</title>
</head>
<body>
    <script>
    document.write("Hello World!")
    </script>
    <p id="changeWords">&lt这段文字&nbsp可以被改变&gt</p>
    <button type="button" onclick="onClick()">切换文字</button>
    <script>
        function onClick()
        {
            changeWords = document.getElementById("changeWords");
            changeWords.innerHTML="变换后的文字";
            changeWords.style.color="#00FFFF"
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结果如下：

请添加图片描述

首先我们需要明白document代表什么含义，在JavaScript中，document有着很重要的地位！

document的含义：

document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

第一段JavaScript：

我们在浏览器窗口里输出了“Hello World！” 这几个字符！

第二段JavaScript：
我们定义了一个onClick函数。

在button中，onclick是按钮点击后的回调。

从document的含义，我们可以知道document可以获得当前页面下的所有子对象，因此我们通过 getElementById 方法，找到"changeWords"这个id对应下的对象，并改变其内容和颜色。

相关阅读:
[线程与网络] 网络编程与通信原理(六):深入理解应用层http与https协议(网络编程与通信原理完结)
国科大图数据管理与分析课程项目gStore实验报告
String类
Linux - lsof显示 tcp，udp 的端口和进程
Banana Pi BPI-M7 迷你尺寸开源硬件开发板采用瑞芯微RK3588芯片设计
webpack5 使用cache对Eslint和Babel缓存提升打包构建速度
电脑想加个WIFI功能，怎么选！
揭示GPU上的批处理策略
python+requests库接口自动化测试
【Python学习笔记】字符编码

原文地址：https://blog.csdn.net/weixin_40301728/article/details/125571387