JavaScript如何操作DOM？

Question

JavaScript如何操作DOM？

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

JavaScript如何操作DOM？

JavaScript可以使用以下方法来操作DOM：

• 获取元素：使用 document.getElementById(), document.querySelector() 或 document.querySelectorAll() 方法获取指定的元素。
• 设置元素的内容：使用 element.textContent 或 element.innerHTML 属性设置元素的内容。
• 设置元素的属性：使用 element.setAttribute() 方法设置元素的属性。
• 添加或删除元素：使用 element.appendChild() 或 element.removeChild() 方法添加或删除元素。
• 修改元素的样式：使用 element.style 属性修改元素的样式。

例如：

// 获取元素
const element = document.getElementById('myElement');

// 设置元素的内容
element.textContent = 'Hello World';

// 设置元素的属性
element.setAttribute('href', 'https://www.example.com');

// 添加元素
const newElement = document.createElement('div');
element.appendChild(newElement);

// 删除元素
element.removeChild(newElement);

// 修改元素的样式
element.style.color = 'red';

这些方法可以帮助你在JavaScript中操作DOM，并实现各种复杂的操作。