目录
DOM和JavaScript
主要的接口有:
首页 web前端 js教程 DOM文档对象模型的简单介绍

DOM文档对象模型的简单介绍

Aug 05, 2022 pm 02:15 PM
dom

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于DOM文档模型的相关问题,DOM被W3C组织设计为一种平台无关、语言无关的API,程序或脚本通过其动态访问、修改文档的内容、样式、结构,下面一起来看一下,希望对大家有帮助。

DOM文档对象模型的简单介绍

【相关推荐:javascript视频教程web前端

  • D:document 文档 浏览器加载的页面

  • O:object 对象 页面及页面中的任何元素都是对象

  • M:module 模型 页面中的元素的组织形式

DOM被W3C组织设计为一种平台无关、语言无关的API,程序或脚本通过其动态访问、修改文档的内容、样式、结构。

DOM是web 浏览器的运行规范,javascript借助DOM成就了其web标准语言的地位,在web领域实现了所谓“一次编写到处运行”的目标。

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。

脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素(一个HTML标签)都对应着一个对象(object,所谓“对象”,用白话说就是“东西”。object这个词在台湾通常翻译成“物件”)。网页上的标签是一层层嵌套的,最外面的一层是,文档对象模型也这样一层层嵌套着,但是通常被理解成一棵树的形状。树根是window或document对象,相当于最外层的标签的外围,也就是整个文档。树根之下(这棵树的图通常是倒着画,就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先)是子一级的对象,子对象也有它自己的子对象,除了根对象以外,所有的对象都有自己的父对象,同一对象的子对象之间就是兄弟的关系。

在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中,每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构,树结构中的每一个元素都被视为一个节点(node)。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。

万维网协会(World Wide Web Consortium,W3C)已经给文档对象模型制定了一系列标准,并且正在制定更多的相关标准。当代的浏览器除支持其中的一部分标准之外,还支持某些早在W3C标准制定以前就流行了的历史既成的编程接口。也就是说现在浏览器使用的技术历史由来纷繁复杂,有些人们普遍使用的DOM技术并无标准可依。

我们将深入所有通用DOM的细节(包括IE浏览器中“与众不同”的某些技术),以全面掌握面向实践的技术。

DOM和JavaScript

人们在习惯上不爱说DOM,要么就说JavaScript,要么就扯到“Ajax”(一度火爆的“概念”,最近刚刚有所降温,一如上世纪末的“DHTML”那样。对于这些热点词汇的产生,我个人感到非常欣慰,因为每一次都带来人们对JavaScript技术的热捧。下一个热点词汇是什么?也许我们可以炮制一个也说不定……Pseudo-Mashup,如何?)。

我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,所以如果你下载一个JavaScript语言的参考帮助文档来查的话,就连妇孺皆知的document.write方法也找不到。

主要的接口有:

Node接口:它是文档中节点的基类型。定义了基本的访问和改变文档结构的方法。

Document接口:它代表整个文档。可创建文档中的各种节点(元素、注释、处理指令等),创建的节点中带有一个OwnerDoculnent属性表示创建它们的Document对象。

DocumentFragment接口:它代表文档树的子树,相当一个小型文档。

Attr接口:它代表元素节点的属性。有意思的是它并不认为是该元素节点的子节点,不构成DOM树的一部分。同时也不是DocumentFragment节点的直接子节点。

CharacterData接口:它维护了DOMsitrgn字符串并提供读写操作的接口。但不直接对应文档的某种类型节点。

Text接口:它从CharacterData继承而来。代表元素或属性的一段连续的文本内容。它有一个派生的接口CDATAsection,目的是:CDATASeciton节点的内容将不会作任何转化;使用Node中的nomraliez方法时相邻的Text节点会合并成一个节点,但使用CDATASeciton可避免合并。

Comment接口:它也从CharacterData继承而来。代表注释中的文本内容。

NodeList接口:用于管理有序的节点集。

Entity接口:它代表实体;EntityReference代表实体的引用。

NamedNodeMap接口:用于管理无序的节点集。

DOMImplementation接口:它提供与DOM模型的实例无关的接口。CreateDocument可创建一个Document对象;haseFature可判断DOM实现是否支持某一模块。

Notation接口:它代表文档中的符号定义。

