编程笔记 html5&css&js 090 JavaScript 文档对象模型
编程笔记 html5&css&js 090 JavaScript 文档对象模型
- 一、文档对象模型
- 二、Javascript编程中文档对象的组成
- DOM 的主要组件：
- 事件（Events）
- 属性（Properties）
- 方法（Methods）
- 三、编程应用
- 四、应用示例
- 小结
DOM（Document Object Model）是文档对象模型的缩写，它是一种标准接口，用于表示和操作HTML、XML以及SVG等格式文档的标准编程接口。DOM将整个文档结构视为一个树形结构，其中每个节点都是一个对象，可以使用JavaScript或其他支持DOM的语言来访问和操作这些对象。
（图片来源网络，侵删）一、文档对象模型
DOM（Document Object Model）是文档对象模型的缩写，它是一种标准接口，用于表示和操作HTML、XML以及SVG等格式文档的标准编程接口。DOM将整个文档结构视为一个树形结构，其中每个节点都是一个对象，可以使用JavaScript或其他支持DOM的语言来访问和操作这些对象。
DOM为Web应用程序提供了一个强大的工具集，使得开发者可以通过程序代码控制网页的行为和表现，从而构建出丰富的动态网站和Web应用。
二、Javascript编程中文档对象的组成
JavaScript 中的文档对象模型（DOM）是网页编程的核心组成部分，它提供了一种结构化的表示方式来处理 HTML 或 XML 文档。通过 DOM，开发者可以动态地访问、修改和更新页面的内容、样式及结构。
DOM 的主要组件：
事件（Events）
- 鼠标事件：click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, contextmenu 等
- 键盘事件：keydown, keyup, keypress
- 焦点事件：focus, blur
- 表单事件：submit, input, change, select, reset
- 触摸事件：touchstart, touchmove, touchend, touchcancel (移动设备)
- 窗口事件：load, unload, beforeunload, resize, scroll
- CSS动画和过渡事件：animationstart, animationend, transitionend
属性（Properties）
DOM 元素作为对象具有多种属性，例如：
- innerHTML 和 textContent：获取或设置元素内的HTML内容或纯文本内容。
- className：获取或更改元素的CSS类名。
- style：访问和修改元素的内联样式。
- id, tagName, nodeName, nodeType：用于标识和类型判断的属性。
- offsetWidth, offsetHeight, clientWidth, clientHeight：获取元素尺寸信息。
- parentNode, childNodes, firstChild, lastChild, nextSibling, previousSibling：遍历节点树关系的属性。
方法（Methods）
- 节点操作：
- createElement(tagName)：创建新元素节点。
- appendChild(node)：将子节点添加到父节点的末尾。
- removeChild(node)：从父节点中删除指定子节点。
- replaceChild(newNode, oldNode)：用新的节点替换旧节点。
- 查询方法：
- getElementById(id)：根据ID获取元素。
- getElementsByClassName(classNames)：根据类名获取一组元素集合。
- querySelector(selector) 和 querySelectorAll(selector)：使用CSS选择器查找元素。
- 属性操作：
- setAttribute(name, value)：设置元素属性值。
- getAttribute(name)：获取元素属性值。
- hasAttribute(name)：检查元素是否具有指定属性。
- 事件处理：
- addEventListener(type, listener[, options])：为元素添加事件监听器。
- removeEventListener(type, listener[, options])：移除已注册的事件监听器。
三、编程应用
JavaScript编程中的文档对象模型（DOM）是实现动态网页和交互式Web应用的关键技术之一。DOM将HTML或XML文档表示为一系列节点组成的树形结构，每个节点代表文档的一部分，如元素、文本、注释等。通过DOM API，开发者可以使用JavaScript对这些节点进行访问、修改、删除以及创建新的节点，从而实现丰富的用户界面操作和数据处理。
以下是DOM在JavaScript编程中的一些主要应用：
-
动态内容更新：
- 改变文本内容：使用textContent或innerHTML属性来更改页面上任意元素的文本内容。
document.getElementById('myElement').textContent = '新的文本'; - 插入新元素：使用createElement()创建新元素，然后用appendChild()将其添加到DOM树中。
const newParagraph = document.createElement('p'); newParagraph.textContent = '这是一个新段落'; document.body.appendChild(newParagraph); -
事件处理：
- 绑定事件监听器：使用addEventListener()为特定的DOM元素添加事件处理函数，以响应用户的交互行为，如点击、滚动、键入等。
button.addEventListener('click', function() { // 执行点击按钮后的动作... }); -
样式操作：
- 修改CSS样式：通过style属性直接操作元素的内联样式。
element.style.color = 'red';
- 类名切换：利用classList属性添加、移除或切换CSS类名以改变元素样式。
element.classList.add('active'); element.classList.remove('hidden'); element.classList.toggle('show'); -
遍历与查找：
- 遍历DOM树：使用childNodes, firstChild, lastChild, nextSibling, previousSibling等属性遍历DOM节点及其子节点。
- 选择器查询：通过querySelector()和querySelectorAll()方法根据CSS选择器获取匹配的元素集合。
const allDivs = document.querySelectorAll('div'); const firstHeading = document.querySelector('h1'); -
表单交互：
- 获取表单值：读取表单控件的值并进行验证或提交。
const usernameInput = document.getElementById('username'); const username = usernameInput.value; - 监听表单事件：例如submit事件，处理表单提交逻辑。
form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认提交行为 // 处理表单数据... }); -
AJAX请求与数据绑定：
- 使用DOM与AJAX结合，可以在不刷新页面的情况下从服务器获取数据，并将返回的数据插入到页面中相应的位置。
-
动画与过渡效果：
- 通过定时器、CSS transitions 或 animations 与DOM操作相结合，实现动态布局变化和视觉特效。
- 获取表单值：读取表单控件的值并进行验证或提交。
- 修改CSS样式：通过style属性直接操作元素的内联样式。
- 绑定事件监听器：使用addEventListener()为特定的DOM元素添加事件处理函数，以响应用户的交互行为，如点击、滚动、键入等。
- 改变文本内容：使用textContent或innerHTML属性来更改页面上任意元素的文本内容。
总之，JavaScript DOM API极大地增强了网页的交互性和动态性，使得开发者能够构建复杂的Web应用程序，而不仅仅是静态的内容展示。通过DOM接口，我们可以构建可响应用户交互、实时更新内容、并且具有丰富视觉表现力的现代Web应用。
四、应用示例
// 获取元素 const button = document.getElementById('myButton'); const outputDiv = document.querySelector('#output'); // 添加事件监听器 button.addEventListener('click', function() { // 改变输出区域的内容 outputDiv.textContent = '按钮已被点击！'; // 动态创建并添加新元素 const newParagraph = document.createElement('p'); newParagraph.textContent = '这是动态创建的新段落'; document.body.appendChild(newParagraph); // 修改现有元素的属性 button.setAttribute('disabled', 'disabled'); }); // 移除事件监听器（在某些条件下） button.addEventListener('dblclick', function() { button.removeEventListener('click', arguments.callee); });以上代码展示了如何通过DOM操作来响应按钮点击事件，包括修改已有元素内容、动态创建和插入新元素以及改变元素属性。
小结
DOM（文档对象模型）在JavaScript编程中具有至关重要的地位，其重要性体现在以下几个方面：
-
动态网页构建：
- DOM允许JavaScript与HTML文档进行交互，使得开发者能够动态地改变网页的内容、结构和样式。通过DOM API，可以创建、修改或删除页面上的任意元素，实现网页内容的实时更新。
-
事件处理：
- DOM提供了丰富的事件处理机制，使得JavaScript能够监听和响应用户的交互行为，如点击、滚动、输入等。通过将事件处理器绑定到DOM元素上，可以开发出高度交互式的用户界面。
-
数据绑定与AJAX应用：
- 在现代Web应用中，DOM是实现前后端数据同步的关键桥梁。使用DOM，JavaScript可以通过AJAX请求获取服务器端数据并将其反映到页面上，反之亦然，也可以通过DOM操作将用户在前端界面上的改动发送回服务器。
-
可访问性和兼容性：
- DOM定义了一套标准接口，确保了跨浏览器兼容性，使得开发者可以用一致的方式来操作不同浏览器中的HTML文档。同时，它也支持辅助技术工具来更好地解析和呈现网页内容，从而提高网站的可访问性。
-
组件化与框架基础：
- 大多数现代前端框架（如React、Vue.js、Angular等）都是基于对DOM的抽象和优化。它们的核心功能之一就是高效地管理和更新虚拟DOM，进而影响实际DOM，以实现实时渲染和高性能的应用程序。
-
SEO友好：
- 虽然SPA（单页应用程序）主要依赖于DOM操作来刷新页面内容，但现代框架已经很好地解决了搜索引擎爬虫抓取问题，确保即使在大量使用DOM操作的场景下也能生成对SEO友好的静态内容。
综上所述，DOM是JavaScript Web开发的基础支柱，它不仅提供了一种描述和操作网页的标准方法，而且支撑着现代Web应用程序的动态特性、用户体验及性能优化等多个核心领域。
-
- 节点操作：
