DOM常见的操作有哪些

DOM（文档对象模型）是一种用于表示和操作HTML和XML文档的标准。在JavaScript中，可以使用DOM API来对DOM进行操作

常见的DOM操作：

1. 获取元素：

   • document.getElementById(id): 根据元素的id属性获取元素。
   • document.getElementsByClassName(className): 根据元素的class属性获取元素。
   • document.getElementsByTagName(tagName): 根据元素的标签名获取元素。
   • document.querySelector(selector): 根据选择器获取第一个匹配的元素。
   • document.querySelectorAll(selector): 根据选择器获取所有匹配的元素。

2. 创建元素：

   • document.createElement(tagName): 创建一个指定标签名的元素节点。
   • document.createTextNode(text): 创建一个包含指定文本内容的文本节点。

3. 修改元素属性和内容：

   • element.setAttribute(name, value): 设置元素的属性值。
   • element.getAttribute(name): 获取元素的属性值。
   • element.innerHTML: 设置或获取元素的HTML内容。
   • element.innerText: 设置或获取元素的文本内容。

4. 添加和删除元素：

   • parentElement.appendChild(newChild): 将一个新的子节点添加到指定父节点的子节点列表的末尾。
   • parentElement.removeChild(child): 从指定父节点的子节点列表中删除一个子节点。

5. 修改元素样式：

   • element.style.property = value: 设置元素的CSS样式属性值。

6. 添加事件监听器：

   • element.addEventListener(event, listener): 给元素添加一个事件监听器。
   • element.removeEventListener(event, listener): 移除元素的一个事件监听器。

7. 查询和修改元素的位置和尺寸：

   • element.getBoundingClientRect(): 获取元素相对于视口的位置和尺寸信息。
   • element.offsetTop: 获取元素相对于其父元素的垂直偏移量。
   • element.offsetLeft: 获取元素相对于其父元素的水平偏移量。
   • element.offsetWidth: 获取元素的宽度（包括边框和内边距）。
   • element.offsetHeight: 获取元素的高度（包括边框和内边距）。

这只是一些常见的DOM操作，还有很多其他操作可以根据具体需求进行学习和使用。

常见的DOM操作的详细代码示例

1. 获取元素：

// 根据id获取元素
const elementById = document.getElementById('myElement');
console.log(elementById);

// 根据class获取元素
const elementsByClass = document.getElementsByClassName('myClass');
console.log(elementsByClass);

// 根据标签名获取元素
const elementsByTagName = document.getElementsByTagName('div');
console.log(elementsByTagName);

// 根据选择器获取元素
const elementBySelector = document.querySelector('.myClass');
console.log(elementBySelector);

const elementsBySelectorAll = document.querySelectorAll('.myClass');
console.log(elementsBySelectorAll);

结果示例：

HTMLCollection [div.myClass, div.myClass]

HTMLCollection [div, div, div]



NodeList [div.myClass, div.myClass]

2. 创建元素：

// 创建元素节点
const newElement = document.createElement('div');
newElement.textContent = 'New Element';
console.log(newElement);

// 创建文本节点
const newText = document.createTextNode('New Text');
console.log(newText);

结果示例：

New Element

New Text

3. 修改元素属性和内容：

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

// 设置属性值
element.setAttribute('data-id', '123');
console.log(element.getAttribute('data-id'));

// 设置HTML内容
element.innerHTML = 'Hello World';
console.log(element.innerHTML);

// 设置文本内容
element.innerText = 'Hello, Vue!';
console.log(element.innerText);

结果示例：

123

Hello World

Hello, Vue!

4. 添加和删除元素：

const parentElement = document.getElementById('parentElement');

// 添加子节点
const newChild = document.createElement('div');
newChild.textContent = 'New Child';
parentElement.appendChild(newChild);
console.log(parentElement);

// 删除子节点
parentElement.removeChild(newChild);
console.log(parentElement);

结果示例：

  
New Child

5. 修改元素样式：

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

// 设置样式属性值
element.style.backgroundColor = 'red';
element.style.color = 'white';
console.log(element.style);

结果示例：

{
  backgroundColor: 'red',
  color: 'white'
}

6. 添加事件监听器：

const button = document.getElementById('myButton');

// 添加点击事件监听器
button.addEventListener('click', () => {
  console.log('Button clicked');
});

// 移除点击事件监听器
const clickListener = () => {
  console.log('Button clicked');
};
button.addEventListener('click', clickListener);
button.removeEventListener('click', clickListener);

结果示例：

Button clicked

7. 查询和修改元素的位置和尺寸：

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

// 获取位置和尺寸信息
const rect = element.getBoundingClientRect();
console.log(rect);

// 获取垂直偏移量
console.log(element.offsetTop);

// 获取水平偏移量
console.log(element.offsetLeft);

// 获取宽度和高度
console.log(element.offsetWidth);
console.log(element.offsetHeight);

结果示例：

DOMRect {
  bottom: 100,
  height: 50,
  left: 100,
  right: 200,
  top: 50,
  width: 100,
  x: 100,
  y: 50
}

50

100

100

50

这些示例展示了一些常见的DOM操作，你可以根据具体需求进行学习和使用。

DOM操作的使用场景

1. 获取元素：

   • 使用场景：当需要获取特定元素或一组元素时，可以使用getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll等方法。
   • 优点：方便快捷地获取所需的元素。
   • 缺点：在大型DOM结构中，使用这些方法可能会导致性能问题。

2. 创建元素：

   • 使用场景：当需要在DOM中动态创建新的元素节点或文本节点时，可以使用createElement和createTextNode方法。
   • 优点：可以灵活地创建新的元素节点和文本节点。
   • 缺点：频繁创建新的元素节点可能会影响性能。

3. 修改元素属性和内容：

   • 使用场景：当需要修改元素的属性值、HTML内容或文本内容时，可以使用setAttribute、getAttribute、innerHTML和innerText等方法。
   • 优点：可以方便地修改元素的属性和内容。
   • 缺点：使用innerHTML和innerText方法可能存在安全性问题，因为它们可以执行任意的HTML和脚本代码。

4. 添加和删除元素：

   • 使用场景：当需要将新的元素添加到DOM中或从DOM中删除元素时，可以使用appendChild和removeChild方法。
   • 优点：可以灵活地添加和删除元素。
   • 缺点：频繁添加和删除元素可能会影响性能。

5. 修改元素样式：

   • 使用场景：当需要修改元素的样式时，可以通过设置元素的style属性来实现。
   • 优点：可以动态地改变元素的样式。
   • 缺点：使用style属性直接操作样式可能会导致代码混乱和难以维护。

6. 添加事件监听器：

   • 使用场景：当需要在特定事件发生时执行特定操作时，可以使用addEventListener和removeEventListener方法添加和移除事件监听器。
   • 优点：可以方便地添加和移除事件监听器。
   • 缺点：如果添加的事件监听器过多或处理的逻辑复杂，可能会导致性能问题。

7. 查询和修改元素的位置和尺寸：

   • 使用场景：当需要获取元素在视口中的位置和尺寸，或者需要获取元素相对于父元素的位置和尺寸时，可以使用getBoundingClientRect、offsetTop、offsetLeft、offsetWidth和offsetHeight等属性和方法。
   • 优点：可以方便地获取元素的位置和尺寸信息。
   • 缺点：频繁查询和修改元素的位置和尺寸可能会影响性能。

这些是常见的DOM操作的使用场景和优缺点，根据具体的需求和情况选择合适的操作方式。在使用DOM操作时，需要注意性能问题和安全性问题，避免频繁操作DOM或执行不安全的操作。