一、DOM是什么，有什么用？

文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言祥大拆的标准编程接口。DocumentObjectModel的历史可仿盯以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

什么是 DOM？

DOM是W3C（万维网联盟）的标准。

DOM定义了访问HTML和XML文档的标准：

W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3CDOM标准被分为3个不谨枣同的部分：

编者注：DOM是DocumentObjectModel（文档对象模型）的缩写。

二、HTML DOM是什么意思？

HTML DOM是HTML Document Object Model

HTML DOM则是专门适用与 HTML最佳化

HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可亮启搏以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态的修改网页。敬祥旁孙

这个网址讲的很详细

HTML DOM则是专门适用与HTML最佳化。

1.HTML/XHTML的文档对象模型，熟悉软件开发的人员可以将HTML DOM理解为网页的API，它将网页中的各个元素都看作一个个对象。

2.从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态的修改网页。

3.一个HTML文件是以洞指树形结构加载到内存的，开发人员可以以一种独立于平台好颤竖和语言的方友大式访问和修改一个文档的内容和结构，即通过dom来炒作。

4.W3C 文档对象模型DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

5.TML的英文全称为Hyper Text Markup Language，即超文本标记语言，HTML5是HTML的一个新版本，HTML 不是一种编程语言，而是一种标记语言。

百哗拦度百科解释的很清楚核乱哈：

网页乱氏胡链接

三、JS中DOM如何操作

DOM即 Document Object Model 是 W3C (万维网联盟)的标准，DOM定义访问 HTML 和 XML 的标准 : W3C文档对象模型(DOM)是中立于平台和语言的接口, 它允许程序 和脚本 动态的访问和更新文档的内容,结构和样式。

W3C Dom 标准被分为 3 个不同的部分: 1.核心DOM -针对任何结构化文档的标准模型 2.XML DOM -针对XML文档的标准模型 3.HTML DOM - 针对HTML文档的标准模型

其中在HTML DOM 中 ,所有事物都是节点 , DOM 是被视为节点数的HTML.1.整个文档是一个文档节点 2.每个HTML元素是元素节点 3.HTML元素内的文本是文本节点 4.每个HTML属性是属性节点 5.注释是注释节点

HTML DOM将HTML文档视作树结构 , 这种结构被称之为节点树, 通过HTML DOM,树中的所有节点均可通过 JavaScript 进行访问 , 所有HTML节点(元素)均可被修改,也可以创建或删除节点.

一些常用的HTML DOM 方法:1.getElementById(id)-获取带有指定id的节点(元素) 2.appendChid(node)-插入新的子节点(元素) 3.removeChild(node)-删除子节点(元素)

一些常用的HTML DOM属性: 1.innerHTML-节点(元素)的文本值 2.parentNode-节点(元素)的父节点 3.childNodes-节点(元素)的猜枣子节点 4..attributes-节点(元素)的属性节点

DOM操作

创建元素

var newp = document.createElement(p);设置类名 newp.className = item;设置ID

newp.id = first;设置背景色 newp.style.background = red;添加 元素box 进body中

先获取要添加的元素

var body = document.getElementsByTagName(body)[0];var box = document.getElementsByClassName(box)[0];body.appendChild(newp);//body中现有两郑唯个内容 , 一个是newp 一个穗丛拆是box//现在的情况是把newp的内容插到box后面

要想把p中的内容插入到box的前面 则如下: body.insertBefore(newp , box);删除元素 body.removeChild(box);//删除box标签 box.remove();DOM属性

节点 : 标签 文本 注释 声明(doctype)

可以通过如下方法获取元素下单所有节点: console.log(box.childNodes); 获取标签类型的子节点 , 得到的节点是一个标签 console.log(box.cheildren[0]);尺寸 位置 console.log(newp.offsetWidth);//打印宽度 包含边框 console.log(newp.clientWidth);//不含边框也不含滚动条(可视区域) console.log(newp.scrollHeight);//也是元素垂直 / 水平滚动了的距离, 或者是元素卷帘卷走的视觉看不到的部分overflow 处理超出部分 visible默认可见overflow:scroll; //出现滚动条位置 相对于定位父级的一个位置 console.log(newp.offsetTop); console.log(newp.offsetLeft);子元素滚动上去的一段距离, 除了scrollTop外,以上元素都是只读 console.log(newp.scrollTop)

