javascript的节点的概念 

1 <html>
2             <head>
3                 <title></title>
4             </head>
5             <body>
6 
7             </body>
8         </html>

文档节点是每个文档的根节点.

在我们的页面中,文档节点只有一个子节点即<html>.我们称之为文档元素.在XML中,没有预定义的元素,因此任何元素都有可能成为文档元素

javsccript中的所有节点类型都继承自Node类型.所以所有的节点都有着相同的基本属性和方法.

没个节点都有一个nodeType属性.用于表明节点的类型.
NODE.ELEMENT_NODE 1
NODE.ATTRIBUTE_NODE 2
NODE.TEXT_NODE 3
NODE.CDATA_SECTION_NODE 4
NODE.ENTITY_REFERENCE_NODE 5
NODE.ENTITY_NODE 6
NODE.PROCESSING_INSTRUCTION_NODE 7
NODE.COMMENT_NODE 8
NODE.DOCUMENT_NODE 9
NODE.DOCUMENT_TYPE_NODE 10
NODE.DOCUMENT_FRAGMENT_NODE 11
NODE.NOTATION_NODE 12

window.onload = function () {
            var oDiv = document.getElementById("guoDiv");
            if (oDiv.nodeType == Node.ELEMENT_NODE) {//在IE下会报错
                alert("不好暴露了");
            }
            else
                alert("没被发现");
        }

上面的代码(Node.ELEMENT_NODE)在IE中会报错,
因为IE没有公开NODE的类型构造函数.
为了确保浏览器的兼容性,可以这个样子写

1         window.onload = function () {
2             var oDiv = document.getElementById("guoDiv");
3             if (oDiv.nodeType == 1) {//在IE下会报错
4                 alert("不好暴露了");
5             }
6             else
7                 alert("没被发现");
8         }

要了解节点的具体信息,可以使用nodeName和nodeValue这两个属性

1 window.onload = function () {
2             var oDiv = document.getElementById("guoDiv");
3             alert(oDiv.nodeName); //DIV
4             alert(oDiv.nodeValue);//null
5         }

每个节点都有一个childNodes属性,其中保存着一个NodeList对象.
NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点.
注意NodeList不是Array实例.虽然他有length属性,也可以通过方括号访问NodeList值.
NodeList对象的独特之在于,它实际上是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反映在ModeList对象上.
所以NodeList是有生命,有呼吸,而不是在我们第一次访问他们的属性时拍摄下来的一张快照.

1 window.onload = function () {
2             var oDiv = document.getElementById("divFather");            
3             var firstChild = oDiv.childNodes[1];            
4             alert(firstChild.innerHTML);//1
5         }

NodeList不是数组,那么就不能使用数组的方法了.
下面是将NodeList转换成数组 

 1 function converToArray(nodes) {
 2             var array = null;
 3             try {
 4                 array = Array.prototype.slice.call(nodes, 0); //针对非IE
 5             }
 6             catch (e) {
 7                 array = [];
 8                 for (var i = 0, len = nodes.length; i < len; i++) {
 9                     array.push(nodes[i]);
10                 }
11             }
12             return array; 
13         }

 

posted @ 2014-03-26 11:39  思思博士  阅读(1623)  评论(0)  编辑  收藏  举报