JavaScript操作HTML元素的核心是先用querySelector等方法获取元素，再通过textContent、style、classList等属性或addEventListener等方法修改内容、样式、属性及绑定事件。
用 JavaScript 操作 HTML 元素，核心是先“找到”元素，再“做事情”——比如改内容、加样式、响应点击。关键不在写多少代码，而在理解 获取元素 和 操作属性/事件 这两个环节。
用 querySelector 找到你要操作的元素
现代最常用的是 document.querySelector()（找第一个）和 document.querySelectorAll()（找全部），支持 CSS 选择器语法，直观好记。
-
document.querySelector('#header')→ 找 id 为 header 的元素 -
document.querySelector('.btn')→ 找第一个 class 是 btn 的元素 -
document.querySelectorAll('li a')→ 找所有 li 里的 a 标签，返回 NodeList
老方法如 getElementById 或 getElementsByClassName 也能用，但灵活性和可读性不如 querySelector 系列。
修改内容、属性和样式
拿到元素后，直接通过属性或方法更新它：
立即学习“Java免费学习笔记（深入）”；
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
-
el.textContent = '新文字'→ 安全替换纯文本（不解析 HTML） -
el.innerHTML = '加粗了'→ 替换 HTML 内容（注意 XSS 风险） -
el.setAttribute('data-id', '123')或el.dataset.id = '123'→ 设置自定义属性 -
el.style.color = 'red'→ 直接改行内样式（驼峰命名） -
el.classList.add('active')、.remove()、.toggle()→ 安全操作 class
给元素添加交互行为
用 addEventListener 绑定事件，比 onclick 属性更灵活、可多次绑定：
button.addEventListener('click', () => { console.log('点到了'); })- 支持多种事件：'input'、'submit'、'keydown'、'mouseenter' 等
- 事件回调里用
e.target获取被点击的具体元素（适合事件委托）
例如，给列表用事件委托：list.addEventListener('click', e => { if (e.target.tagName === 'LI') { ... } })。
动态创建和插入新元素
想加内容？别拼字符串，用原生 API 更可靠：
-
const p = document.createElement('p')→ 创建元素 -
p.textContent = '这是新段落'→ 设置内容 -
parent.appendChild(p)→ 插入到最后 -
parent.insertBefore(p, parent.firstChild)→ 插到最前 -
el.remove()→ 直接删掉这个元素（不用找父节点）
基本上就这些。不复杂但容易忽略细节：选对方法、注意 textContent 和 innerHTML 的区别、优先用 addEventListener、善用 classList。写多了自然就顺手了。