定时器

一次性定时器 , 只能使用一次

写法1: var time = setTimeout(function(){ console.log(一次性定时器); },1000);写法2: function f1(){ console.log(一次性定时器); } setTimeout(f1,1000);清除一次性定时器 clearTimeout(time);循环计时器, 每隔一段时间,就会执行一次函数

写法1: var timer = setInterval(funtion(){ console.log(循环计时器); })var timer = setInterval(f2 , 1000);清除循环定时器 clearInterval(timer);DOM是HTML文档结构 其实就是为了能JS操作html元素而制定的一个规范, dom的根本就是document对象,该对象有很多属性和放法 例如 创建节点 复制节点 移除节点 修改属性等 DOM对象的出现是为了方便javascript 操作HTML标签而已 , DOM全面为Document Object Model (文档对象模型), 也是基于HTML 文档出来的 , 提供给Javascript用来动态(比如点击事件)修改文档的状态, 所以操作DOM就是在操作HTML文档对象(每一个标签)

CSS就是将HTML文档样式而已,而javascript能把HTML和CSS相结合 , 也就是以前所说的DHTML(动态HTML)

DOM就是将XML (或者HTML)内的节点定义成基本统一的对象数据可以提供程序语言 (如 javascript) 控制的技术规范

可以使用javascript语言来操作DOM以改变网页,为了改变网页,你必须告诉Javascript操作哪一个节点,这就是操作DOM

操作DOM可以让你更改网页的交互方式.所有网页的交互都依赖这种DOM技术,即使不用Javascript,也可以使用其他语言来操作DOM

DOM是一棵树,数值和树叶都做了编号 , 你告诉一个脚本 一个函数去寻找那一个枝干的哪一个叶子,对这个这个叶子要做什么改变

当你在知乎的搜索栏输入数据时,Javascript 捕获到了你的输入 ,对服务器使用异步查询 , 动态显示搜索结果.

当你向下滑动时 , Javascript 捕获到了你滑动的距离,根据距离的大小来判断是否改变, DOM, 进而让顶部的导航栏跟随浏览器窗口滚动,免得你回头去找.

当你点击修改按钮时, javascript , 捕获到了这个按钮的鼠标点击事件,反馈了一个可编辑的答案给你

Javascript 不能够真正改变DOM 他仅仅是改变呈现的内容,当你刷新的时候就会发现呈现的内容消失了.

但是你可以把这些改变用请求的方式传递给后端语言接口 , 由后端语言 PHP Python Java Node 等 来进行后续的操作 , 他们接到你的请求之后就去修改服务器数据,这样改变就生效了刷新后不会消失 了

但是用户的交互 比如弹窗 滑过变色等等根本没必要让服务器也跟着搀和 原因是 交互只是暂时的 用完了还要变成默认的 不需要保存到服务器 只要保证交互的时候有反馈就可以了.

HTML 表达静态结构 (网页的基本元素 每个元素的基本功能 元素的基本功能可以产生什么意义,这个意义能产生什么样的内容)

CSS 呈现层次美化 (元素的基本及特殊属性 元素的形状,状态,元素的布局)

Javascript 负责动态交互(操作 DOM使用 AJAX 进行异步刷新 , 与服务器交互) 该链接介绍的还不算错. 是Javascript操作网页的接口 , 全称叫 文档对象模型 (Document Object Model) 他的作用是将网页转化为一个javascript对象, 从而用Javascript脚本进行各种操作(比如增删元素等)

浏览器会根据DOM模型, 将结构文档化 (比如 HTML 或者 XML等 ) 解析成一系列的节点, 再由这些节点解析成树状结构(Dom Tree), 所有的节点和最终的树状结构都有规范的对外接口 , 所以DOM可以理解成网页的编程接口. DOM有标准的国际标准, 我们目前使用的是DOM3

严格的来说 DOM 不属于 Javascript 但是DOM操作是Javascript最常见的任务 而Javascript 最常见的任务 最常见的DOM操作语言.