编程笔记 html5cssjs 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 元素作为对象具有多种属性,例如:

  • innerHTMLtextContent:获取或设置元素内的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编程中的一些主要应用:

  1. 动态内容更新

    • 改变文本内容:使用textContentinnerHTML属性来更改页面上任意元素的文本内容。
      document.getElementById('myElement').textContent = '新的文本';
      
    • 插入新元素:使用createElement()创建新元素,然后用appendChild()将其添加到DOM树中。
      const newParagraph = document.createElement('p');
      newParagraph.textContent = '这是一个新段落';
      document.body.appendChild(newParagraph);
      
  2. 事件处理

    • 绑定事件监听器:使用addEventListener()为特定的DOM元素添加事件处理函数,以响应用户的交互行为,如点击、滚动、键入等。
      button.addEventListener('click', function() {// 执行点击按钮后的动作...
      });
      
  3. 样式操作

    • 修改CSS样式:通过style属性直接操作元素的内联样式。
      element.style.color = 'red';
      
    • 类名切换:利用classList属性添加、移除或切换CSS类名以改变元素样式。
      element.classList.add('active');
      element.classList.remove('hidden');
      element.classList.toggle('show');
      
  4. 遍历与查找

    • 遍历DOM树:使用childNodes, firstChild, lastChild, nextSibling, previousSibling等属性遍历DOM节点及其子节点。
    • 选择器查询:通过querySelector()querySelectorAll()方法根据CSS选择器获取匹配的元素集合。
      const allDivs = document.querySelectorAll('div');
      const firstHeading = document.querySelector('h1');
      
  5. 表单交互

    • 获取表单值:读取表单控件的值并进行验证或提交。
      const usernameInput = document.getElementById('username');
      const username = usernameInput.value;
      
    • 监听表单事件:例如submit事件,处理表单提交逻辑。
      form.addEventListener('submit', function(event) {event.preventDefault(); // 阻止默认提交行为// 处理表单数据...
      });
      
  6. AJAX请求与数据绑定

    • 使用DOM与AJAX结合,可以在不刷新页面的情况下从服务器获取数据,并将返回的数据插入到页面中相应的位置。
  7. 动画与过渡效果

    • 通过定时器、CSS transitions 或 animations 与DOM操作相结合,实现动态布局变化和视觉特效。

总之,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编程中具有至关重要的地位,其重要性体现在以下几个方面:

  1. 动态网页构建

    • DOM允许JavaScript与HTML文档进行交互,使得开发者能够动态地改变网页的内容、结构和样式。通过DOM API,可以创建、修改或删除页面上的任意元素,实现网页内容的实时更新。
  2. 事件处理

    • DOM提供了丰富的事件处理机制,使得JavaScript能够监听和响应用户的交互行为,如点击、滚动、输入等。通过将事件处理器绑定到DOM元素上,可以开发出高度交互式的用户界面。
  3. 数据绑定与AJAX应用

    • 在现代Web应用中,DOM是实现前后端数据同步的关键桥梁。使用DOM,JavaScript可以通过AJAX请求获取服务器端数据并将其反映到页面上,反之亦然,也可以通过DOM操作将用户在前端界面上的改动发送回服务器。
  4. 可访问性和兼容性

    • DOM定义了一套标准接口,确保了跨浏览器兼容性,使得开发者可以用一致的方式来操作不同浏览器中的HTML文档。同时,它也支持辅助技术工具来更好地解析和呈现网页内容,从而提高网站的可访问性。
  5. 组件化与框架基础

    • 大多数现代前端框架(如React、Vue.js、Angular等)都是基于对DOM的抽象和优化。它们的核心功能之一就是高效地管理和更新虚拟DOM,进而影响实际DOM,以实现实时渲染和高性能的应用程序。
  6. SEO友好

    • 虽然SPA(单页应用程序)主要依赖于DOM操作来刷新页面内容,但现代框架已经很好地解决了搜索引擎爬虫抓取问题,确保即使在大量使用DOM操作的场景下也能生成对SEO友好的静态内容。

综上所述,DOM是JavaScript Web开发的基础支柱,它不仅提供了一种描述和操作网页的标准方法,而且支撑着现代Web应用程序的动态特性、用户体验及性能优化等多个核心领域。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/706873.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gprMax3.0随机介质建模

此处利用gprMax建立随机介质模型,采用matlab生成随机数组,保存为HDF5文件,此处为全代码,无需修改即可运行。在gprMax输入文件中使用#geometry_objects_read:读入自定义的随机模型 此文参考其他博主的自定义几何形状模块gprMax3.0建模时如何自定义目标的几何形状_#geomet…

為什麼使用海外動態代理IP進行網路爬蟲?

網路爬蟲作為獲取網路數據的重要工具,其重要性不言而喻。但隨著網站反爬策略的日益嚴格,爬蟲任務變得愈發困難,不過海外動態代理IP可以很好地解決這一問題。本文將詳細闡釋動態代理IP在爬蟲中的應用,以及如何使用動態代理IP提升爬…

深入理解ngx_http_proxy_connect_module模块(下)

目录 5. 源码分析5.1 模块的初始化代码5.2 请求入口点函数分析5.2.1 ngx_http_proxy_connect_post_read_handler5.2.2 ngx_http_proxy_connect_handler5.3 域名解析回调5.4 向上游服务器发起连接5.4.1 ngx_http_proxy_connect_process_connect5.4.2 ngx_http_proxy_connect_wri…

欧盟发布关于网络安全、通信网络弹性的综合风险评估报告:具有战略意义的十大网络安全风险场景

