dom 是 javascript 操作网页内容的核心机制，它将 html 文档转化为树状结构，使 js 能访问和修改页面元素。1.dom 全称 document object model（文档对象模型），浏览器解析 html 后生成 dom 树；2.获取元素常用方法包括 document.getelementbyid、queryselector、queryselectorall 等；3.修改内容可用 textcontent、innerhtml，修改样式推荐使用 classlist 或 style 属性，属性操作用 setattribute 和 getattribute；4.添加元素需创建后用 appendchild 插入，删除元素可用 remove 或 removechild；5.注意确保 dom 加载完成后再操作，减少频繁重排重绘以优化性能。
DOM 是 JavaScript 中操作网页内容的核心机制。简单来说，它把 HTML 文档转化成一个树状结构，JS 可以通过这个结构来访问、修改页面上的任何元素。
什么是 DOM？
DOM 全称是 Document Object Model（文档对象模型）。当你打开一个网页时，浏览器会解析 HTML 文件，并把它转换成一个由节点组成的树形结构，这个结构就是 DOM。JS 就是通过操作这个结构来实现动态更新页面的。
比如，一个简单的 HTML 页面：
<p>Hello World</p>
在 DOM 中就表示为一个 p 元素节点，里面包含一个文本节点 "Hello World"。
如何获取 DOM 元素？
要操作页面上的元素，首先要能“找到”它们。常用的方法有以下几个：
-
document.getElementById('id')：通过 ID 获取元素，最直接的方式。 -
document.querySelector('选择器')：支持 CSS 选择器，灵活强大。 -
document.querySelectorAll('选择器')：获取多个匹配的元素。 -
document.getElementsByClassName('class名')：通过类名获取，返回的是一个类数组。 -
document.getElementsByTagName('标签名')：通过标签名获取。
举个例子，如果你有一个按钮：
<button id="myBtn">点我</button>
你可以这样获取它：
const btn = document.getElementById('myBtn');或者用更通用的 querySelector：
const btn = document.querySelector('#myBtn');两者都能达到目的，看个人习惯和具体场景使用。
如何修改 DOM 内容？
拿到元素之后，就可以对它的内容、样式、属性等进行操作了。
修改文本内容
-
使用
textContent或innerText（推荐前者）：const para = document.querySelector('p'); para.textContent = '新的内容';
修改 HTML 内容
-
使用
innerHTML来插入 HTML 字符串：const container = document.querySelector('.container'); container.innerHTML = '<p>这是一段新内容</p>';
⚠️ 注意：innerHTML 插入的内容如果来自用户输入，可能会带来 XSS 安全问题。
修改样式
-
直接通过
style属性设置：para.style.color = 'red'; para.style.fontSize = '20px';
更推荐的做法是通过添加/移除 class 的方式控制样式。
修改属性
-
使用
setAttribute()和getAttribute()：const link = document.querySelector('a'); link.setAttribute('href', 'https://example.com');
如何添加或删除 DOM 元素？
有时候你可能需要动态地往页面中添加或删除元素。
创建并添加元素
- 创建元素：
document.createElement('标签名') - 设置内容或属性
- 添加到页面：
父元素.appendChild(新元素)
例如：
const newPara = document.createElement('p');
newPara.textContent = '这是一个新段落';
document.body.appendChild(newPara);删除元素
- 使用
removeChild()或直接调用remove()方法：
const oldPara = document.querySelector('p');
oldPara.remove(); // 或者 document.body.removeChild(oldPara)常见注意事项
- 操作 DOM 之前确保元素已经加载完成，否则会找不到元素。可以将 JS 放在
DOMContentLoaded事件里，或者放在body最后。 - 频繁操作 DOM 会影响性能，尽量减少重排重绘。
- 使用
classList来操作类名比直接修改className更方便安全。
基本上就这些。DOM 操作虽然不复杂，但细节很多，稍不注意就会出错。多练习几种常见方法，慢慢就能熟练掌握了。
