js如何调用html代码(js如何调用代码)-不念博客

在JavaScript中，您可以通过操作HTML文档对象模型（DOM）来与HTML代码进行交互。

以下是几种常用的方法，用于在JavaScript中访问和操作HTML元素。

首先，我们需要一个简单的HTML文件，如下所示：


<!DOCTYPE html>
<html>
<head>
  <title>JavaScript and HTML</title>
</head>
<body>
  <h1 id="myHeading">Hello World!</h1>
  <p>Click the button to change the text of the heading:</p>
  <button onclick="changeText()">Click me</button>
  <script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript and HTML</title>
</head>
<body>
  <h1 id="myHeading">Hello World!</h1>
  <p>Click the button to change the text of the heading:</p>
  <button onclick="changeText()">Click me</button>

  <script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript and HTML</title>
</head>
<body>
  <h1 id="myHeading">Hello World!</h1>
  <p>Click the button to change the text of the heading:</p>
  <button onclick="changeText()">Click me</button>

  <script src="script.js"></script>
</body>
</html>

在这个示例中，我们有一个<h1>元素，其id属性值为myHeading。我们还有一个<button>元素，其onclick属性设置为调用名为changeText的函数。最后，我们使用<script>元素引入名为script.js的外部JavaScript文件。

接下来，我们来创建script.js文件，编写changeText函数以更改<h1>元素的文本：


function changeText() {
  // 通过id获取HTML元素
  var heading = document.getElementById("myHeading");
  // 更改HTML元素的文本内容
  heading.innerHTML = "Hello JavaScript!";
}
function changeText() {
  // 通过id获取HTML元素
  var heading = document.getElementById("myHeading");

  // 更改HTML元素的文本内容
  heading.innerHTML = "Hello JavaScript!";
}
function changeText() {
  // 通过id获取HTML元素
  var heading = document.getElementById("myHeading");

  // 更改HTML元素的文本内容
  heading.innerHTML = "Hello JavaScript!";
}