DOM HTML

DOM HTML 的概念

DOM HTML 是指使用 DOM API 操作 HTML 文档的技术。通过 DOM HTML，我们可以访问和修改 HTML 元素、属性和内容，实现动态网页效果。

访问 HTML 元素

1. 通过 ID 访问

使用 getElementById() 方法通过元素的 ID 获取元素：

const element = document.getElementById('myElement');
element.textContent = 'Hello, DOM!';

2. 通过类名访问

使用 getElementsByClassName() 方法通过元素的类名获取元素集合：

const elements = document.getElementsByClassName('myClass');
for (let i = 0; i < elements.length; i++) {
  elements[i].textContent = 'Hello, DOM!';
}

3. 通过标签名访问

使用 getElementsByTagName() 方法通过元素的标签名获取元素集合：

const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].textContent = 'Hello, DOM!';
}

4. 通过 CSS 选择器访问

使用 querySelector() 方法获取第一个匹配的元素，使用 querySelectorAll() 方法获取所有匹配的元素：

// 获取第一个匹配的元素
const firstElement = document.querySelector('.myClass');
firstElement.textContent = 'Hello, DOM!';

// 获取所有匹配的元素
const allElements = document.querySelectorAll('.myClass');
allElements.forEach(element => {
  element.textContent = 'Hello, DOM!';
});

修改 HTML 元素

1. 修改元素内容

textContent

textContent 属性用于获取或设置元素的文本内容：

const element = document.getElementById('myElement');

// 获取文本内容
console.log(element.textContent);

// 设置文本内容
element.textContent = '新的文本内容';

innerHTML

innerHTML 属性用于获取或设置元素的 HTML 内容：

const element = document.getElementById('myElement');

// 获取 HTML 内容
console.log(element.innerHTML);

// 设置 HTML 内容
element.innerHTML = '<strong>加粗文本</strong>';

注意：使用 innerHTML 可能会导致安全问题（如 XSS 攻击），并且性能较差，应尽量避免使用。

2. 修改元素属性

setAttribute()

setAttribute() 方法用于设置元素的属性：

const element = document.getElementById('myElement');

// 设置属性
element.setAttribute('class', 'newClass');
element.setAttribute('disabled', 'disabled');

getAttribute()

getAttribute() 方法用于获取元素的属性：

const element = document.getElementById('myElement');

// 获取属性
console.log(element.getAttribute('class'));
console.log(element.getAttribute('id'));

removeAttribute()

removeAttribute() 方法用于移除元素的属性：

const element = document.getElementById('myElement');

// 移除属性
element.removeAttribute('disabled');

直接访问属性

对于某些标准属性，可以直接通过元素对象访问：

const element = document.getElementById('myElement');

// 直接访问属性
element.id = 'newId';
element.className = 'newClass';
element.src = 'image.jpg';
element.href = 'https://example.com';

3. 修改元素样式

style 属性

使用 style 属性修改元素的内联样式：

const element = document.getElementById('myElement');

// 修改样式
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.backgroundColor = 'yellow';

classList

使用 classList 属性管理元素的类：

const element = document.getElementById('myElement');

// 添加类
element.classList.add('newClass');

// 移除类
element.classList.remove('oldClass');

// 切换类
element.classList.toggle('active');

// 检查类是否存在
console.log(element.classList.contains('active'));

创建和删除 HTML 元素

1. 创建元素

createElement()

createElement() 方法用于创建新元素：

// 创建新元素
const newDiv = document.createElement('div');

// 设置属性
newDiv.id = 'newDiv';
newDiv.className = 'container';

// 设置内容
newDiv.textContent = '新创建的元素';

// 添加到文档
const parent = document.getElementById('parent');
parent.appendChild(newDiv);

createTextNode()

createTextNode() 方法用于创建新文本节点：

// 创建文本节点
const textNode = document.createTextNode('新文本');

// 添加到元素
const element = document.getElementById('myElement');
element.appendChild(textNode);

2. 删除元素

removeChild()

removeChild() 方法用于从父元素中移除子元素：

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 移除子元素
parent.removeChild(child);

remove()

remove() 方法用于直接移除元素：

const element = document.getElementById('myElement');

// 移除元素
element.remove();

插入 HTML 元素

1. appendChild()

appendChild() 方法用于将元素添加到父元素的末尾：

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = '新元素';

// 添加到末尾
parent.appendChild(newElement);

2. insertBefore()

insertBefore() 方法用于在指定元素前插入新元素：

