javascript的DOM是什么_怎样动态修改网页内容和样式？-js教程-PHP中文网

javascript的DOM是什么_怎样动态修改网页内容和样式？

幻影之瞳

发布： 2025-12-15 16:56:58

原创

775人浏览过

DOM是HTML的“JS版本”，即浏览器将HTML解析成可操作的树状对象结构，使JavaScript能控制内容、样式和事件。

javascript的dom是什么_怎样动态修改网页内容和样式？

DOM（Document Object Model）是浏览器把 HTML 文档解析成的一个树状对象结构，每个标签、文本、属性都变成可操作的 JS 对象。有了它，JavaScript 才能真正“看到”并控制网页内容和样式。

DOM 是什么？

简单说，DOM 就是 HTML 的“JS 版本”。比如页面里有 <h1 id="title">欢迎</h1>，浏览器加载后会自动生成一个 DOM 节点对象，你可以用 JS 写 document.getElementById('title') 拿到它，然后读取或改写它的文字、颜色、显示状态等。

这个对象树有层级关系：document 是根，下面有 html、head、body，body 里再嵌套 div、p、span……每个节点都有属性（如 node.tagName）、方法（如 node.appendChild()）和事件响应能力。

怎样获取页面中的元素？

常用方法有这几个，按场景选：

立即学习“Java免费学习笔记（深入）”；

ChatCut

AI视频剪辑工具

1086

查看详情

document.getElementById('id名') —— 最快，适合唯一标识的元素
document.querySelector('CSS选择器') —— 灵活，支持 .class、div>p、[data-id="123"] 等写法，只返回第一个匹配项
document.querySelectorAll('选择器') —— 返回所有匹配的 NodeList（类似数组，可遍历）
element.children 或 element.parentNode —— 在已有节点基础上向上/向下找兄弟或父子元素

怎样动态修改内容和样式？

拿到元素后，改内容和样式都很直接：

改文字内容：el.textContent = '新文字'（安全，不解析 HTML）或 el.innerHTML = '<em>加粗</em>文字'（可插 HTML，但注意 XSS 风险）
改样式：el.style.color = 'red'（内联样式，驼峰写法，如 backgroundColor），或者更推荐：el.classList.add('active') / .remove() / .toggle() —— 通过 CSS 类来控制样式，更清晰也更易维护
改属性：el.setAttribute('data-loaded', 'true') 或简写 el.dataset.loaded = 'true'
增删元素：parentEl.appendChild(newEl)、el.remove()、parentEl.insertBefore(newEl, refEl)

一个小例子：点击按钮换标题和背景

假设页面有个按钮和一个标题：

 <button id="changeBtn">换皮肤</button><br><h1 id="mainTitle">默认标题</h1>

登录后复制

JS 可以这样写：

const btn = document.getElementById('changeBtn');<br>const title = document.getElementById('mainTitle');<br><br>btn.addEventListener('click', () => {<br>  title.textContent = '已更新！';<br>  title.classList.add('highlight'); // 前提是 CSS 里定义了 .highlight { color: #ff6b6b; }<br>  document.body.style.backgroundColor = '#f8f9fa';<br>});

登录后复制

基本上就这些。DOM 操作不复杂，但容易忽略细节，比如获取元素时页面还没加载完（记得用 DOMContentLoaded 或把 script 放在 body 底部），或者 classList 方法在老 IE 不支持（现代项目一般不用管）。掌握核心几个 API，就能稳稳地让网页“活起来”。

以上就是javascript的DOM是什么_怎样动态修改网页内容和样式？的详细内容，更多请关注php中文网其它相关文章！