深入理解DOM

news2024/11/17 17:32:25

一、DOM 基本概念

DOM全称 Document Object Model,即文档对象模型,它允许脚本(js)控制Web页面、窗口和文档。

DOM 标准被分为 3 个不同的部分:

1、核心 DOM - 针对任何结构化文档的标准模型

2、XML DOM - 针对 XML 文档的标准模型

3、HTML DOM - 针对 HTML 文档的标准模型

二、DOM 的作用

HTML DOM 树
在这里插入图片描述

DOM基本功能:

① 查询某个元素

② 查询某个元素的祖先、兄弟以及后代元素

③ 获取、修改元素的属性

④ 获取、修改元素的内容

⑤ 创建、插入和删除元素

按照不同的类型来分,dom有不同的节点:文档节点、元素节点、属性节点、文本节点、注释节点。

在这里插入图片描述
总结:

HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。

通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

三、JS 与 DOM

js是代码,html是标记语言

1、在浏览器加载一个页面时,浏览器会解析HTML,并创建文档的一个内部模型,其中包含HTML标记的所有元素,自上而下解析,遇到JavaScript浏览器会检查它的正确性,然后执行代码。

2、JavaScript继续执行,使用DOM检查页面、完成修改、从页面接受事件,或者要求浏览器从Web服务器获取其它数据

注:document是一个反映HTML的对象,通过调用document的方法改变DOM的状态,也就是改变HTML页面

3、JavaScript修改了DOM时,浏览器会随着动态更新页面。

DOM就是一张映射表啦,记录着一堆用代码操控document时的规章制度,直白点说,就是js操作html时的API

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

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

相关文章

预制菜持续火热,食品制造企业如何利用APS自动排程实现生产管理标准化?

在今年预售榜单中,预制菜表现夺人眼球,在天猫“双11”活动的预售第一阶段强势出圈。在众多预售产品中,酸菜鱼已经成为消费者加购的爆品,成为雄霸“双11”预制菜预售榜单之首。 酸菜鱼是川菜的经典菜品,但现在已经突破地…

react源码中的fiber架构

先看一下FiberNode在源码中的样子 FiberNode // packages/react-reconciler/src/ReactFiber.old.js function FiberNode(tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode, ) {// Instancethis.tag tag;this.key key;this.elementType null;t…

Redis框架(六):大众点评项目 缓存更新策略 实现双写

大众点评项目 众点评项目 缓存更新策略 实现双写需求:缓存更新策略业务实现特殊情况展示SpringCloud章节复习已经过去,新的章节Redis开始了,这个章节中将会回顾Redis实战项目 大众点评 主要依照以下几个原则 基础实战的Demo和Coding上传到我…

GIS空间分析之密度分析

密度分析结果可以显示出点要素或线要素较为集中的地方。例如,每个城镇都可能有一个点值,这个点值表示该镇的人口总数,但是您想更多地了解人口随地区的分布情况。由于每个城镇内并非所有人都住在聚居点上,通过计算密度,…

网络安全学习路线,入门到入坟,史上最全网络安全学习路线整理

很多小伙伴在网上搜索网络安全时,会出来网络安全工程师这样一个职位,它的范围很广,只要是与网络安全挂钩的技术人员都算网络安全工程师,一些小伙伴就有疑问了,网络安全现在真的很火吗? 那么寒哥就带大家看…

美港探案:不理想的理想Q3,能否守得云开见月明?

12月9日,港股盘后理想汽车发布了2022年第三季度业绩报告。探员就迫不及待的去理想的官网上看了这份Q3业绩报告,整体数据很不理想,但是也都在探员的预料之内,但是探员对于理想依然是充满了热爱,在电动三傻中对理想也是情…

优美的曲线-turtlesim

从开环到闭环的旅程-CoCube 优美的曲线-译 2022年所公开博客案例所有项目,都在2020年之前完成,并且全部经过3轮以上测试。 当完美实现闭环之后,画曲线那就可以随心所欲啦。 想画什么,就能画什么。 核心代码: float …

DubboSPI使用以及使用方式源码解读

DubboSPI流程图 为什么Dubbo要自己实现SPI java spi 会一次性实例化扩展点所有实现,机制并不能根据获取自己想要的类 获取一个类的实现对象 javaSPI 具有局限性: 1、没法给实现类起别名 2、没法实现包装类。类似AOP的原理 3、没法实现自动注入 4、没法…

