什么是DOM，DOM的作用，以及DOM与JavaScript的关系

最新推荐文章于 2023-09-05 09:26:32 发布
最新推荐文章于 2023-09-05 09:26:32 发布
阅读量1.5w 收藏 93
点赞数 62
分类专栏： web前端 文章标签： DOM JavaScript web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yarn_/article/details/58607683
版权

        一个想学web前端的初学者，如果在知乎中搜索推荐书目的话，得到的答案多数都是：首先，学习htlm+css；第二点就是阅读《JavaScript DOM 编程艺术》这本书。

        作为一个初学的小白，JavaScript大概知道是个什么东西，但是DOM是什么？？

        在该书的前沿部分写道：本书的真正目的是让大家理解DOM脚本编程技术背后的思路和原则。然而在看了将近2/5的书之后，对于DOM这个概念还是模棱两可(小渣渣不懂事，勿喷...)，对于DOM和JavaScript之间的关系也是非常糊涂，于是整理书上对于两者的解释并根据网上查阅到的资料，理一理到底什么是DOM，它和JavaScript又有什么关系。


目录

1.什么是DOM？

2.DOM有什么用？

3.DOM和JavaScript的关系.


1.什么是DOM？

  • DOM是一套对文档的内容进行抽象和概念化的方法。       ——《JavaScript DOM 编程方法》
  • 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。  ——百度百科
  • 文档对象模型 (DOM) 是HTML和XML文档的编程接口。     —— MDN
由此可见，DOM是一个接口，一个API，而这个API是经过标准化的。说到标准化，就要说一说DOM的历史了。
Netscape Navigator 4和IE 分别于1997年先后发布了经过改进，大幅扩展的DOM，使JavaScript能够完成的功能大大增加，这本是前端程序员的福音，但是这两个版本的DOM却有个致命的缺点，不兼容！换句话说，虽然浏览器制造商的目标一样，但他们在解决DOM问题时采用的办法完全不同。因此很多时候，程序员在编写DOM脚本代码时不得不编写两次，一次为Netscape Nacvigator,另一次为IE。于是人们越来越少的使用它。
就在浏览器制造商以DOM为武器展开营销大战是，W3C(万维网联盟World Wide Web Consortium)不事声张地结合大家的优点推出了一个标准化的DOM，令人欣慰的是，Netscape、微软和其他一些浏览器制造商们还能抛开彼此的敌意而与W3C携手制定新的标准，并于1998年10月完成了"第一级DOM（DOM Level 1）"。现已发展至3级DOM。
作为DOM的统一者W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态的访问和修改文档（html或xml文档）的内容、结构和样式。”
其实讲了半天，就是一句话，DOM是一个接口，我们可以通过DOM这个接口来对文档（即HTML或XML）进行修改。
那么DOM能完成怎样的修改，达到什么样的效果呢？这就是接下来要讲的，DOM的作用。

2.DOM有什么用？

DOM把一份文档（以HTML为例）表示为一棵树。如下图所示：

                                                    （图片来源于网络）

在DOM中，文档是由节点构成的集合，而节点又分为不同的类型。元素(element)节点，文本(text)节点，属性(attribute)节点。

  • 元素节点：如上图中的<html>,<head>,<body>,<title>等，即html中的标签。其中<html>是<head>的父节点，<title>是<head>的子节点，<body>是<head>的兄弟节点。
  • 文本节点：如上图中的"My title"、"My link"等。
  • 属性节点：如上图中的"href"，以及我们在html中经常使用的"class"、"title"等。

       DOM就是为了操作HTML中的元素，如：

<p id="purchases" title="">food<p>

var shopping = document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");

       其中，getElementById()，是DOM中的一个方法，可用于查找文档中的一个特定的元素，即id=purchases的元素，在此例中将id=purchases的元素p赋值给shopping。setAttribute()方法，用于对属性节点的值做出修改，此处将元素p中title属性的值设置为"a list of goods"。

       当然DOM中还提供了许多其他的方法，使我们对文档的内容、结构和样式进行修改，此处不再列举。


