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

html中使用js

admin
行业动态
2025-05-03
1

在HTML中嵌入JavaScript可通过“标签实现，支持内联、外部引入或事件绑定，用于

在HTML中引入JavaScript的方式

内联脚本（直接在元素事件中编写）

<button onclick="alert('按钮被点击')">点击我</button>

特点：代码直接嵌入HTML标签，适合简单交互。

内部脚本（`<script>`标签放在`<head>`或`<body>`中）

<script>
  function showAlert() {
    alert('内部脚本执行');
  }
</script>
<button onclick="showAlert()">触发内部脚本</button>

特点：集中管理页面级逻辑，但脚本与HTML耦合。

html中使用js 第1张

外部脚本（引用`.js`文件）

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

特点：支持复用，需注意路径和加载顺序。

方式	适用场景	优点	缺点
内联脚本	简单交互	快速编写，无需引用文件	代码冗余，难以维护
内部脚本	页面级功能	逻辑集中，便于调试	阻塞渲染，可能影响性能
外部脚本	多页面复用	模块化，易维护	需额外请求，加载顺序敏感

JavaScript操作HTML的核心方法

选择元素

// 通过ID选择
const title = document.getElementById('title');
// 通过类名选择（第一个匹配项）
const box = document.querySelector('.box');
// 通过标签名选择（所有匹配项）
const lists = document.getElementsByTagName('li');

与样式

// 修改文本textContent = '新标题';
// 修改HTML
box.innerHTML = '<strong>加粗文本</strong>';
// 修改样式
box.style.backgroundColor = 'lightblue';

绑定事件

const button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('按钮被点击');
});

动态操作DOM示例

创建并插入新元素

// 创建节点
const newNode = document.createElement('div');
newNode.textContent = '我是新建的节点';
// 插入到指定位置
document.body.appendChild(newNode); // 追加到末尾

删除元素

const target = document.querySelector('.remove-me');
target.remove(); // 或 target.parentNode.removeChild(target);

表单验证与事件处理

示例：阻止表单默认提交并校验输入

<form id="myForm">
  <input type="text" id="username" placeholder="请输入用户名">
  <button type="submit">提交</button>
</form>
<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认提交行为
    const username = document.getElementById('username').value;
    if (username === '') {
      alert('用户名不能为空');
    } else {
      alert('表单提交成功');
    }
  });
</script>

异步操作与API调用

使用`fetch`获取数据

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // 处理返回的数据
  })
  .catch(error => console.error('错误:', error));