HTML | DOM 对象

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。在浏览器中渲染网页时，HTML 代码会被解析成 DOM（Document Object Model）对象。

DOM 是一种跨平台和语言无关的接口，它将 HTML 文档表示为一个树形结构的对象。DOM 对象表示了网页中的各个元素，以及这些元素之间的关系和属性。

获取 DOM 对象

在 JavaScript 中，可以通过多种方式获取 DOM 对象。以下是一些常见的方法：

// 通过 ID 获取元素
const elementById = document.getElementById('elementId');

// 通过标签名获取元素
const elementsByTagName = document.getElementsByTagName('tagName');

// 通过类名获取元素
const elementsByClassName = document.getElementsByClassName('className');

// 通过选择器获取元素
const elementBySelector = document.querySelector('selector');
const elementsBySelectorAll = document.querySelectorAll('selector');

操作 DOM 对象

DOM 对象提供了许多方法和属性，可以对网页中的元素进行操作。以下是一些常用的操作：

// 获取和设置元素的文本内容
const textContent = element.textContent;
element.textContent = 'new content';

// 获取和设置元素的 HTML 内容
const innerHTML = element.innerHTML;
element.innerHTML = '<p>New HTML content</p>';

// 获取和设置元素的属性
const attributeValue = element.getAttribute('attribute');
element.setAttribute('attribute', 'new value');

// 添加和移除 CSS 类名
element.classList.add('className');
element.classList.remove('className');

// 添加和移除事件监听器
element.addEventListener('eventName', eventHandler);
element.removeEventListener('eventName', eventHandler);

// 创建新的元素
const newElement = document.createElement('tagName');

// 将元素插入到父元素中
parentElement.appendChild(newElement);

// 从父元素中移除元素
parentElement.removeChild(element);

遍历 DOM 树

可以通过 DOM 对象的属性和方法遍历整个 DOM 树。以下是一些常用的遍历方式：

// 获取父元素和子元素
const parentElement = element.parentNode;
const childElements = element.childNodes;

// 获取上一个兄弟元素和下一个兄弟元素
const previousSibling = element.previousSibling;
const nextSibling = element.nextSibling;

// 获取第一个子元素和最后一个子元素
const firstChild = element.firstChild;
const lastChild = element.lastChild;

总结

HTML | DOM 对象提供了丰富的方法和属性，使开发人员能够动态地操作和修改网页的内容和结构。通过获取和遍历 DOM 对象，可以实现各种网页交互和动态效果。熟悉 DOM 对象的使用对于 web 开发是非常重要的。