《JavaScript DOM编程艺术》学习回顾3

今天回顾一下第三章。学到了第三章的时候,感觉终于学到了重点的地方,这本书的第三章主要是对DOM的基本解释和一些常用的方法等。

文档对象模型DOM(Document Object Model).

1、文档:DOM中的“D”

DOM中的“D”是document(文档)的意思,如果网页中没有文档,DOM这个词也就没什么意义了。当你打开浏览器时,文档就出现了。对于浏览器打开的网页来说,我们就看成是一个文档。

2、对象:DOM中的“O”

DOM中的“O”是object(对象)的意思,在javascript中用的最多的就是对象,常用的有用户子自定义的对象,内置对象,宿主对象。通过DOM的方式获取到标签后,标签已经变成了对象,就有了属于自己的属性和方法,就可以动态添加删除修改属性,完成动态的交互效果。

3、模型:DOM中的“M”

DOM中的“M”是model(模型)的意思,在DOM的世界里,我们将整个HTML文档看成是一棵树。通过树这个模型,可以很方便的获取到当前元素的父亲和儿子。想获取到那个就获取到那个。比如所html有两个孩子,即head和body,而head下又有title,script,style,meta,link等孩子,body下又有许多孩子,每个孩子下还有孩子。就像是我们人类的家族谱一样。

4、节点(node)

一份html文档是由标签和内容组成的。我们可以将所有组成html文档的部分全都看是一个节点,比如说属性节点,元素节点,文本节点。。。节点这个词是个网络的术语,它表示网络中的一个连接点。一个网络就是由一些节点构成的好、集合。Html文档就是由节点构成的集合,有些是树叶,有些是树枝而已。

1)元素节点

DOM中使用的最多的就是元素节点(Element Node),html文档的标签的名字就是元素节点,有些元素还可以包含其他的元素,那么被包含的子元素就是该元素的子节点。在整个文档中html元素是整个文档的根节点。

2)文本节点

在DOM中,可以将html标记中的文本内容看成是一种文本节点(Text Node)。通过发现可以知道文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含文本。

3)属性节点

在html文档中,每个元素几乎都有属性,通过属性可以对元素做出更具体的描述。我们称标签里的属性为属性节点(Attribute Node)。所有的属性都被包含在元素节点中。

5、CSS

学过网页设计的人都知道CSS的概念,即层叠样式表,主要用来对文档进行外表的显示,通过CSS的设置可以进行很多美观的效果。在CSS中最重要的就是id,class的概念,通过对元素进行添加id、class属性可以随时改变元素的样式。设置这些属性对于JavaScript来获取元素也是很重要。

6、获取元素

在JavaScript中获取元素有三种常用的方式,而这本书也让我知道了还有一些其他的方式获取元素。

1)getElementById()方法

DOM提供了一个名为getElementById的方法,通过这个方法可以根据要获取元素的ID的属性值来得到元素,得到的这个元素是一个DOM的对象,有了一些属于自身的属性和方法。

2)getElementsByTagName()方法

DOM提供了这个方法来根据元素的标签名获取元素,由于存在多个标签名相同的情况,所以获取到的返回的是一个数组,比如我们获取li标签,a标签的时候就可以用到这个方法。我认为DOM提供的这些方法都挺人性化的,我们完全可以通过字面的意思猜测出该方法是什么意思。

3)getElementsByClassName()方法

这个方法是这本书中特意提到的方法,看了书后,也记住了这个方法,根据方法名我们可以猜测出这是根据class属性来获取元素的,书上说这是新增的方法,但是这个方法比较新,我们现在很少看到它的使用,它获取到的也是有一二个数组。

通过在书上看以上的知识点后,我更是深深的记住了这些知识。

7、获取或设置属性

 要是设置或是获取元素的属性,是一件简单的事,只要获取到元素的DOM对象后,调用想要设置或获取的元素的属性就行,比如获取到a对象之后,可以直接使用a(获取的DOM对象).href这样就可以得到元素的href的属性值,如果设置直接复制就行。

但是有时会出现一些问题,如果使用标准的方法应该用setAttribute()方法和getAttribute()方法,它们都是DOM的标准方法。getAttribute()方法只接收一个参数,即要获取的元素的属性名,setAttribute()方法接收两个参数,第一个参数是要设置的元素的属性,第二个是元素的属性值,比如要给a设置href为“www.sohu.com”,可以写:a(DOM对象a).setAttribute("href","www.sohu.com"),这样的方式来给a元素设置链接值,获取也是一样:a.getAttribute("href"),

我还是常用的那种直接设置的方法,如果出现了什么问题,或是想给文档写的标准点,才会用标准方法。

第三章的学习笔记到这里就结束了,过几天在写第四章的吧!

 

 

 

posted on 2012-05-16 18:14  springside5  阅读(151)  评论(0编辑  收藏  举报