当前位置：首页 > 行业动态 > 正文

html关联js

admin
行业动态
2025-05-08
4421

HTML通过标签嵌入JS脚本，借助事件监听与DOM操作，实现页面

HTML与JavaScript的关联方式

基础结构与脚本引入

HTML 提供页面结构，JavaScript 负责动态行为，两者通过 <script> 标签关联,常见引入方式：

方式	说明
内联脚本	直接在 HTML 中写 `<script>alert("Hello");</script>`，通常用于简单逻辑。
外部脚本	通过 `<script src="app.js"></script>` 引入外部文件，便于复用和管理。
模块化导入	使用 `<script type="module">` 或 ES6 `import` 语法（现代浏览器支持）。

示例：

<!DOCTYPE html>
<html>
<head>HTML+JS 示例</title>
  <script src="main.js" defer></script> <!-外部脚本，defer 延迟执行 -->
</head>
<body>
  <button id="btn">点击我</button>
  <script>
    // 内联脚本：直接绑定事件
    document.getElementById('btn').onclick = function() {
      alert('按钮被点击！');
    };
  </script>
</body>
</html>

脚本执行时机与位置

脚本位置影响页面渲染和执行顺序：

位置	行为描述
`<head>` 中的脚本	阻塞后续资源加载，需用 `defer` 或 `async` 优化。
`<body>` 底部的脚本	保证 HTML 元素已加载，可直接操作 DOM，推荐写法。

关键属性：

html关联js 第1张

defer：按顺序延迟执行,不阻塞页面。
async：异步加载,不保证执行顺序。

JavaScript 操作 HTML 的核心方法

通过 DOM（文档对象模型）操作页面元素：

操作类型	方法示例
获取元素	`document.getElementById('id')` / `document.querySelector('.class')`
样式控制	`element.style.color = 'red'` / `element.classList.add('active')`
事件绑定	`element.addEventListener('click', handler)`

示例：动态修改标题内容

const title = document.querySelector('h1');textContent = '欢迎来到我的网站！'; // 修改文本style.fontSize = '24px';           // 修改样式

数据交互与动态更新

HTML 与 JS 通过事件和数据绑定实现交互：

表单处理：

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交
  const input = form.querySelector('input').value;
  alert(`输入内容：${input}`);
});

AJAX 请求：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    document.getElementById('content').innerHTML = JSON.stringify(data);
  });