JavaScript DOM操作

目录

获取元素：

修改元素属性：

添加、删除、替换元素：

修改样式：

---

DOM（文档对象模型）是一种用于操作 HTML 和 XML 文档的 API。JavaScript 通过 DOM API 可以访问和操作页面中的元素、属性和样式等。

获取元素：

可以使用 document.getElementById 或 document.querySelector 获取元素。

const elementById = document.getElementById('example-id'); const elementByQuery = document.querySelector('.example-class');

修改元素属性：

可以使用 element.setAttribute 或 element.property 来修改元素属性。

elementById.setAttribute('class', 'new-class'); elementByQuery.textContent = 'New text content';

添加、删除、替换元素：

可以使用 element.appendChild、element.removeChild、element.replaceChild 等方法来添加、删除和替换元素。

const newElement = document.createElement('div');
newElement.textContent = 'New element content';
elementById.appendChild(newElement);

const childElement = elementById.querySelector('.child-element');
elementById.removeChild(childElement);

const replacementElement = document.createElement('span');
replacementElement.textContent = 'Replacement element content';
elementById.replaceChild(replacementElement, childElement);
 

修改样式：

可以使用 element.style 来修改元素的 CSS 样式。

elementById.style.backgroundColor = 'red'; elementById.style.fontSize = '24px';

这些只是一些常见的 JavaScript DOM 操作，还有很多其他方法和属性可以使用。