无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

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

前沿技术 Micheal 5个月前 (06-20) 65次浏览 已收录 扫描二维码

(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)
关于作者:
流水不争先,争的是滔滔不绝