在网页开发中，DOM（文档对象模型）API 是一个至关重要的工具，它允许开发者与网页内容进行交互。掌握DOM API，你就能轻松地操作网页元素，实现丰富的交互效果。以下是一份速查手册，旨在帮助你快速掌握DOM API，让你在操作网页元素时游刃有余。
1. 获取元素
要操作DOM元素，首先需要获取它们。以下是一些常用的方法：
1.1 通过ID获取元素
var element = document.getElementById("elementId");
1.2 通过标签名获取元素
var elements = document.getElementsByTagName("tagName");
1.3 通过类名获取元素
var elements = document.getElementsByClassName("className");
1.4 通过CSS选择器获取元素
var element = document.querySelector("CSS选择器");
1.5 通过querySelectorAll获取多个元素
var elements = document.querySelectorAll("CSS选择器");
2. 属性操作
DOM API 提供了丰富的属性操作方法，以下是一些常用的属性操作方法：
2.1 获取属性
var attributeValue = element.getAttribute("attributeName");
2.2 设置属性
element.setAttribute("attributeName", "attributeValue");
2.3 删除属性
element.removeAttribute("attributeName");
3. 文本操作
文本操作是DOM API中非常实用的功能，以下是一些常用的文本操作方法：
3.1 获取元素内容
var content = element.innerHTML; // 获取所有内容
var content = element.innerText; // 获取文本内容
3.2 设置元素内容
element.innerHTML = "新内容"; // 设置所有内容
element.innerText = "新文本"; // 设置文本内容
3.3 插入文本
element.insertAdjacentHTML("位置", "HTML内容");
element.insertAdjacentText("位置", "文本内容");
4. 样式操作
通过DOM API，你可以轻松地修改元素的样式：
4.1 获取元素样式
var style = element.style;
4.2 设置元素样式
element.style.property = "value";
4.3 获取计算后的样式
var computedStyle = window.getComputedStyle(element);
5. 事件处理
事件处理是DOM API中的一项重要功能，以下是一些常用的事件处理方法：
5.1 添加事件监听器
element.addEventListener("事件类型", function() {});
5.2 移除事件监听器
element.removeEventListener("事件类型", function() {});
5.3 事件对象
在事件处理函数中，你可以通过event参数获取事件对象，以下是一些常用的事件对象属性：
event.type：事件类型event.target：事件触发的元素event.preventDefault()：阻止默认行为event.stopPropagation()：阻止事件冒泡
6. 其他常用方法
以下是一些DOM API中常用的其他方法：
6.1 创建元素
var newElement = document.createElement("tagName");
6.2 插入元素
element.appendChild(newElement); // 添加到子元素
element.insertBefore(newElement, referenceElement); // 在指定元素前插入
6.3 删除元素
element.parentNode.removeChild(element); // 删除元素
6.4 查找元素
var element = element.querySelector("CSS选择器");
6.5 查找所有元素
var elements = element.querySelectorAll("CSS选择器");
通过以上速查手册，相信你已经对DOM API有了初步的了解。在实际开发中，不断实践和总结，你将能够熟练地运用DOM API，轻松操作网页元素。祝你学习愉快！