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

html怎么js

admin
行业动态
2025-05-02
4784

在HTML中通过` 标签嵌入或引用JS文件，可内联编写代码或链接外部.js文件，脚本可置于 或`末尾，通过

HTML与JavaScript的集成与交互

JavaScript的引入方式

方式	说明	示例代码
内联脚本	直接在HTML标签中写入`<script>`标签，适用于少量逻辑。	“`html

JavaScript操作HTML的核心方法

操作类型	常用方法	示例
获取元素	`document.getElementById()`、`document.querySelector()`、`document.getElementsByClassName()`	`document.querySelector("#btn")`
修改样式	`element.style.property`	`document.querySelector(".box").style.backgroundColor = "red"`
事件监听	`element.addEventListener("event", callback)`	`btn.addEventListener("click", function(){ alert("点击了！") })`
创建/删除元素	`document.createElement("tag")`、`parent.appendChild(child)`、`element.remove()`	`const div = document.createElement("div"); document.body.appendChild(div)`

典型应用场景

渲染

html怎么js 第1张

const list = ["苹果", "香蕉", "橙子"];
const ul = document.createElement("ul");
list.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item;
    ul.appendChild(li);
});
document.body.appendChild(ul);

表单验证

const form = document.querySelector("form");
form.addEventListener("submit", function(e) {
    const input = document.querySelector("input[name='email']");
    if (!input.value.includes("@")) {
        e.preventDefault(); // 阻止提交
        alert("请输入有效的邮箱地址！");
    }
});

响应式交互

const navToggle = document.querySelector(".nav-toggle");
navToggle.addEventListener("click", function() {
    document.querySelector("nav").classList.toggle("open");
});