Web前端学习第十五天·fighting_JavaScript（DOM编程艺术3-4章）

[b]DOM中常用的节点[/b]

　　DOM中有许多不同类型的节点，通常使用的有三种：

　　　　元素节点

　　　　文本节点

　　　　属性节点

　　

[b]3种DOM方法获取元素节点 [/b]

　　通过元素ID（id） getElementById（“idName”），返回一个对象。

　　通过标签名字 getElementsByTagName（“tagName”），返回一个对象数组，每个对象分别对应着文档里给定标签的一个元素。

　　通过类名字（class） getElementsByClass（“className”），返回一个对象数组。使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名只要在字符串参数中用空格隔开类名即可。注意，类名的顺序不影响匹配的结果，而且就算元素带有更多的类名也没有关系。

[b]获取和设置属性[/b]

　　getAttribute（“attributeName”） 获取属性值，如果没有该属性值则返回null。

　　setAttribute（“attributeName”，“value”） 设置属性值。如果用在一个本身就有这个属性的元素节点上，这个属性值就会被覆盖掉。

　　二者都只能作用于元素节点。

[b]DOM的工作模式[/b]

　　先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。（对页面内容进行刷新却不需要在浏览器里刷新页面）

[b]事件处理函数[/b]

　　事件处理函数的作用就是在特定事件发生时调用特定的JavaScript代码。如：

　　　　鼠标指针悬停时触发一个动作：onmouseover事件处理函数。

　　　　鼠标指针离开某个元素时触发一个动作：onmouseout事件处理函数。

　　　　点击某个链接时触发一个动作：onclick事件处理函数。

　　添加事件处理函数的语法： event = “JavaScript statement（s）”，例如：onclick = “showPic(this)”。可以把任意数量的JavaScript语句放在这对引号中，只要用分号隔开即可。

[b]设置默认行为不被触发[/b]

　　事件处理函数的工作机制：在给某个元素添加了事件处理函数之后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值被传递给那个事件处理函数。如果返回的是true则认为该元素的此事件发生了，如果返回的是false则认为该元素的此事件没有发生，这样就可以屏蔽该元素的默认行为。例如：链接的页面跳转行为不发生。

[b]childNodes属性[/b]

　　用来获取任何一个元素的所有子元素，是一个包含这个元素所有子元素的数组。

　　语法：element.childNodes

[b]nodeType属性[/b]

　　由childNodes返回的数组包含所有类型的节点而不仅仅是元素节点。事实上，文档中的几乎每样东西都是一个节点，空格和换行符也被解释为节点，它们全部包含在childNodes属性所返回的数组中。每个节点都会有nodeType属性，用来指明节点的类型，它的值是数字而不是英文。

　　语法：node.nodeType

　　nodeType共有12种可取值，一般只有3种又实用价值。

　　　　元素节点的nodeType属性值为1。

　　　　属性节点的nodeType属性值为2。

　　　　文本节点的nodeType属性值为3。

[b]nodeValue属性[/b]

　　DOM提供nodeValue属性，它用来得到一个节点的值。

　　语法：node.nodeValue，例如：var description = document.getElementById（“description”）；alert（description.nodeValue）；

　　如上语句得到的是一个空值，也就是说用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。包含在<p>元素里的文本是另一种节点，它是p元素的第一个子节点，因此想要获得文本的话其实需要得到的是p元素的第一个子节点的nodeValue属性值。如：alert（description.childNodes[0].nodeValue）；

[b]这两天在准备考试，好崩溃……[/b]

[b]学习进度也是慢……[/b]

[b]firstChild和lastChild属性[/b]

　　firstChild等价于 node.childNodes[0]

　　lastChild等价于 node.childNodes[node.childNodes.length-1]

[b]onload事件处理函数[/b]

　　想让一个函数在页面加载时执行需要使用onload函数，将下面的语句添加到js文件的末尾即可。

　　window.onload = f；（f是已经定义好的函数）