JavaScript通过DOM操作网页，先获取元素再修改内容、样式、属性；获取方法包括getElementById、querySelector、querySelectorAll等；内容修改用textContent、innerHTML等；样式修改推荐classList；属性操作区分attribute与property。
JavaScript通过DOM（文档对象模型）操作网页内容和样式，核心是先获取元素，再修改其内容、属性或CSS样式。
获取目标DOM元素
常用方法有：
- document.getElementById("id")：通过ID精准获取单个元素
- document.querySelector("选择器")：支持CSS选择器（如 ".box"、"div#header"），返回第一个匹配项
- document.querySelectorAll("选择器")：返回所有匹配的元素 NodeList，需遍历使用
- document.getElementsByClassName("cls") 或 document.getElementsByTagName("div")：返回HTMLCollection，注意是实时集合
修改元素内容
根据需求选择合适的方式：
- element.textContent = "纯文本"：只改文字内容，不解析HTML，安全防XSS
- element.innerHTML = "带标签"：可插入HTML结构，但需确保内容可信
- element.innerText：类似textContent，但受CSS影响（如display:none的文本不包含）
修改元素样式
有两种主流方式：
- element.style.属性名 = "值"：直接设置行内样式，属性名用驼峰写法（如 backgroundColor、fontSize）
- element.className = "new-class" 或 element.classList.add("active")：推荐用 classList 操作类名，更灵活安全（支持 add/remove/toggle/contains）
修改属性和特性
区分 attribute（HTML中写的）和 property（JS对象属性）：
- element.setAttribute("data-id", "123") 或 element.dataset.id = "123"：操作自定义data属性
- element.src = "new.jpg"：直接赋值修改property（如input.value、a.href）
- 表单元素优先用 property（如 checkbox.checked），而非 setA
ttribute
ttribute