ProcessingInstruction接口:它代表处理指令。

DOMException接口:异常处理。由于程序中的逻辑错误、数据丢失或DOM实现本身不稳定引起的错误。在程序处理过程中,由方法返回一个错误值。接口之间的继承关系可参看图。

68.png

【相关推荐:javascript视频教程web前端

以上是DOM文档对象模型的简单介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1273
29
C# 教程
1252
24
vue dom是什么意思啊 vue dom是什么意思啊 Dec 20, 2022 pm 08:41 PM

dom是一种文档对象模型,同时也是用于html编程的接口,通过dom来操作页面中的元素。DOM是HTML文档的内存中对象表示,它提供了使用JavaScript与网页交互的方式。DOM是节点的层次结构(或树),其中document节点作为根。

vue3中ref绑定dom或组件失败的原因是什么及怎么解决 vue3中ref绑定dom或组件失败的原因是什么及怎么解决 May 12, 2023 pm 01:28 PM

vue3ref绑定dom或者组件失败原因分析场景描述在vue3中经常用到使用ref绑定组件或者dom元素的情况,很多时候,明明使用ref绑定了相关组件,但是经常ref绑定失败的情况。ref绑定失败情况举例ref绑定失败的绝大多数情况是,在ref和组件绑定的时候,该组件还未渲染,所以绑定失败。或者组件刚开始未渲染,ref未绑定,当组件开始渲染,ref也开始绑定,但是ref和组件并未绑定完成,这个时候使用组件相关的方法就会出现问题。ref绑定的组件使用了v-if,或者他的父组件使用了v-if导致页面

Vue3获取DOM节点的方式有哪些 Vue3获取DOM节点的方式有哪些 May 11, 2023 pm 04:55 PM

1.原生js获取DOM节点:document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2.vue2中获取当前组件的实例对象:因为每个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的引用。所以在默认情况下,组件的$refs指向一个空对象。可以先在组件上加上ref="名字",然后通过this.$refs.

dom和bom对象有哪些 dom和bom对象有哪些 Nov 13, 2023 am 10:52 AM

dom和bom对象有:1、“document”、“element”、“Node”、“Event”和“Window”等5种DOM对象;2、“window”、“navigator”、“location”、“history”和“screen”等5种BOM对象。

PHP中的DOM操作指南 PHP中的DOM操作指南 May 21, 2023 pm 04:01 PM

在网页开发中,DOM(DocumentObjectModel)是一个非常重要的概念。它可以让开发者轻松地对一个网页的HTML或XML文档进行修改和操作,比如添加、删除、修改元素等。而PHP中内置的DOM操作库也为开发者提供了丰富的功能,本文将介绍PHP中的DOM操作指南,希望可以帮助到大家。DOM的基本概念DOM是一个跨平台、独立于语言的API,它可以将

bom和dom有什么区别 bom和dom有什么区别 Nov 13, 2023 pm 03:23 PM

bom和dom在作用和功能、与JavaScript的关系、相互依赖性、不同浏览器的兼容性和安全性考虑等方面都有区别。详细介绍:1、作用和功能,BOM的主要作用是操作浏览器窗口,它提供了浏览器窗口的直接访问和控制,而DOM的主要作用则是将网页文档转换为一个对象树,允许开发者通过这个对象树来获取和修改网页的元素和内容;2、与JavaScript的关系等等。

dom内置对象有哪些 dom内置对象有哪些 Dec 19, 2023 pm 03:45 PM

dom 内置对象有:1、document;2、window;3、navigator;4、location;5、history;6、screen;7、document.documentElement;8、document.body;9、document.head;10、document .title;11、文档.cookie。

dom和bom实现了什么 dom和bom实现了什么 Nov 20, 2023 pm 02:28 PM

DOM实现了对网页内容的动态访问和更新,BOM则提供了与浏览器窗口进行交互的API,包括控制浏览器的行为、获取浏览器和用户环境的信息,DOM主要用于操作网页内容,而BOM则主要用于操作浏览器窗口和与浏览器交互,两者共同构成了Web前端开发中重要的基础,为开发者提供了丰富的方法来控制和操作网页及浏览器,实现交互性强、用户体验良好的Web应用程序。

See all articles