const parent = document.getElementById('parent');
const referenceElement = document.getElementById('reference');
const newElement = document.createElement('div');
newElement.textContent = '新元素';

// 在参考元素前插入
parent.insertBefore(newElement, referenceElement);

3. insertAdjacentHTML()

insertAdjacentHTML() 方法用于在指定位置插入 HTML 字符串：

const element = document.getElementById('myElement');

// 在元素前插入
element.insertAdjacentHTML('beforebegin', '<div>前</div>');

// 在元素内开头插入
element.insertAdjacentHTML('afterbegin', '<div>内开头</div>');

// 在元素内结尾插入
element.insertAdjacentHTML('beforeend', '<div>内结尾</div>');

// 在元素后插入
element.insertAdjacentHTML('afterend', '<div>后</div>');

替换 HTML 元素

1. replaceChild()

replaceChild() 方法用于用新元素替换旧元素：

const parent = document.getElementById('parent');
const oldElement = document.getElementById('old');
const newElement = document.createElement('div');
newElement.textContent = '新元素';

// 替换元素
parent.replaceChild(newElement, oldElement);

2. replaceWith()

replaceWith() 方法用于直接替换元素：

const oldElement = document.getElementById('old');
const newElement = document.createElement('div');
newElement.textContent = '新元素';

// 替换元素
oldElement.replaceWith(newElement);

HTML 集合和节点列表

1. HTMLCollection

getElementsByClassName() 和 getElementsByTagName() 返回的是 HTMLCollection 对象，它是一个类数组对象，实时反映文档的变化：

const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // 输出: 段落数量

// 遍历 HTMLCollection
for (let i = 0; i < paragraphs.length; i++) {
  console.log(paragraphs[i].textContent);
}

// 转换为数组
const paragraphsArray = Array.from(paragraphs);
paragraphsArray.forEach(paragraph => {
  console.log(paragraph.textContent);
});

2. NodeList

querySelectorAll() 返回的是 NodeList 对象，它也是一个类数组对象，但通常不是实时的：

const elements = document.querySelectorAll('.myClass');
console.log(elements.length); // 输出: 元素数量

// 遍历 NodeList
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent);
}

// 使用 forEach 遍历
 elements.forEach(element => {
  console.log(element.textContent);
});

// 转换为数组
const elementsArray = Array.from(elements);
elementsArray.forEach(element => {
  console.log(element.textContent);
});

最佳实践

1. 缓存 DOM 引用

避免重复获取相同的 DOM 元素：

// 好的做法：缓存 DOM 引用
const element = document.getElementById('myElement');
for (let i = 0; i < 10; i++) {
  element.textContent = i;
}

// 不好的做法：重复获取 DOM 元素
for (let i = 0; i < 10; i++) {
  document.getElementById('myElement').textContent = i;
}

2. 批量操作 DOM

使用文档片段减少 DOM 操作次数：

// 好的做法：使用文档片段
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);

// 不好的做法：多次操作 DOM
const container = document.getElementById('container');
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  container.appendChild(div);
}

3. 避免使用 innerHTML

尽量使用 DOM 方法替代 innerHTML：

// 好的做法：使用 DOM 方法
const div = document.createElement('div');
const text = document.createTextNode('Hello');
div.appendChild(text);
document.getElementById('container').appendChild(div);

// 不好的做法：使用 innerHTML
document.getElementById('container').innerHTML = '<div>Hello</div>';

4. 使用现代选择器

优先使用 querySelector() 和 querySelectorAll()：

// 好的做法：使用 querySelector
const element = document.querySelector('#container .item');

// 不好的做法：使用 getElementById 和 getElementsByClassName
const container = document.getElementById('container');
const items = container.getElementsByClassName('item');
const element = items[0];

5. 合理使用事件委托

对于多个相似元素的事件，使用事件委托：

// 好的做法：使用事件委托
const container = document.getElementById('container');
container.addEventListener('click', function(event) {
  if (event.target.classList.contains('item')) {
    console.log('Item clicked:', event.target.textContent);
  }
});

// 不好的做法：为每个元素添加事件监听器
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', function() {
    console.log('Item clicked:', this.textContent);
  });
});

小结

DOM HTML 是使用 DOM API 操作 HTML 文档的技术，它允许我们访问和修改 HTML 元素、属性和内容，实现动态网页效果。通过本文介绍的方法，你可以有效地操作 HTML 文档，创建交互式的网页应用。在实际开发中，应该遵循最佳实践，提高代码性能和可维护性。