JavaScript和HTML DOM的区别与联系

javascriptphp

JavaScript 是因特网上最流行的浏览器脚本语言。很容易使用！你必定会喜欢它的！html

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、建立cookies，以及更多的应用。java

HTML DOMnode

HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。编程

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

经过 DOM，能够访问全部的 HTML 元素，连同它们所包含的文本和属性。能够对其中的内容进行修改和删除，同时也能够建立新的元素。浏览器

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

联系：cookie

经过 JavaScript，您能够重构整个 HTML 文档。您能够添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就须要得到对 HTML 文档中全部元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是经过文档对象模型来得到的（DOM）。
Javascript主要是利用HTML DOM去得到、改变、建立HTML元素，从而达到美化页面、操做页面元素的目标。所以，在Javascript中最多见的就是各类各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外，Javascript有本身的对象，例如数组。

简单说，能够认为Javascript主要是操纵HTML DOM。二者是不同的。
Javascript是语言，DOM是能够在各类语言中（不只js，php也有的）动态修改文档的模型。

下面单独拉出JavaScript与DOM的关系给你们详解

JavaScript与浏览器的工做

1.浏览器获取并加载你的页面，从上至下解析它的内容。

　遇到JavaScript时，浏览器会解析代码，检查它的正确性，而后执行代码。

　浏览器还会创建一个HTML页面的内部模型（DOM）。

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

JavaScript如何与页面交互？

JavaScript是代码，HTML是标记，彻底不一样的东西

怎么让它们交互呢？

答案是使用文档对象模型（Docunment Object Model，简称DOM）。

DOM的妙处在于：它可以在全部浏览器上提供一种一致的方式，经过代码访问HTML的结构和内容。

　　一、在浏览器加载一个页面时，浏览器会解析HTML，并建立文档的一个内部模型，其中包含HTML标记的全部元素。

　　二、JavaScript能够与DOM交互（JavaScript使用DOM建立或删除元素等等）

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

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

自制DOM

材料：格式正确的HTML5页面，WEB浏览器

作法：

　一、在最上面建立一个document节点

　二、取HTML页面的最顶层元素，在这里就是<HTML>元素，把它做为document的子节点加到DOM中

　三、对于当前元素中嵌套的每个元素，将该元素做为当前元素的子节点增长到DOM

　四、对于刚增长的元素，执行第三步，重复工做，直处处理完全部元素

HTML页面以下　　

 
          <!DOCTYPE html>  
         
          <html lang= 
          "helloworld" 
          >  
         
          <head>  
         
          <title>DOM</title>  
         
          <meta cherset= 
          "utf-" 
          >  
         
          <script src= 
          "dom.js"  
          ></script>  
         
          </head>  
         
          <body>  
         
          <h1>My Dom</h1>  
         
          <div id= 
          "entry" 
          >  
         
          <h1>hello</h1>  
         
          <p>  
         
          Today, I am making a dom!!!  
         
          </p>  
         
          </div>  
         
          </body>  
         
          </html>

获得的DOM以下图

____________________________________________________________________________________________________________________

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

下面是来自w3c的解释：

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

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

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

W3C DOM 标准被分为 3 个不一样的部分：

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

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

什么是 XML DOM？

XML DOM 定义了全部 XML 元素的对象和属性，以及访问它们的方法。

什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了全部 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

下面说的dom实际上指的是html dom。

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

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

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

咱们将深刻全部通用DOM的细节（包括IE浏览器中“不同凡响”的某些技术），以全面掌握面向实践的技术。

DOM和JavaScript

咱们用JavaScript对网页进行的全部操做都是经过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，因此若是你下载一个JavaScript语言的参考帮助文档来查的话，就连妇孺皆知的document.write方法也找不到。

下面这段代码的做用是用一个提示框逐个显示网页中全部连接的网址，代码中被标为红色的部分就是DOM。
var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
alert("Href of this a element is : " + anchorTags[i].href + "/n");
}

这样一来哪些是核心JavaScript，哪些是DOM，各自起什么做用，就能够一目了然了。

var anchorTags =
建立了一个名为 anchorTags 的 JavaScript 变量。

document.getElementsByTagName("a")
Document接口是 DOM1核心（DOM1 Core）规范中定义的第一个接口，而 document 是实现了Document接口的一个宿主对象。document掌控着网页里的全部东西。
DOM1核心为Document 接口定义了 getElementsByTagName() 方法。这个方法返回一个节点列表（NodeList），也就是一种DOM特有的包含节点的数组，包含了全部符合匹配参数条件的标签，按照在文档中出现的顺序排列。因而anchorTags变量如今就成了一个节点列表。

;
分号是JavaScript里的语句结束符号。

for (var i = 0; i <
这是编程语言里典型的“for循环”。声明了循环变量i，逐个处理anchorTags节点列表里的每个节点。这也是JavaScript的东西。

anchorTags.length
DOM1 核心定义了NodeList接口的 length 属性。这个属性返回一个整数，就是节点列表里包含的节点数目。提及来JavaScript 的数组也有一个 length属性。

; i++) {
典型的JavaScript变量增1运算。

alert(
alert() 是一个DOM方法，弹出一个提示框，显示传递给该方法的参数（字符串）。话说这个东西是通称 0级DOM（DOM level 0）或DOM0的一些历史既成的编程接口当中的一员。DOM0 是一套“被某些浏览器所支持”的编程接口（事实上，市场上不存在不支持DOM0的浏览器，只有在某些软件爱好者的收藏品中才能见获得），不属于任何DOM标准规范。

"Href of this a element is : " +
一个字符串字面量和一个字符串连接符。JavaScript的东西。

anchorTags[i].href
href 是 DOM1 HTML 规范中定义的 HTMLAnchorElement 接口的属性，返回连接（<a>）元素的href属性的值。

在此咱们用了像anchorTags[i]这样的用法，这和JavaScript里访问第i个数组项的语法是同样的。语言中性（language-neutral，与具体语言无关）的所谓“DOM方式”访问某个节点列表中的一个项目的办法是使用在NodeList接口中定义的item() 方法：anchorTags.item(1).href。可是大多数JavaScript实现程序都容许你使用这种简单的相似于数组的语法，而这也是大多数人实际在用的方式。

+ "/n");
又一个字符串链接。在字符串的末尾加入一个回车符。

}