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把文档表示成了一颗家谱树。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
就可以表示成如下的家族树:
节点
节点是文档的集合,就是树上的树枝和树叶,一共分为三种:元素节点、文本节点、属性节点。
- 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来对文档进行操作,使抽象的东西变得具象。