浅析JS操作DOM的一些常用方法

DOM (Document Object Model) 是处理 HTML 文档的标准 API。在 JavaScript 中，我们可以使用 DOM API 操作页面上的 HTML 元素，改变它们的属性、结构和样式。本文将介绍一些常用的 DOM 操作方法。

获取元素

我们首先需要获取要操作的元素。document 对象提供了很多方法来获取页面上的元素。

通过 id 获取元素

可以使用 document.getElementById() 方法根据元素的 id 获取元素。例如，以下代码可以获取 id 为 my-element 的元素：

let elem = document.getElementById('my-element');

通过标签名获取元素

可以使用 document.getElementsByTagName() 方法根据元素的标签名获取元素。例如，以下代码可以获取页面上所有 div 元素：

let elems = document.getElementsByTagName('div');

通过选择器获取元素

可以使用 document.querySelector() 和 document.querySelectorAll() 方法根据选择器获取元素。例如，以下代码可以获取第一个 .my-class 元素：

let elem = document.querySelector('.my-class');

以下代码可以获取所有 .my-class 元素：

let elems = document.querySelectorAll('.my-class');

属性操作

在获取元素后，我们可以通过 DOM API 操作元素的属性，例如改变元素的内容、修改样式、绑定事件等。

改变元素的内容

可以通过 element.textContent 属性更改元素的文本内容，例如：

let elem = document.getElementById('my-element');
elem.textContent = 'New content';

修改样式

可以通过 element.style 属性修改元素的样式。例如，以下代码可以将 id 为 my-element 的元素的背景颜色设置为红色：

let elem = document.getElementById('my-element');
elem.style.backgroundColor = 'red';

绑定事件

可以使用 element.addEventListener() 方法为元素添加事件监听器。例如，以下代码可以为 id 为 my-button 的元素添加点击事件监听器：

let button = document.getElementById('my-button');
button.addEventListener('click', function() {
  console.log('Button clicked');
});

示例说明

示例一：将所有 p 元素的文本内容改为大写字母

let paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].textContent = paragraphs[i].textContent.toUpperCase();
}

示例二：切换某个 div 元素的显示状态

HTML：

<div id="my-div" style="display: block;">Some content</div>
<button id="toggle-button">Toggle</button>

JavaScript：

let div = document.getElementById('my-div');
let button = document.getElementById('toggle-button');

button.addEventListener('click', function() {
  if (div.style.display === 'block') {
    div.style.display = 'none';
  } else {
    div.style.display = 'block';
  }
});

总结

DOM 操作是 JavaScript 中必不可少的一部分，本文介绍了常用的 DOM 操作方法，包括获取元素和属性操作等。掌握这些方法可以帮助我们更方便地操作 HTML 元素，并实现更丰富的交互效果。