js操作dom元素

常用的 JavaScript 操作 HTML 元素的方法的总结：

1. 选择元素

  • document.getElementById(id): 通过元素的 ID 获取元素。
  • document.getElementsByTagName(name): 通过标签名获取一组元素。
  • document.getElementsByClassName(name): 通过类名获取一组元素。
  • document.querySelector(selector): 返回文档中匹配指定 CSS 选择器的第一个元素。
  • document.querySelectorAll(selector): 返回文档中匹配指定 CSS 选择器的所有元素的一个 NodeList。

2. 创建元素

  • document.createElement(tagName): 创建一个新的元素节点。

3. 添加/插入元素

  • element.appendChild(childElement): 将一个元素添加到父元素的子元素列表的末尾。
  • element.insertBefore(newElement, referenceElement): 将一个元素插入到另一个元素的前面。
  • element.replaceChild(newElement, oldElement): 用新元素替换一个已存在的子元素。

4. 删除元素

  • element.removeChild(childElement): 从 DOM 中删除一个子元素。
  • element.remove(): 删除元素本身。

5. 修改元素内容

  • element.innerHTML: 获取或设置元素内部的 HTML 内容。
  • element.textContent: 获取或设置元素内部的文本内容。

6. 修改元素属性

  • element.setAttribute(name, value): 设置元素的属性。
  • element.getAttribute(name): 获取元素的属性值。
  • element.removeAttribute(name): 删除元素的属性。

7. 修改元素样式

  • element.style.property: 获取或设置元素的 CSS 属性。
  • element.classList.add(className): 向元素添加一个或多个类名。
  • element.classList.remove(className): 从元素移除一个或多个类名。
  • element.classList.toggle(className): 切换元素的类名。

8. 事件监听

  • element.addEventListener(event, function, useCapture): 在元素上注册一个事件监听器。
  • element.removeEventListener(event, function, useCapture): 移除元素上的事件监听器。

9. 获取元素尺寸和位置

  • element.offsetWidth: 获取元素的宽度（包括边框和内边距）。
  • element.offsetHeight: 获取元素的高度（包括边框和内边距）。
  • element.getBoundingClientRect(): 返回元素的大小及其相对于视口的位置。

10. 遍历元素

  • 使用 for 循环或者 Array.prototype.forEach 方法遍历 NodeList 或 HTMLCollection。

示例代码

 1// 获取元素
 2var element = document.getElementById('myElement');
 3
 4// 创建元素
 5var newElement = document.createElement('div');
 6
 7// 添加元素
 8element.appendChild(newElement);
 9
10// 修改元素内容
11element.innerHTML = '<p>Hello World!</p>';
12
13// 修改元素样式
14element.style.color = 'red';
15
16// 添加事件监听
17element.addEventListener('click', function() {
18  alert('Element clicked!');
19});
20
21// 获取元素尺寸
22var width = element.offsetWidth;
23var height = element.offsetHeight;
24
25// 遍历元素
26document.querySelectorAll('.items li').forEach(function(item) {
27  console.log(item);
28});