[附源码]Python计算机毕业设计SSM基于大数据的汽车流量监控(程序+LW)

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

ESP32 ESP-IDF + LVGL + SquareLine Studio 设计 UI 界面

陈拓 2022/12/10-2022/12/12 1. 概述 关于SquareLine Studio,乐鑫官方的ESP技术文章有介绍:在 ESP 开发板上开发 UI 不再复杂 - 知乎如果您尝试过在没有图形库的情况下开发 UI,那么您一定知道这有多困难。幸运的是,由乐鑫芯片驱动…

线性代数---第六章---二次型

1二次型方的系数为主对角线上的元素 我起码要会如何根据二次型写矩阵A 2规范形是系数为1,-1,0的标准型 3二次型的正惯性指数和负惯性指数 4任一个n阶实对称阵,必然既相似又合同于对角阵 5用配方法化二次型为标准阵 6 正交变换得到的对角阵上…

【产品分析】从用户体验五要素分析——微信读书

本文从用户体验五要素:表现层面、框架层 、战略层、范围层、结构层,对微信读书进行了分析。 前言 互联网发展的速度也加速了知识更新的速度,也许今天你还手握焦点技能,明天就可能被遗忘在角落。一应俱全的网课、铺天盖地的资讯加…

Autosar PWM配置及使用

文章目录前言PWMPwmChannelPwmAssignedHwUnitPwmChannelIdPwmCoherentUpdatePwmDutycycleDefaultPwmIdleStatePwmNotificationPwmChannelClassPwmPeriodDefaultPwmPolarityPwmReferenceChannelPwmSafetySignalPwmShiftValuePWM输出偏移的使用PwmConfigurationOfOptApiServicesP…

Coreform Cubit (csimsoft Trelis)

Coreform Cubit (csimsoft Trelis) Coreform Cubit(csimsoft Trelis)是Coreform公司开发的最强大、最高效的工程工具之一。通常,公司都会启动自己的Mash项目。对于CFD分析,他们有FEA。这个软件可以开始你的工作,添加你自己的印第安形状&#…

2023年湖北建设厅七大员建筑八大员考试什么时候报名?甘建二

2023年湖北建设厅七大员建筑八大员考试什么时候报名? 建设厅七大员和建筑八大员有什么关系呢?有区别吗? 甘建二老师告诉你,建设厅七大员和建筑八大员没有区别,只是叫法不一样而已,都是一个东西。 七大员和…

Kunbernetes——二进制单节点部署

常见的k8s部署方式 1.Mini kube Minikube是一个工具,可以在本地快速运行一个单节点微型K8s,仅用于学习预览K8s的一些特性使用 部署地址: https://kubernetes.io/docs/setup/minikube 2.Kubeadmin Kubeadmin也是一个工具,提供kubeadm init和…

基于python的opencv中SGBM立体匹配算法实现

文章目录前言一、SGBM和SGM的区别?1.预处理2.代价计算3.动态规划4.后处理二、SGBM的python-opencv的实现SGBM 参数选择参考文章前言 SGBM的核心是SGM算法,自OpenCV2.4.6开始就已经被开源,非常的方便,并被广泛使用。 一、SGBM和SGM…

几何角度理解相机成像过程

本笔记从几何角度来理解相机的成像过程,我们生活在三维世界中,相机所捕捉到的画面是2D的,3D空间中的点是如何投影到2D平面的过程是本笔记关注的。 预设场景 本笔记讨论的东西基于以下场景: 在一个房间内放了一台相机,…

入职阿里的秘密武器,阿里内部“Java学习笔记”,由浅入深,通俗易懂!

导言 提起阿里,行外人联想到的关键词无非是“交易”、“淘宝”、“支付宝”,但对于程序员来说,阿里庞大的技术体系才是最吸引人的。实际上阿里作为国内一线互联网公司的头把交椅,内部的技术体系和发展都是备受关注的,…

Network-UART VHDL设计及仿真实现

设计内容: 实现UART及实时系统完成收发UART操作的测试系统,要求如下: 本工程包括一个测试系统,UART. UART包括baud波特率模块、UART的transfer and receive模块等 1 Objective The objective of this project is to design and build a complete UART in VHDL. Upon comp…