千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

【热点话题】 零基础学IT IT学习教程 IT学习笔记 IT技术干货 IT培训机构 IT应聘面试 IT职场就业 Java培训机构哪些好
当前位置:首页  >  关于学院  >  技术干货  > 什么是脚本中的DOM

什么是脚本中的DOM

来源:千锋教育
发布人:syq
时间: 2022-09-16 16:32:38 1663317158

  DOM 的概述以及 DOM 中的每个节点所表示的内容。您将不再询问什么是脚本中的DOM。

什么是脚本中的DOM

  以下是 DOM 的简明定义:

  文档对象模型 (DOM) 是构成 Web 上文档(例如网站)的结构和内容的对象的数据表示形式。

  通俗地说,DOM代表您网站的结构。

  一旦你理解了 DOM,你可能想了解影子 DOM 和虚拟 DOM 之间的区别(在 React 和 Vue 中使用)。

1

  DOM 表示您网站的结构。

  多姆从何而来?

  了解以下步骤将更容易掌握DOM的概念。

  导航到网站上的页面。

  您的浏览器将该页面的 HTML 文档下载到本地内存中。

  浏览器加载页面,创建该页面的文档对象模型,该页面是 HTML 文档的表示形式。

  DOM 充当脚本和 HTML 文档本身之间的中介。

  我们可以使用 JavaScript、Python 和其他脚本语言来交互和操作 DOM。

  亲眼看看!

  我鼓励您打开开发人员控制台并查看“网络”选项卡。下载的第一个文件是文档类型,它是HTML文档!

  不要被 HTML 文档的名称欺骗!

  在下图中,该文档称为Document_Object_Model因为它是关于DOM上的维基百科页面。

  当您查看响应选项卡时,您会看到一个简单的 HTML 文件。

2

  在 DOM 上导航维基百科 HTML 文档的“响应”选项卡

  我们可以预览 HTML 文件。这就是 HTML 文件的外观。

3

  在 DOM 上导航维基百科 HTML 文档

  只有在这一点之后,浏览器才会加载页面,从而创建文档对象模型。

  多姆是什么样的?

  当浏览器加载页面时,它会将 DOM 创建为表示基础 HTML 文档的树结构。

4

  DOM 树的表示形式

  树的每个分支都以一个节点结束。每个节点都可以

  包含对象

  附加了事件处理程序

  包含对象的节点

  换句话说,每个节点都可以包含可以通过编程方式访问的 HTML 元素。

  DOM 接口允许以编程方式访问树。使用它们,您可以更改文档的结构、样式或内容。

  以下是 DOM 接口的一些示例:

  文档:表示网页本身,它是所有内容所在的 DOM 树的入口点。通过使用类似于获取文档中与指定选择器匹配的第一个 Element 节点之类的方法。还有更多的方法。querySelector()

  元素:泛型类,表示元素的所有对象都从该类降级

  窗口:表示包含 DOM 文档的窗口。上面提到的文档界面是指此窗口中的文档。

  具有事件处理程序的节点

  上面介绍的相同接口具有可以触发 DOM 操作的事件处理程序。

  文档 — 滚轮事件。 当用户旋转车轮时,将触发车轮事件

  元素 — 错误事件。在资源加载失败或无法使用时触发。

  窗口 — 调整大小事件。在调整窗口大小时触发。

  可用于操作和创建网页的所有属性、方法和事件都组织到对象中。

  什么是脚本中的 DOM?

  在这一点上,应该清楚的是DOM不是JavaScript或Python,也不是编程语言。问“什么是 JavaScript 中的 DOM?”是没有意义的。

  DOM 被设计为独立于任何特定的编程语言。

  多亏了这个选择,你可以用蟒蛇和爪哇脚本等语言访问DOM。通常,它们是用脚本编写的,可以由程序或浏览器执行。

  以下是脚本在 HTML 文档中的外观:

5

  一般来说,您希望将页面 (HTML) 的结构与 DOM (JavaScript) 的操作分开。

  因此,元素要么包含脚本语句(如上例所示),要么通过 属性指向外部脚本文件。

  关键要点

  DOM 是 HTML 页面的结构和内容的表示形式。

  DOM 逻辑树的每个分支都以一个节点结尾。

  每个节点可以包含对象或具有事件处理程序。

  DOM 独立于任何特定的编程语言。

  我们可以使用编程语言来访问和操作DOM。

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

猜你喜欢LIKE

最新文章NEW

相关推荐HOT

更多>>

快速通道 更多>>

开班信息
北京校区
  • 北京校区
  • 大连校区
  • 广州校区
  • 成都校区
  • 杭州校区
  • 长沙校区
  • 合肥校区
  • 南京校区
  • 上海校区
  • 深圳校区
  • 武汉校区
  • 郑州校区
  • 西安校区
  • 青岛校区
  • 重庆校区
  • 太原校区
  • 沈阳校区