认识DOM

最新推荐文章于 2024-07-30 22:36:34 发布
最新推荐文章于 2024-07-30 22:36:34 发布
阅读量514 收藏 16
点赞数 17
分类专栏： javascript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43063398/article/details/140716922
版权

初识DOM

浏览器中的渲染引擎（内核）。负责把HTML和CSS文件转换成对象的形式，保存在内存中。

浏览器真正显示在窗口内的页面的数据来源，其实是这些被转换成内存中的数据对象。而所有页面中的元素类型实例（对象），都会通过引用归总到一个根对象上。这个根对象 通过window这个全局对象的document属性引用着。

html中的每个标签都有自己的类型定义，每个标签在内存中都会是一个类型实例（对象）。这些类型上有着很多原型方法和实例属性，只要能获取到这些对象的引用，就能通过这些对象上的方法来改变页面内容和样式，来实现页面的交互。

那么问题来了，浏览器怎么知道该定义什么类型，每个类型要定义哪些原型方法，哪些实例属性呢？

这个时候就有了DOM，DOM全称 Document Object Mode。

DOM有两层意义

一层 是标准

如何转换HTML文档的标准，主要就是需要定义的类型，以及类型上有哪些属性和方法这些标准。

二层 是内存中的一个对象

指的就是 这个根据html文件数据在内存中的对象（这个对象引用这 所有相关元素的实例）。

DOM不仅定义了HTML这种文档的规范，还有XML、 SVG。所以说DOM其实也可以操作XML和SVG。

 DOM类型与继承关系

绿色部分就是我们HTML中的标签对应的类型 。

html中的文本和注释都有对应的Text类型和Comment类型来进行处理。

整个文档就是HTMLDocument类型的实例，window.document就会指向该实例，我们再通过document.getElementById()来获得标签的实例。

Attr就是用来处理标签的属性的类型。

除叶子节点外，其余都是抽象类，是无法生成实例的。

实验

HTMLHtmlElement接口代表HTML文档的<html>元素，它是HTML文档的根元素，包含了文档的头部和正文。

文本是Text类型，属性是Attr类型，他们都会作为子节点出现。

DOM基础操作相关属性和方法

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. 

zczlsy11
关注
  • 17
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
重新认识 dom 中的 appendChild
I_m_Groot的博客
04-28 367
重新认识 dom 中的 appendChild 在进行一些 dom 操作的时候发现一些问题，比如给某个元素添加一个新父元素，需要调用 appendChild 接口，结果出错，看下面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na...
认识DOM和简单的单击事件
Paranoid_truggle的博客
07-26 165
DOM js通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面 文档 文档表示的就是整个HTML网页文档 对象 对象表示要将网页中的每一个部分都转换为了一个对象 模型 使用模型来表示对象之间的联系，这样方便获取对象 节点 节点 Node—构成HTML文档的最基本的单元 常用的节点分为四类 文档节点：整个HTML文档 元素节点：HTML文档中的HTML标签 属性节点：元素的属性 文本节点：HTML标签中的文本内容 <button id="btn">我是一个按钮
初步认识DOM
2301_80661635的博客
04-20 504
DOM的全称是Document Object Model，即文件对象模型。它是W3C组织推荐的处理可扩展置标语言的标准编程接口，是HTML文档的内存中对象表示，它提供了使用JavaScript与网页交互的方式。实际上，DOM是以面向对象的方式来描述的文档模型，它定义了表示和修改文档所需的对象和这些对象的行为、属性以及对象之间的关系。通过JavaScript代码，我们可以对页面进行重构，从而增强与页面的交互性。
js中 认识DOM
ITzhongzi的博客
07-13 289
认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合，DOM节点有: 1. 元素节点：上图中、、等都是元素节点，即标签。
《JavaScript 认识DOM》
墨客联盟
11-15 156
认识DOM 文档对象模型DOM 定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（树节点）。 代码示例： 将HTML代码分解为DOM节点层次图： HTML文档可以说由节点构成的集合，三种常见的DOM节点： 元素节点：<html>、<body>、<p>等都是元素节点； 文本节点：<li>...
认识DOM及元素的获取
Twistedzs的博客
08-13 264
认识DOM及元素的获取
HTML DOM(一)：认识DOM
weixin_34307464的博客
07-08 63
   分类：   HTML/JavaScript/CSS（10）  版权声明：本文为博主原创文章，转载请注明出处http://blog.csdn.net/ghsau。 什么是DOM？       通过 JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行...
dom---认识dom和dom的常用方法
weixin_46773434的博客
12-29 1156
dom—认识dom和dom的常用方法 dom全称Document Object Model，是HTML和XML的编程接口。DOM表示由多层节点构成的文档，通过它Js可以操作Html(添加、删除、修改)，DOM在1998年成为W3C推荐标准，提供了基本的查询结构和查询接口。 文章目录dom---认识dom和dom的常用方法一、节点层级二、Node类型1.节点关系2.操纵节点3.定位元素4.操作dom的属性三、document类型总结 一、节点层级 任何HTML或XML文档都可以用DOM表示为一个由节点
认识虚拟dom
weixin_46063007的博客
07-26 100
进一步认识虚拟dom
Web前端开发技术-认识DOM对象.pptx
07-07
【Web前端开发技术-认识DOM对象】 在Web前端开发中，DOM（Document Object Model）对象是至关重要的概念，它是一个标准的编程接口，允许开发者通过JavaScript等脚本语言操作HTML和XML文档。DOM将HTML或XML文档解析...
DOM初体验，认识DOM
12-19
DOM可以视为一种API的应用 将文件视为一个文件对象，通过程序语言调用DOM对象，来对该文件的某些特定数据做访问操作，并且利用程序将获取的对象数据做更进一步的应用。 HTML DOM 定义了访问和操作HTML文档的标准...
DOM和JavaScri
07-23
想学习JavaScript 的Dom，可以参考这份资料。基础知识，让你认识Dom
jQuery DOM操作 基于命令改变页面
10-29
每天都在与DOM打交道而且晕头转向，不过，自打咱认识了jQuery：是操作属性也不烦了，插入新元素也不晕了，连移动元素及包装元素咱也不抽筋了。。
Dom对象的认识
09-07
传智播客下载种子，从入门到精通的.NET开发技术
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 61
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 348
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【Vue3】自定义组件
最新发布
又言又语
07-30 231
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 898
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值