DOM常见操作详解

一、DOM节点操作

1.1 获取节点

// 1. 按照ID获取
const element = document.getElementById('myId');

// 2. 按照class获取
const elements = document.getElementsByClassName('myClass');

// 3. 按照标签名获取
const divs = document.getElementsByTagName('div');

// 4. CSS选择器
const element = document.querySelector('.class #id');
const elements = document.querySelectorAll('.class');

// 5. 获取父子节点
const parent = element.parentNode;
const children = element.children;
const firstChild = element.firstElementChild;
const lastChild = element.lastElementChild;
const next = element.nextElementSibling;
const prev = element.previousElementSibling;

1.2 创建节点

// 1. 创建元素节点
const div = document.createElement('div');

// 2. 创建文本节点
const text = document.createTextNode('Hello World');

// 3. 创建注释节点
const comment = document.createComment('这是注释');

// 4. 创建文档片段
const fragment = document.createDocumentFragment();

// 5. 克隆节点
const clone = element.cloneNode(true); // true表示深克隆

1.3 插入节点

// 1. 在末尾插入
parent.appendChild(child);

// 2. 在指定元素前插入
parent.insertBefore(newNode, referenceNode);

// 3. 替换节点
parent.replaceChild(newChild, oldChild);

// 4. 插入HTML
element.innerHTML = '<div>新内容</div>';
element.insertAdjacentHTML('beforeend', '<div>新内容</div>');

// 5. 批量插入
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

1.4 删除节点

// 1. 删除子节点
parent.removeChild(child);

// 2. 删除自身
element.remove();

// 3. 清空子节点
while (element.firstChild) {
    element.removeChild(element.firstChild);
}
// 或者
element.innerHTML = '';

二、DOM属性操作

2.1 HTML属性操作

// 1. 获取属性
element.getAttribute('class');
element.id;
element.className;
element.href;

// 2. 设置属性
element.setAttribute('class', 'new-class');
element.id = 'newId';
element.className = 'new-class';

// 3. 检查属性
element.hasAttribute('class');

// 4. 删除属性
element.removeAttribute('class');

// 5. data-*属性
element.dataset.name = 'value';
console.log(element.dataset.name);

2.2 样式操作

// 1. 内联样式
element.style.color = 'red';
element.style.fontSize = '16px';
element.style.backgroundColor = '#fff';

// 2. 类名操作
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');
element.classList.contains('active');

// 3. 获取计算样式
const style = window.getComputedStyle(element);
console.log(style.color);

三、DOM内容操作

3.1 文本操作

// 1. 文本内容
element.textContent = '新文本';
const text = element.textContent;

// 2. 内部HTML
element.innerHTML = '<span>新HTML</span>';
const html = element.innerHTML;

// 3. 外部HTML
element.outerHTML = '<div>替换整个元素</div>';
const outerHtml = element.outerHTML;

3.2 表单操作

// 1. 输入框值
input.value = '新值';
const value = input.value;

// 2. 复选框
checkbox.checked = true;
const isChecked = checkbox.checked;

// 3. 选择框
select.selectedIndex = 1;
const selectedValue = select.value;
const selectedOption = select.options[select.selectedIndex];

四、常见应用场景

4.1 动态创建表格

function createTable(data) {
    const table = document.createElement('table');
    const tbody = document.createElement('tbody');
    
    data.forEach(row => {
        const tr = document.createElement('tr');
        Object.values(row).forEach(text => {
            const td = document.createElement('td');
            td.textContent = text;
            tr.appendChild(td);
        });
        tbody.appendChild(tr);
    });
    
    table.appendChild(tbody);
    return table;
}

// 使用示例
const data = [
    { name: '张三', age: 20 },
    { name: '李四', age: 21 }
];
document.body.appendChild(createTable(data));

4.2 动态列表渲染

function renderList(items, listId) {
    const list = document.getElementById(listId);
    const fragment = document.createDocumentFragment();
    
    items.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        fragment.appendChild(li);
    });
    
    list.appendChild(fragment);
}

// 使用示例
const items = ['苹果', '香蕉', '橙子'];
renderList(items, 'fruit-list');

总结

1. DOM操作主要包括：

   • 节点操作（增删改查）
   • 属性操作
   • 内容操作
   • 样式操作

2. 注意事项：

   • 优先使用新API（如classList）
   • 批量操作使用文档片段
   • 适当缓存DOM查询结果
   • 避免频繁操作DOM