@tsingwong 2016-02-15T01:24:56.000000Z 字数 2253 阅读 805

DOM day2

JavaScript DOM

DOM day2

1. 事件处理函数

事件处理函数(event handler)作用是，在特定事件发生时调用特定的 JavaScript 代码。例如，想在鼠标悬停在某个元素上时触发动作，使用 onmouseover 事件处理函数；想在鼠标离开某个元素时触发动作，使用 onmouseout 事件处理函数；想在鼠标点击某个链接时触发动作，使用 onclick 事件处理函数。
添加事件处理函数的语法如下：

event = "JavaScript statement(s)"

注：JavaScript代码包含在一对引号之间。可以把任意数量的JavaScript语句放在这对引号之间，各条语句用分号隔开。

事件处理函数的工作机制，在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript 代码就会执行。被调用的 JavaScript 代码可以返回一个值，这个值被传递给那个事件处理函数。例如，给某个链接添加一个onclick 事件处理函数，并让这个处理函数所触发的 JavaScript 代码返回布尔值。即链接被点击时，如果 JavaScript代码返回值为true，onclick 事件处理函数就认为“这个链接被点击了”；反之，如果返回值为false，onclick事件处理函数就认为“这个链接没有被点击”。

2. childNodes 属性

一颗节点树上， childNodes 属性可以用来获取任何一个元素的所有子元素，它是包含这个元素全部子元素的数组：

element.childNodes

例如将某个文档的body元素的全体子元素检索出来。首先，使用 getElementsByTagName 得到body元素。因为每个文档只有一个body元素，故它将是返回数组中的第一个（唯一）元素。

    var body_element = document.getElementsByTagName("body")[0]
    body_element.childNodes

注：文档树的节点类型并非只有元素节点一种。由childNodes属性返回的数组包含所有类型的节点。

3. nodeType 属性

每个节点都有nodeType属性，该属性可以让我们知道自己当前与哪种节点打交道，但nodeType的值并非英文。
获取节点的nodeType属性：

    node.nodeType

nodeType 属性总共有12中可取值，其中仅3种具有实用价值。
* 元素节点的nodeType 属性值为1。
* 属性节点的nodeType 属性值为2。
* 文本节点的nodeType 属性值为3。
意味着，可以让函数只对特定类型的节点进行处理。

4. nodeValue 属性

nodeValue属性，用来得到和设置一个节点的值：

node.nodeValue
node.nodeValue = value

注：用nodeValue属性获取文本节点的值时，得到的并不是包含在其中的文本。

<HEAD>
    <TITLE>元素节点</TITLE>
</HEAD>
<BODY>
    <table>
        <tr>
            <td id="john" name="myname">John</td>
            <td>Doe</td>
            <td id="jack">Jack</td>
        </tr>
    </table>
    <script>
    var d = document.getElementById("john");
    alert(d.nodeType); //1  
    alert(d.nodeName); //TD  
    alert(d.nodeValue); //null
    </script>
</BODY>
</HTML>

 <HEAD>
    <TITLE>属性节点</TITLE>
</HEAD>
<BODY>
    <table>
        <tr>
            <td id="john" name="myname">John</td>
            <td>Doe</td>
            <td id="jack">Jack</td>
        </tr>
    </table>
    <script>
    var d = document.getElementById("john").getAttributeNode("name");
    alert(d.nodeType);//2
    alert(d.nodeName);//name
    alert(d.nodeValue);//myname
    </script>
</BODY>
</HTML>

<HEAD>
    <TITLE>文本节点</TITLE>
</HEAD>
<BODY>
    <table>
        <tr>
            <td id="john" name="myname">John</td>
            <td>Doe</td>
            <td id="jack">Jack</td>
        </tr>
    </table>
    <script>
    var d = document.getElementsByTagName("td")[0].firstChild;
    alert(d.nodeType);//3
    alert(d.nodeName);//#text
    alert(d.nodeValue);//John
    </script>
</BODY>
</HTML>

通过上述例子应该是充分对于这三种节点的理解了。

5. firstChild 和 lastChild 属性

node.firstChild

等同于

node.childNodes[0]

同理

node.lastChlid

等同于

node.childNodes[node.childNodes.length-1]