【无标题】Web API中的DOM

1.Web API是什么Web API 是浏览器内置提供给 JavaScript 使用的一系列功能接口。 JS 语言本身只负责基础运算、判断、循环想要操作页面、网络、定时器、存储、音视频就要调用Web API。2.分类分为DOM文档对象模型和BOM浏览器对象模型。3.DOMDOMDocument Object Model文档对象模型是浏览器将 HTML 或 XML 文档解析成的一个树状结构它允许 JavaScript 动态访问和操作文档的内容、结构和样式。3.1 DOM 树的结构DOM 将文档表示为一个由节点Node组成的树形结构文档节点Document整个文档的根节点。元素节点ElementHTML 标签如div、p。文本节点Text元素内的文本内容。属性节点Attribute元素的属性如id、class。例如对于以下 HTML!DOCTYPE html html head title示例/title /head body h1标题/h1 p段落/p /body /html其 DOM 树结构大致如下Document └── html ├── head │ └── title │ └── 示例 └── body ├── h1 │ └── 标题 └── p └── 段落3.2 常用 DOM 操作 APIJavaScript 通过 DOM API 与页面交互以下是一些核心方法查询元素document.getElementById(id)通过 id 获取单个元素。document.querySelector(.class)通过 CSS 选择器获取第一个匹配元素。document.querySelectorAll(div)获取所有匹配元素的列表NodeList。修改内容与属性element.textContent/element.innerHTML获取或设置元素的文本/HTML 内容。element.setAttribute(name, value)设置元素属性。element.style.样式属性 value修改元素样式。创建与插入节点document.createElement(div)创建新元素节点。parent.appendChild(child)将子节点插入父节点末尾。parent.insertBefore(newNode, referenceNode)在参考节点前插入新节点。事件处理element.addEventListener(click, handler)为元素添加事件监听器。element.removeEventListener(click, handler)移除事件监听器。3.3 简单示例以下代码演示了如何查询元素并修改其内容// 获取 id 为 title 的元素 const titleElement document.getElementById(title); // 修改其文本内容 titleElement.textContent 新的标题; // 修改其样式 titleElement.style.color blue; // 添加点击事件 titleElement.addEventListener(click, function() { alert(标题被点击了); });3.4 总结DOM 是 Web 开发的核心它建立了文档与 JavaScript 之间的桥梁。理解 DOM 树的结构并掌握常用的 DOM 操作 API是进行动态网页交互和构建现代 Web 应用的基础。