在欧盟委员会和欧盟网络安全局 ENISA 的支持下,欧盟成员国近日发布了一份报告,详细介绍了欧洲通信基础设施和网络的网络安全和弹性。 该报告概述了对欧盟具有战略意义的十种风险情景。 1、 擦除器/勒索软件攻击 2、 供应链攻击 3、 攻击托管服务、托…

HarmonyOS—使用数据模型和连接器

Serverless低代码开发平台是一个可视化的平台, 打通了HarmonyOS云侧与端侧能力,能够轻松实现HMS Core、AGC Serverless能力调用。其中,数据模型和连接器是两大主要元素。开发者在使用DevEco Studio的低代码功能进行开发时,可以使用…

Redis有哪些原子命令?

SET key value [NX|XX]:将键key设置为指定的字符串value,如果键不存在,则创建,如果键已经存在,则覆盖原有值。可选参数NX表示仅在键不存在时设置值,XX表示仅在键已存在时设置值。 GETSET key value&#x…

给生成出来的a链接或其他dom节点添加点击事件

onMounted(() > {nextTick(() > {const domNodes document.querySelectorAll(a)console.log(domNodes)domNodes.forEach((item, index) > {item.addEventListener(click, async () > {// 点击文章后进行统计console.log(点击了节点!, index)})})}) })q…

npm install的-S和-D的区别

在npm install参数中,-S代表 --save,-D标志--save-dev。 1、-S (--save) 用于将包添加到项目的 dependencies,表示这是在生产环境中运行时所需的依赖。例如:npm install package-name -S,这将把 package-name 添加到 …

express+mysql+vue,从零搭建一个商城管理系统5--用户注册

提示:学习express,搭建管理系统 文章目录 前言一、新建user表二、安装bcryptjs、MD5、body-parser三、修改config/db.js四、新建config/bcrypt.js五、新建models文件夹和models/user.js五、index.js引入使用body-parser六、修改routes/user.js七、启动项…

书生·浦语大模型全链路开源体系介绍

背景介绍 随着人工智能技术的迅猛发展,大模型技术已成为当今人工智能领域的热门话题。2022 年 11 月 30 日,美国 OpenAI 公司发布了 ChatGPT 通用型对话系统 并引发了全球 的极大关注,上线仅 60 天月活用户数便超过 1 亿,成为历史…

淘宝问大家植入广告

随着电子商务的迅猛发展,各大电商平台都在努力提升用户体验,打造更加互动和有趣的购物环境。淘宝作为中国最大的电商平台之一,其“问大家”功能作为社区互动的重要一环,不仅为买家提供了提问和分享经验的平台,也成为卖…

【实践总结】文件上传可能导致的DoS

通过CVE-2023-24998了解上传的可能隐患 Apache Commons FileUpload场景 条件1&#xff1a; &#xff08;影响版本&#xff09; <!-- Apache Commons FileUpload --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-file…

【小沐学QT】QT学习之OpenGL开发笔记

文章目录 1、简介2、Qt QOpenGLWidget gl函数3、Qt QOpenGLWidget qt函数4、Qt QOpenGLWindow5、Qt glut6、Qt glfw结语 1、简介 Qt提供了与OpenGL实现集成的支持&#xff0c;使开发人员有机会在更传统的用户界面的同时显示硬件加速的3D图形。 Qt有两种主要的UI开发方…

【Azure 架构师学习笔记】-Azure Synapse -- Link for SQL 实时数据加载

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Synapse】系列。 前言 Azure Synapse Link for SQL 可以提供从SQL Server或者Azure SQL中接近实时的数据加载。通过这个技术&#xff0c;使用SQL Server/Azure SQL中的新数据能够几乎实时地传送到Synapse&#xff08;…

音视频数字化(视频的数字化)

前面我们已经聊了音频的数字化【音视频数字化(音频数字化)】,并且介绍了音乐CD的那些事儿【音视频数字化(音乐CD)】。从原理上讲,视频的数字化与音频大致相仿,只是相对复杂。 目录 1、模拟视频 2、视频采集 2、压缩标准 1、模拟视频 在【音视频数字化(数字与模拟…

前端路由与后端路由的区别

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

react useContext 用法

1 创建createContext import React, { useContext, useEffect, useState } from react const GlobalContext React.createContext() 2 GlobalContext 作为提供者 export default function App(){ const [filmList,setfilmList] useState([]); const [info,setinfo] useS…

SQL注入漏洞解析--less-7

我们先看一下第七关 页面显示use outfile意思是利用文件上传来做 outfile是将检索到的数据&#xff0c;保存到服务器的文件内&#xff1a; 格式&#xff1a;select * into outfile "文件地址" 示例&#xff1a; mysql> select * into outfile f:/mysql/test/one f…

Vue源码系列讲解——实例方法篇【一】(数据相关方法)

目录 0. 前言 1. vm.$watch 1.1 用法回顾 1.2 内部原理 2. vm.$set 2.1 用法回顾 2.2 内部原理 3. vm.$delete 3.1 用法回顾 3.2 内部原理 0. 前言 与数据相关的实例方法有3个&#xff0c;分别是vm.$set、vm.$delete和vm.$watch。它们是在stateMixin函数中挂载到Vue原…

【OnlyOffice】 桌面应用编辑器,版本8.0已发布,PDF表单、RTL支持、Moodle集成、本地界面主题

ONLYOFFICE桌面编辑器v8.0是一款功能强大、易于使用的办公软件&#xff0c;适用于个人用户、企业团队和教育机构&#xff0c;帮助他们高效地处理文档工作并实现协作。无论是在Windows、macOS还是Linux平台上&#xff0c;ONLYOFFICE都能提供无缝的编辑和共享体验。 目录 ONLYOFF…