JavaScript中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);

结果示例：

<div id="myElement"></div>
HTMLCollection [div.myClass, div.myClass]
HTMLCollection [div, div, div]
<div class="myClass"></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);

结果示例：

<div>New Element</div>
New Text

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

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

结果示例：

123
<span>Hello</span> 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);

结果示例：

<div id="parentElement">
  <div>New Child</div>
</div>
<div id="parentElement"></div>

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或执行不安全的操作。

到此这篇关于JavaScript中DOM常见的操作汇总的文章就介绍到这了,更多相关JavaScript DOM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！