DOM常见的操作有哪些?

DOM（文档对象模型）是一种将HTML文档视为一个树形结构的编程接口，它提供了一组API来操作HTML元素和文档内容。

目录

获取元素：

修改元素内容：

操作元素属性：

创建和添加元素：

移除元素：

监听事件：

---

• 获取元素：

• 可以通过标签名、类名、ID、属性等方式获取页面中的元素。

    
劳霞明
    
888
    
我是myClass
    

• 修改元素内容：

• 可以修改元素的文本内容、HTML内容、样式等。

element.textContent = 'Hello, world!'; // 修改元素文本内容
element.innerHTML = 'Hello, world!'; // 修改元素HTML内容
element.style.color = 'red'; // 修改元素样式

• 操作元素属性：

• 可以修改元素的属性值，如src、href、value等。

const img = document.getElementById('myImage');
img.src = 'image.jpg'; // 修改图片地址

const link = document.getElementById('myLink');
link.href = 'https://www.example.com'; // 修改链接地址

const input = document.getElementById('myInput');
input.value = 'Text input'; // 修改输入框的值

• 创建和添加元素：

• 可以通过JavaScript动态地创建新元素并添加到页面中。

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

const parentElement = document.getElementById('myParent');
parentElement.appendChild(newElement); // 将新元素添加到页面中

• 移除元素：

• 可以将元素从页面中移除。

const elementToRemove = document.getElementById('myElement');
elementToRemove.parentNode.removeChild(elementToRemove); // 从页面中移除元素

• 监听事件：

• 可以监听元素的各种事件，如点击、鼠标移入等。

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('Button clicked');
});