HTML DOM 元素完全指南
专为编程小白设计的大白话DOM元素知识汇总
什么是DOM？
- DOM = 文档对象模型，是网页的编程接口
- 将HTML文档表示为树状结构，每个元素是一个节点
- DOM允许JavaScript操作页面内容、结构和样式
- 当网页加载时，浏览器会创建页面的DOM
DOM元素基础
- 元素节点：HTML标签（如div, p, img）
- 文本节点：元素内的文字内容
- 属性节点：元素的属性（如id, class, src）
- 每个DOM元素都有属性（properties）和方法（methods）
<!– HTML结构 –>
<div id=”myDiv” class=”box”>
<p>这是一个段落</p>
</div>
<div id=”myDiv” class=”box”>
<p>这是一个段落</p>
</div>
获取DOM元素
- document.getElementById(‘id’) – 通过id获取
- document.querySelector(‘css选择器’) – 获取匹配的第一个元素
- document.querySelectorAll(‘css选择器’) – 获取所有匹配元素
- document.getElementsByClassName(‘class’) – 通过类名获取
- document.getElementsByTagName(‘div’) – 通过标签名获取
// 获取id为header的元素
const header = document.getElementById(‘header’);
// 获取第一个button元素
const btn = document.querySelector(‘button’);
// 获取所有class为item的元素
const items = document.querySelectorAll(‘.item’);
const header = document.getElementById(‘header’);
// 获取第一个button元素
const btn = document.querySelector(‘button’);
// 获取所有class为item的元素
const items = document.querySelectorAll(‘.item’);
操作元素内容
- element.innerHTML – 获取/设置元素的HTML内容
- element.textContent – 获取/设置元素的文本内容
- element.innerText – 类似textContent，但会考虑样式
- element.value – 获取/设置表单元素的值
// 修改元素内容
const div = document.querySelector(‘div’);
div.innerHTML = ‘<strong>新内容</strong>’;
// 获取输入框的值
const inputValue = document.querySelector(‘input’).value;
const div = document.querySelector(‘div’);
div.innerHTML = ‘<strong>新内容</strong>’;
// 获取输入框的值
const inputValue = document.querySelector(‘input’).value;
修改元素样式
- element.style.property = ‘value’ – 修改单个样式
- element.className – 获取/设置class属性
- element.classList – 更强大的class操作方法
// 修改单个样式
const box = document.getElementById(‘box’);
box.style.backgroundColor = ‘blue’;
box.style.color = ‘white’;
// 使用classList添加/移除类
box.classList.add(‘active’);
box.classList.remove(‘hidden’);
box.classList.toggle(‘dark-mode’);
const box = document.getElementById(‘box’);
box.style.backgroundColor = ‘blue’;
box.style.color = ‘white’;
// 使用classList添加/移除类
box.classList.add(‘active’);
box.classList.remove(‘hidden’);
box.classList.toggle(‘dark-mode’);
DOM操作
- document.createElement(‘div’) – 创建新元素
- parent.appendChild(child) – 添加子元素
- parent.removeChild(child) – 移除子元素
- element.cloneNode(true) – 克隆元素
- element.replaceWith(newElement) – 替换元素
// 创建新元素并添加到DOM
const newDiv = document.createElement(‘div’);
newDiv.textContent = ‘我是新创建的div’;
document.body.appendChild(newDiv);
// 移除元素
const oldDiv = document.getElementById(‘old’);
oldDiv.parentNode.removeChild(oldDiv);
const newDiv = document.createElement(‘div’);
newDiv.textContent = ‘我是新创建的div’;
document.body.appendChild(newDiv);
// 移除元素
const oldDiv = document.getElementById(‘old’);
oldDiv.parentNode.removeChild(oldDiv);
DOM操作演示
操作演示区
原始元素 – 点击按钮进行操作
这是一个示例方块
你可以修改我或删除我
代码示例
// 创建新元素
const newElement = document.createElement(‘div’);
newElement.innerHTML = ‘<p>新创建的元素</p>’;
newElement.className = ‘demo-element’;
demoArea.appendChild(newElement);
// 修改样式
const box = document.querySelector(‘.original-box’);
box.style.backgroundColor = ‘#4361ee’;
box.style.color = ‘white’;
// 修改内容
box.innerHTML = ‘<p>内容已被修改!</p>’;
// 删除元素
if(demoArea.children.length > 1) {
demoArea.removeChild(demoArea.lastChild);
}
const newElement = document.createElement(‘div’);
newElement.innerHTML = ‘<p>新创建的元素</p>’;
newElement.className = ‘demo-element’;
demoArea.appendChild(newElement);
// 修改样式
const box = document.querySelector(‘.original-box’);
box.style.backgroundColor = ‘#4361ee’;
box.style.color = ‘white’;
// 修改内容
box.innerHTML = ‘<p>内容已被修改!</p>’;
// 删除元素
if(demoArea.children.length > 1) {
demoArea.removeChild(demoArea.lastChild);
}