当前位置：首页 > article >正文

js中获取、改变、添加、删除元素的方法

article 2024/10/11 16:21:12

在JavaScript中，操作DOM（文档对象模型）是构建动态网页的关键。通过使用DOM API，可以获取、改变、添加和删除元素。下面将详细介绍这些操作，并提供示例代码。

1. 获取元素

获取DOM元素可以通过多种方法实现：

getElementById()：根据元素的ID获取元素。
getElementsByClassName()：根据类名获取元素集合。
getElementsByTagName()：根据标签名获取元素集合。
querySelector()：获取匹配CSS选择器的第一个元素。
querySelectorAll()：获取匹配CSS选择器的所有元素。

示例代码：

// 根据ID获取元素
const elementById = document.getElementById('myId');

// 根据类名获取元素集合
const elementsByClassName = document.getElementsByClassName('myClass');

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

// 使用CSS选择器获取第一个匹配的元素
const firstElement = document.querySelector('.myClass');

// 使用CSS选择器获取所有匹配的元素
const allElements = document.querySelectorAll('p');

2. 改变元素

获取到元素后，可以修改其内容、属性和样式等。常用的方法包括：

textContent：获取或设置元素的文本内容。
innerHTML：获取或设置元素的HTML内容。
setAttribute()：设置元素的属性。
style：修改元素的CSS样式。

示例代码：

// 修改文本内容
elementById.textContent = '新的文本内容';

// 修改HTML内容
firstElement.innerHTML = '<strong>加粗文本</strong>';

// 修改属性
elementById.setAttribute('class', 'newClass');

// 修改样式
firstElement.style.color = 'blue';
firstElement.style.fontSize = '20px';

3. 添加元素

可以通过创建新元素并将其插入到DOM中来添加元素。常用的方法有：

createElement()：创建新元素。
appendChild()：将新元素添加到指定父元素的末尾。
insertBefore()：在指定的子元素之前插入新元素。

示例代码：

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '这是一个新添加的元素';

// 将新元素添加到<body>中
document.body.appendChild(newElement);

// 在特定元素之前插入
const referenceElement = document.querySelector('p');
document.body.insertBefore(newElement, referenceElement);

4. 删除元素

要从DOM中删除元素，可以使用以下方法：

removeChild()：从父元素中删除指定的子元素。
remove()：直接删除元素。

示例代码：

// 删除特定元素
const parentElement = document.getElementById('parentId');
const childElement = document.getElementById('childId');

// 使用removeChild()删除
parentElement.removeChild(childElement);

// 使用remove()直接删除
childElement.remove();