html的文档对象模型的基础操作

可以理解为前端html中的节点，整个html页面由各种各样的文档对象模型组成

本文中简单介绍文档对象模型的基础操作

1. 获取元素

// 通过ID获取元素
let headerElement = document.getElementById('header');

// 通过类名获取元素集合
let paragraphs = document.getElementsByClassName('paragraph');

// 通过标签名获取元素集合
let images = document.getElementsByTagName('img');

2. 操纵元素属性

// 读取和设置元素的文本内容
headerElement.textContent = '新的标题';

// 读取和设置元素的HTML内容
paragraphs[0].innerHTML = '<strong>加粗文本</strong>';

// 修改元素的样式
headerElement.style.color = 'blue';

// 添加或移除元素的类名
headerElement.classList.add('highlight');

3. 创建和插入新元素

// 创建新的段落元素
let newParagraph = document.createElement('p');
newParagraph.textContent = '这是新的段落。';

// 插入新元素到文档中
document.body.appendChild(newParagraph);

// 或者插入到特定元素之前
document.getElementById('container').insertBefore(newParagraph, document.getElementById('existingElement'));

4. 事件处理

// 添加点击事件处理程序
headerElement.addEventListener('click', function() {
    alert('标题被点击了！');
});

// 移除点击事件处理程序
headerElement.removeEventListener('click', function() {
    alert('不再监听标题点击事件。');
});

5. 删除元素

// 删除元素
let elementToRemove = document.getElementById('elementToRemove');
elementToRemove.parentNode.removeChild(elementToRemove);