原生 JS 操作 DOM 元素

一、查找 DOM 元素

1. 使用`getElementById`

通过元素的`id`属性来查找单个元素。

示例：

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

2. 使用`getElementsByTagName`

根据标签名查找一组元素，返回一个 HTMLCollection。

示例：

const elements = document.getElementsByTagName('div');

3. 使用`getElementsByClassName`

根据类名查找一组元素，返回一个 HTMLCollection。

示例：

const elements = document.getElementsByClassName('myClass');

4. 使用`querySelector`和`querySelectorAll`

`querySelector`返回匹配指定选择器的第一个元素。

`querySelectorAll`返回匹配指定选择器的所有元素，是一个 NodeList。

示例：

const element = document.querySelector('.myClass');` `const elements = document.querySelectorAll('div.myClass');

二、修改 DOM 元素的内容和属性

1. 修改文本内容

使用`textContent`属性设置或获取元素的文本内容。

示例：

element.textContent = 'New text';

2. 修改 HTML 内容

使用`innerHTML`属性设置或获取元素的 HTML 内容。

示例：

element.innerHTML = '<p>New HTML</p>';

3. 修改属性

使用`setAttribute`方法设置属性值。

使用`getAttribute`方法获取属性值。

示例：

element.setAttribute('class', 'newClass');
const value = element.getAttribute('data-id');

三、创建和添加 DOM 元素

1. 创建新元素

使用`document.createElement`方法创建新的元素。

示例：

const newElement = document.createElement('div');

2. 添加子元素

使用`appendChild`方法将一个新元素添加到父元素的子节点列表末尾。

示例：

parentElement.appendChild(newElement);

3. 插入元素

使用`insertBefore`方法在指定的现有子节点之前插入一个新元素。

示例：

parentElement.insertBefore(newElement, existingElement);

四、删除 DOM 元素

1. 使用`removeChild`方法从父元素中删除一个子元素。

示例：

parentElement.removeChild(childElement);

五、操作 DOM 元素的样式

1. 使用`style`属性修改元素的内联样式。

示例：

element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

2. 使用`classList`操作元素的类名。

`addClass`方法添加类名。

`removeClass`方法移除类名。

`toggleClass`方法切换类名。

示例：

element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('activeClass');