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

html的js

admin
行业动态
2025-04-29
2038

HTML构建网页结构，JS实现交互逻辑，二者通过DOM操作联动，前端开发中协同实现动态页面效果与数据交互功能

HTML中的JavaScript基础

JavaScript的引入方式

JavaScript可以通过多种方式嵌入HTML页面,常见方法如下：

方式	示例代码	特点
内联脚本（Script）	`<script>alert("欢迎！");</script>`	直接写在HTML中，适合少量代码
外部脚本（Link）	`<script src="main.js"></script>`	分离代码与HTML，便于维护和复用
异步加载（Async）	`<script src="main.js" async></script>`	并行加载，不阻塞后续渲染
延迟加载（Defer）	`<script src="main.js" defer></script>`	按需加载，DOM加载完成后执行

基础语法与操作

变量声明
- 旧式：var name = "张三";
- ES6+：let age = 20; / const pi = 3.14;

函数定义

// 传统函数
function greet(name) {
  console.log("你好，" + name);
}
// 箭头函数
const greet = (name) => console.log(`你好，${name}`);

条件与循环

html的js 第1张

if (age >= 18) { alert("成年"); } else { alert("未成年"); }
for (let i = 0; i < 5; i++) { console.log(i); }

DOM操作核心方法

操作目标	方法	示例
获取元素	`document.getElementById()`	`const btn = document.getElementById("submitBtn");`
`document.querySelector()`	`const box = document.querySelector(".box");`
`element.style`	`box.style.backgroundColor = "red";`
事件绑定	`element.addEventListener()`	`btn.addEventListener("click", submitForm);`

事件处理机制

常见事件类型
- 用户交互：click（点击）、mouseover（悬停）、keydown（按键）
- 页面行为：load（页面加载）、resize（窗口大小改变）
事件绑定方式对比
| 方式 | 优点 | 缺点 |
|———————–|———————————|———————————|
| 内联事件（如 onclick） | 简单直接，无需额外代码 | 混淆逻辑与HTML，难以维护 |
| addEventListener | 支持多事件监听，解绑方便 | 需注意兼容性（IE8+） |
示例：按钮点击事件
```
<button id="myBtn">点击我</button>
<script>
  const btn = document.getElementById("myBtn");
  btn.addEventListener("click", function() {
    alert("按钮被点击！");
  });
</script>
```

表单与验证

获取表单值

const username = document.querySelector("input[name='username']").value;

实时验证示例

<input type="text" id="email" oninput="validateEmail()" placeholder="请输入邮箱">
<script>
  function validateEmail() {
    const email = document.getElementById("email").value;
    const isValid = /^S+@S+.S+$/.test(email); // 正则验证
    document.getElementById("email").style.borderColor = isValid ? "green" : "red";
  }
</script>

相关问题与解答

问题1：`document.getElementsByClassName` 和 `document.querySelectorAll` 有什么区别？

解答：

getElementsByClassName 返回的是实时更新的HTMLCollection（类数组对象），包含所有匹配的元素，但无法直接调用数组方法（需转成数组）。
querySelectorAll 返回的是静态的NodeList，支持forEach等迭代方法，但不会随DOM变化自动更新。
示例：
```
// 使用 querySelectorAll
document.querySelectorAll(".item").forEach(el => el.style.color = "blue");
```

问题2：为什么有时`addEventListener`绑定的事件没有生效？

解答：
常见原因包括：

元素未正确获取：确保DOM加载完成后再绑定事件（可将<script>放在</body>前，或使用DOMContentLoaded事件）。

document.addEventListener("DOMContentLoaded", function() {
  const btn = document.getElementById("myBtn");
  btn.addEventListener("click", handler);
});