JavaScript DOM一些总结

来源：互联网发布：网络拓扑图的网络设备编辑：程序博客网时间：2024/06/05 07:56

JavaScript是一种专为与网页交互而设计的脚本语言。主要由ECMAScript、DOM、BOM组成。

ECMAScript：由ECMA-262定义，提供核心语言功能；
文档对象模型（DOM）：提供访问和操作网页内容的方法和借口；
浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。

接下来介绍一下DOM

DOM定义

W3C对DOM（文档对象模型）的定义是：

一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。

DOM由来

W3C的出现是为了解决浏览器制造商之间的战争制定的新标准。简单的来说DOM是一种API，API就是一组得到有关各方共同认可的基本约定。在现实世界中，就像动物、植物都有都有他们的标准。W3C推出的标准化DOM，在独立性和使用范围等诸多方面，都远远超过了各自为战的浏览器制造商们推出的各自专有的DOM。

DOM和JS的关系

DOM属于浏览器，是用编程语言（如Java、Javascript）获取的对象，语言可以操作对象。

DOM模型

DOM中的M表示Model（模型），或者可以理解成Map（地图），都表示某种事物的表现形式。DOM把文档表示成了一颗家谱树。

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>01gallery</title>    </head>    <body>       <h2>Snapshots</h2>       <ul>        <li><a href="image/1.jpg" title="picture1">image1</a></li>        <li><a href="image/2.jpg" title="picture2">image2</a></li>       </ul>          </body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14

就可以表示成如下的家族树：

节点

节点是文档的集合，就是树上的树枝和树叶，一共分为三种：元素节点、文本节点、属性节点。

<a href="image/1.jpg" title="picture1">image1</a>1

上述代码的节点可表示成下图：
节点树

元素节点
标签的名字就是元素的名字。
文本节点
文本就是内容。文本节点总是包含在元素节点的内部。
属性节点
属性节点是用来对元素做出更加具体的描述。属性节点总是包含在元素节点中。

DOM常用的方法和属性

方法(完善中)
- getElementById
- getElementByTagName
- getElementByClassName
- getAttribute (object.getAttribute(attribute))
- setAttribute (object.setAttribute(attribute,value))

属性

chidNode

       格式 : element.childNode       作用 : 获取任何一个元素的所有子元素

nodeType

      格式：node.nodeType      作用：判断元素的种类                 nodeType==1 : 元素节点                 nodeType==2 : 属性节点                 nodeType==3 : 文本节点

nodeValue

       格式：node.nodeValue       作用：得到或设置一个节点的值                   node.nodeValue=txt;  //设置一个值

firstChild

       格式：node.firstChild       作用：得到node的第一个元素

lastChild
```
     同上
```

近期在看JavaScript DOM编程艺术（第二版），看到一半了，上述是对这一半的总结。个人理解DOM就是对一个文档进行抽象和概念化形成我们所能理解的家族谱模型，方便我们利用js来对文档进行操作，使抽象的东西变得具象。

阅读全文

0 0