什么是DOM

什么是DOM?


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

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

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

DOMJavaScript

人们在习惯上不爱说DOM,要么就说 JavaScript,要么就扯到“Ajax”(一度火爆的概念,我们用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方法,弹出一个提示框,显示传递给该方法的参数(字符串)。


"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");
又一个字符串连接。在字符串的末尾加入一个回车符。

}
“for
循环结束

你可能感兴趣的:(JavaScript,编程,框架,Ajax,脚本)