3.DOM和JavaScript的关系

      

       我们都知道JavaScript是一种编程语言，而.js文件是用JavaScript编写的代码，那么DOM在其中担任什么样的角色呢？

       DOM不是一种编程语言，但如果如果没有DOM，JavaScript语言不会有任何网页。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

       下面用一段代码更直观地显示JavaScript和DOM的区别，代码中被标为红色的部分就是DOM：

var Tags = document.getElementsByTagName("a");
        for(var i = 0; i < Tags.length; i++)
        {
             alert("Href of this a element is :" + Tags[i].href + "\n");
        }

        这样一来，哪些是核心JavaScript，哪些是DOM，各自起什么作用就可以一目了然。（此处不在对代码进行解释）。

        因此有这样一个近似的等式：

        web或XML页面 = DOM +JS(脚本语言)


       以上，就是全部内容。

                                                                       分割线就是我，我就是分割线                                                                             

      

       接下来就是笔者的瞎逼逼了......

       作为一个web前端的初学者，若上文有任何错误请大家多多指正。

       第一次写blog表示很激动...发现写博客还是很好玩的哈哈哈哈哈哈，简直写到废寝忘食...

       所以我要去吃饭了哈哈哈哈哈哈


         （围观群众表示对笔者很无语...）



Yarn_
关注
  • 62
    点赞
  • 踩
  • 93
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
Javascript之BOM与DOM讲解
02-09
配套博客:https://liuyandeng.blog.csdn.net/article/details/51395830
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
11-26
区别： javascript JavaScript 是因特网上最流行的浏览器脚本语言。很容易使用！你一定会喜欢它的！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。 HTML DOM HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。 HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。 通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修
DOM介绍
weixin_45116146的博客
09-23 2459
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。 DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。 DOM可以理解成网页的编程接口。 1.节点 DOM最小的单位叫做节点。文档的树形结构（DOM树），就是各种不同类型的节点组成的。 节点类型有七种：Document、DocumentTyp..
什么是 DOM
m0_50693593的博客
11-22 1153
文章目录什么是 DOM什么是 HTML DOM？HTML——DOM节点DOM 节点HTML DOM 节点树HTML DOM Tree 实例节点父、子和同胞HTML节点演示片段：HTML DOM 方法编程接口HTML DOM 对象 - 方法和属性现实生活中的对象一些 DOM 对象方法 什么是 DOM DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样
Javascript——DOM编程
Switch的博客
12-27 1万+
Javascript——DOM编程 基本概述     文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以
DOM编程
L1194774003的博客
02-09 649
DOM模型概述 DOM是文档对象模型（Document Object Model）的简称，接住DOM模型、可以将结构化文档转换成DOM树，程序可以访问、修改书里的节点，也可以新增、删除树里的节点，陈哥需操作这颗DOM树时，结构化文档也会随之动态改变，所以，掌握了DOM编程模型后，就拥有了使用JavaScript脚本动态修改HTML的能力 DOM模型中HTML元素之间的继承关系 DOM为常用的HTM...
HTML中的 DOM 是什么？有什么作用？
qq_40662239的博客
04-22 1901
DOM: Document Object Model : 管理我们的文档 增删改查规则 HTML中的dom方法中的增删查改类似于Java和C中的增删查改； 一些常用的 HTML DOM 方法： getElementById(id) - 获取带有指定 id 的节点（元素） appendChild(node) - 插入新的子节点（元素） removeChild(node) -...
♥️Javascript之DOM♥️
欢迎
09-10 1990
目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM T...
什么是DOM，它的作用是什么？
weixin_30822451的博客
10-15 1152
什么是DOM，它的作用是什么？ DOM全称Document Object Model文章对象模型 作用：使JS有访问HTML的能力，能够实现对HTML中内容的操作 转载于:https://www.cnblogs.com/phpisfirst/p/9794229.html...
DOM是什么？有什么用处？js与DOM啥关系？
热门推荐
echo_s 快乐de小媛~
09-29 7万+
DOM简介大家都想知道dom是什么，翻了各种文档，找了各种资料，看完还是云里雾里的，想表达吧，又说不上来，如果，您是大神，请绕道，又或者看完我的文章，有不足之处，欢迎提出，本人会积极改正。本来就是互相学习的过程嘛…嘿嘿**在各种网站上都能找到的信息，这里就不一一说了，直奔主题。 （基本信息：[dom介绍(http://www.w3school.com.cn/htmldom/dom_intro.as
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
第七章 DOM 编程
myid00451612的博客
01-13 915
第一节：DOM编程概述 1.1 什么是DOM编程 ​ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。 1.2 为什么要学习DOM编程 学习DOM操作 就是 操作页面中的节点对象（元素，文本，元素中的属性）。 增删改 新增：新增什么？ 各种标签 本来不存在，但是我们又想用， 无中生有！ 创造标签 此时没有样式 创建 美化（设置样式，添加内容）.
JavaScript之BOM和DOM概念介绍
python全栈
01-21 669
一、BOM BOM是Browser Object Model的简写，即浏览器对象模型。 将浏览器抽象成一个对象——》window 同时封装了一些属性和方法 有了BOM之后，就可以控制浏览器的行为。 BOM的顶层是window对象 二、DOM DOM是Document Object Model的简写，即文档对象模型。 DOM用于XHTML、XML文档的应用程序接口(API)。 将浏览器当前打开的文件抽象成对象——document 将文档解析成一个document对象，属性结构的对象 通过该对象可以达到修改页
[学习笔记]JavaScript之DOM基础
Jacob专栏
01-18 2074
DOM概述 DOM定义 DOM（文档对象模型，Document Object Model）是W3C组织开发的一套便于操作XML和HTML的JavaScript方法，其将XML和HTML抽象成文档对象（Document），并将其中所有的标签和内容都抽象成对象（节点），利用面向对象的思对XML和HTML的操作。其中 Document 对象是DOM的顶层节点。 XML（扩展标记语言，Exten
浅谈DOM的概念和作用
dongdihui9603的博客
08-27 736
首先呢，DOM在JS中就是 Document Object Model的缩写，简称就是文档对象类型，它给文档提供了一种结构化的表示方式，可以改变文档的内容和呈现方式。不过我们要关心的是DOM如何把网页和脚本以及其他的编程语言联系起来。DOM是以家族的形式描述HTML。父子节点，兄弟节点。 DOM中的选择器： 一、元素节点选择器：（id,class,name,tagname,高级,关系...
DOM 简介 | 深入了解DOM
最新发布
青春木鱼的博客
09-05 1985
W3C DOM由以下三部分组成：核心DOM - 针对任何结构化文档的标准模型。XML DOM - 针对XML文档的标准模型。HTML DOM - 针对HTML文档的标准模型。DOM是一种提供对文档访问或修改方法的模型，它的范围很广，但对于 web 开发者来说，往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术，但实际上范围远不局限在这里。
DOM是什么意思-前端入门
web前端入门基础进阶教程-htmlcssjs
06-28 1万+
DOM就是文件对象模型，通过JavaScript代码对页面进行重构从而增强与页面的交互性 本篇文章将要分享的是有关DOM的含义介绍，具有一定参考价值，希望对大家有所帮助。 DOM的含义： DOM称为文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM是HTML文档的内存中对象表示，它提供了使用JavaScript与网页交互的方式。DOM是节点的层次结构（或树），其中document节点作为根。 实际上DOM是以面向对象的方式来描述
Dom详细讲解
qq_51986661的博客
11-25 6382
文档对象模型，英文全称为Document Object Model，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。D：Document，文档，表示的整个Html的网页文档O：Object, 对象，将网页的每一部分（标签）转换为每一个对象M：Model，模型，使用模型来表示对象之间的关系，方便我们获取。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来，让脚本来操作页面，使
什么是DOM和BOM？
似水流年QC的博客
06-01 1万+
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值