(javascript dom) JavaScript中DOM常见的操作汇总 DOM操作概述 全网首发(图文详解1)

(javascript dom) JavaScript中DOM常见的操作汇总

在JavaScript中，DOM（Document Object Model）是一个跨平台和语言独立的接口，用于与HTML和XML文档交互。可以通过DOM API来查询、修改、添加或删除页面的内容、结构和样式。下面是一些常见的DOM操作以及它们的使用方法。

1. 选择元素

• document.getElementById(id)：通过元素的ID来选取元素。
• document.getElementsByTagName(name)：通过标签名来获取元素列表。
• document.getElementsByClassName(name)：通过类名获取一组元素。
• document.querySelector(selector)：返回文档中匹配指定选择器的第一个元素。
• document.querySelectorAll(selector)：返回文档中匹配指定选择器的所有元素的NodeList。

示例代码

const element = document.getElementById('myElement'); // 通过ID选择
const elementsByTag = document.getElementsByTagName('div'); // 通过标签名选择
const elementsByClass = document.getElementsByClassName('myClass'); // 通过类名选择
const firstMatch = document.querySelector('.myClass'); // 通过CSS选择器选择第一个匹配的元素
const allMatches = document.querySelectorAll('.myClass'); // 通过CSS选择器选择所有匹配的元素

2. 修改元素内容和属性

• element.textContent：获取或设置元素内的文本内容。
• element.innerHTML：获取或设置元素内的HTML内容。
• element.setAttribute(name, value)：设置元素的属性。
• element.removeAttribute(name)：移除元素的属性。

示例代码

const element = document.getElementById('myElement');
element.textContent = '新的文本内容'; // 修改文本内容
element.innerHTML = '<span>新的HTML内容</span>'; // 修改HTML内容
element.setAttribute('data-custom', 'value'); // 设置属性
element.removeAttribute('data-custom'); // 移除属性

3. CSS样式操作

• element.style.property：直接修改元素的样式属性。
• element.className：获取或设置元素的class。

示例代码

const element = document.getElementById('myElement');
element.style.color = 'blue'; // 修改元素的字体颜色
element.style.border = '1px solid black'; // 修改元素的边框
element.className = 'new-class'; // 设置元素的class

4. 创建、插入和移除节点

• document.createElement(tag)：创建一个新的元素节点。
• parent.appendChild(child)：将一个新的子节点添加到父节点的子节点列表的末尾。
• parent.insertBefore(newNode, referenceNode)：将新节点插入到参考节点之前。
• parent.removeChild(child)：移除一个子节点。

示例代码

const newElement = document.createElement('div'); // 创建新元素
document.body.appendChild(newElement); // 插入到文档body的末尾

const parentElement = document.getElementById('parent');
const referenceElement = document.getElementById('reference');
parentElement.insertBefore(newElement, referenceElement); // 在reference元素之前插入新元素

parentElement.removeChild(newElement); // 移除新元素

5. 事件处理

• element.addEventListener(event, handler)：为元素添加事件监听器。
• element.removeEventListener(event, handler)：移除事件监听器。

示例代码

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

function handleClick(event) {
  console.log('按钮被点击了');
}

// 为按钮添加点击事件
button.addEventListener('click', handleClick);

// 移除按钮的点击事件
button.removeEventListener('click', handleClick);

以上是一些基本的DOM操作。在实际开发中，你可能需要结合使用这些操作来实现复杂的功能。记得在处理DOM时，应该小心维护性能，避免过度操作导致页面性能降低。
(python 类装饰器) Python中的装饰器类详解 提取标题：使用类作为装饰器 全网首发(图文详解1)
(python中[]) Python中[ ]、[:]和[::]的用法总结 提取 title: Python 中 [ ][:] 和 [::] 的使用和实现 全网首发(图文详解1)

喜欢 (0)赏

[]

分享 (0)