DOM文档对象模型详解,30条操作示例，建议收藏！

概念

浏览器解析 [[HTML]] 或 XML 文件，通过渲染引擎（Webkit、Blink、Gecko…），生成一个内存中的树状结构，称为 DOM 树，是一个用于访问和操作 HTML 或 XML 文档的编程接口，通过 DOM，开发者可以动态地改变页面内容、结构、样式，响应用户的事件（点击、悬浮、双击…）。

在网站页面中有许多页面的元素，当页面到达浏览器时浏览器会为页面创建一个顶级的Document object文档对象，接着生成各个子文档对象，每个页面元素对应一个文档对象，每个文档对象包含属性、方法和事件。可以通过JS脚本对文档对象进行编辑从而修改页面的元素。也就是说，客户端的脚本程序可以通过DOM来动态修改页面内容，从客户端获取DOM中的数据并在本地执行。

常见DOM操作

选择元素

• 获取具有特定 id 的单个元素

let element = document.getElementById('myElement');

• 获取具有特定类名的元素集合

let elements = document.getElementsByClassName('myClass');

• 获取具有特定标签名称的元素集合

let paragraphs = document.getElementsByTagName('p');

访问和修改元素内容

• 获取或设置元素的 HTML 内容

let divContent = document.getElementById('myDiv').innerHTML;
document.getElementById('myDiv').innerHTML = '<p>New Content</p>';

• 获取或设置元素的文本内容，不会返回 HTML 标签

let text = document.getElementById('myParagraph').textContent;
document.getElementById('myParagraph').textContent = 'New Text';

• 获取或设置元素的可见文本内容，考虑 CSS 样式

let visibleText = document.getElementById('myParagraph').innerText;

• 获取元素的属性值

let imgSrc = document.getElementById('myImage').getAttribute('src');

• 设置元素的属性值

let img = document.getElementById('myImage');
img.setAttribute('src', 'new-image.jpg');

修改元素样式

• 通过 element.style 修改元素的行内样式

let element = document.getElementById('myDiv'); 
element.style.color = 'red'; // 修改文本颜色 
element.style.backgroundColor = 'yellow'; // 修改背景颜色 
element.style.fontSize = '20px'; // 修改字体大小

• 通过 classList 修改元素的类名，控制样式

let element = document.getElementById('myDiv'); 
element.classList.add('newClass');  // 添加新类 
element.classList.remove('oldClass');  // 删除指定类 
element.classList.toggle('active');  // 切换类（如果存在则移除，不存在则添加）

• 访问 style 对象的其他属性

let element = document.getElementById('myDiv'); 
let width = element.style.width; // 获取宽度
element.style.border = '1px solid black'; // 设置边框

创建和插入元素

• 创建新的元素节点

let newDiv = document.createElement('div'); 
newDiv.textContent = 'This is a new div'; 
document.body.appendChild(newDiv); // 将新元素添加到页面的末尾

• 创建新的文本节点

let newText = document.createTextNode('Hello, this is a text node'); document.body.appendChild(newText); // 将文本节点添加到页面

• 插入新元素到现有元素之前

let parentElement = document.getElementById('parentDiv'); 
let newElement = document.createElement('p'); 
newElement.textContent = 'This is a new paragraph before the reference element.'; parentElement.insertBefore(newElement, parentElement.firstChild); // 插入到父元素的第一个子元素之前

• 在指定位置插入 HTML 内容

let container = document.getElementById('container'); container.insertAdjacentHTML('beforeend', '<p>This is a new paragraph.</p>');

删除元素

• 删除子节点

let parentElement = document.getElementById('parentDiv'); 
let childElement = document.getElementById('childDiv'); parentElement.removeChild(childElement); // 删除指定的子元素

• 删除元素本身

let element = document.getElementById('myDiv'); 
element.remove(); // 直接删除元素

• 删除元素中的所有子元素

let parent = document.getElementById('parentDiv'); 
while (parent.firstChild) {     
	parent.removeChild(parent.firstChild); // 删除所有子元素 
}

事件处理

• 为元素添加事件监听器

let button = document.getElementById('myButton'); 
button.addEventListener('click', 
	function() {   
				alert('Button clicked!'); 
				});

• 为元素移除事件监听器

let button = document.getElementById('myButton'); 
button.removeEventListener('click', handleClick); // 移除事件监听器

• 使用事件对象来获取事件的详细信息

button.addEventListener('click', function(event) {
  console.log('Event type: ' + event.type);  // 输出事件类型
  console.log('Target element: ' + event.target); // 输出事件目标元素
});

• 阻止事件的默认行为

let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  console.log('Form submission prevented');
});

• 阻止事件冒泡

let button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件冒泡
  alert('Button clicked!');
});

• this 在事件处理中的作用

button.addEventListener('click', function() {
  this.style.backgroundColor = 'red';  // 修改点击按钮的背景颜色
});

其他示例
其他事件、属性可以参考：https://www.w3school.com.cn/jsref/dom_obj_event.asp