读完一本书一定要将收获进行整理沉淀,不然相当于白读。《JavaScript DOM编程艺术》的确是一本JavaScript好的入门书,简短精炼,现在就用一篇文章对本书中的一些知识要点进行总结。
首先要明白的一件事就是什么是DOM。DOM即文档对象模型(Document Object Model),document指的就是网页文档,而Object,在JavaScript中共有三种对象,分别是用户定义对象、内建对象(Array、Date和Math等)以及宿主对象(由浏览器提供的对象)。而Model指的是将网页文档可以理解为一种节点树的呈现方式,整个网页在<html>标签之下,不断通过节点进行分支延伸,而节点在类似于构成物体的原子,而最常见的节点有三种:
- 元素节点;
- 文本节点;
- 属性节点。
在每一层的节点上分别用不同的标签进行表示,当然这些标签元素我们又分为行内元素(<a><span><b><e>等)和块级元素(<div><p><li>等)以及不可见元素(<script>等)。而我们对这些元素的操作就通过对节点的操作来完成,而进行操作的时候,我们必定要先获取元素,而在DOM中获取元素的方法有如下三种:
- document.getElementById(),即通过id来获取元素,例如document.getElementById('wrap'); 则获取到的是id为wrap的元素;
- document.getElementsByTagName(),即通过标签名来获取元素,例如 document.getElementsByTagName('div'); 则获取到的是所有的div的元素;
- document.getElementsByClassName(),这个方法是在HTML5中才进行实践的,所以尚且在普及率不高,但是这个方法真正是极为方法的,我们期待它大展拳脚的一天。
这样,我们便可以获取到我们需要的元素,接下来我们便可以对它们的相关属性进行设置了,而这也不是一蹴而就的,我们需要先获取到元素的属性,这个时候会用到getAttribute()方法,此方法不属于document对象方法,我们只能通过元素节点对其进行调用,其语法形式如下:
object.getAttribute(attribute);
举个例子,我们如果要获取一个超链接的链接地址,则可以这样操作: document.getElementsByTagName('a').getAttribute('href'); 这样就OK了~这样,获取到这个超链接的属性之后,我们发现这个链接是空的,我们想将它链接到百度去,则可以通过setAttribute()方法来设置属性,其也是只能用于元素节点,语法形式如下:
object.setAttribute(attribute,value);
对于上面的问题可以如下解决:
1 var a1 = document.getElementsByTagName('a'); 2 a1.setAttribute('href','http://www.baidu.com');
这样我们就成功滴将超链接链接到百度网去了。
了解了这些基本的操作之后,DOM还提供了一些方便的节点属性,下面对其进行介绍。
1.childNodes属性。用来获取任何一个元素的所有子元素,其获取到的是一个包含所有子元素的数组。
2.nodeType属性。这个属性用来获取一个节点的类型,它可以返回12个值,而前面我们说过常见的节点类型有元素节点、属性节点以及文本节点,它们三者的nodeType值分别是1、2、3。
3.DOM还提供一个获取文本节点内容的方法:nodeValue属性,注意,它只能用来获取文本节点的值,其语法格式为node.nodeValue。
4.在一个节点的所有childNodes,还有两个特殊的节点,DOM对其进行特殊照顾,那就是第一个和最后一个,它们分别用firstChild和lastChild表示,也就是说实际上,node.firstChild完全等价于node.childNodes[0],而node.lastChild完全等价于node.childNodes[childNodes.length-1]。
至此,我们知道了从获取节点以及获取一些特殊节点和对它们的属性进行操作的基本常用方法。后面会接着了解动态写入节点的相关方法。