DOM简介以及JS和DOM之间的关系?

DOM简介以及JS和DOM之间的关系?

从今天开始我们就开始DOM的学习,学习一门知识,首先要了解这门知识是什么?然后才可以进一步的进行学习.

什么是DOM?

• DOM就是文档对象模型（Document Object Model）是由W3C组织推荐的处理可扩展标记语言(xml)的标准编程接口

• DOM允许脚本(js)控制Web页面、窗口和文档。

• DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

这个时候可能有人会问XML和HTML的区别是什么?

• XML是可扩展标记语言，主要是通过自定义标签进行对数据保存处理

• HTML是超文本标记语言，是一些已经规定好的一套标签.

DOM的作用

• Web页面最终是按照HTML标准进行展示的。而DOM的提出就是提供一个与HTML标签交互的接口，供JavaScript 语言来使用，JavaScript可以通过DOM标准规定的各类属性、方法、事件来访问、创建HTML标签。

说起DOM,我们来看看DOM树长什么样

看过DOM树以后,我们再来看看DOM的基本功能:

1. 查询某个元素
2. 查询某个元素的祖先,兄弟以及后代元素
3. 获取,修改元素属性
4. 获取,修改元素的内容
5. 创建,插入和删除元素

按照不同的类型来分，DOM有不同的节点：文档节点、元素节点、属性节点、文本节点、注释节点等等,如下图:

总的来说

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

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

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

那么我们之前学的JS 和DOM有什么联系吗？

• 我们都知道js是代码，html是一种标记语言

• 我们想要做成动态页面，肯定要用到js了，管你是vue还是ng还是什么的。

DOM的妙处在于：它能够在所有浏览器上提供一种一致的方式，通过代码访问HTML的结构和内容。

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

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

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

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

总的来说:

• DOM就是一张映射表啦，记录着一堆用代码操控document时的规章制度，直白点说，就是js操作html时的API
• W3C已经定义好了一系列的DOM接口,我们目前主要通过DOM接口进行改变网页内容,结构和样式.

原文链接:DOM是什么？有什么用处？js与DOM啥关系？