js—— DOM中的node类型（二）

DOM中的node类型

DOM1中定义了一个Node接口，这个接口在js中做为Node类型实现，除IE外，其余浏览器均可以访问到这个类型。Js中因此节点类型都继承自Node类型，节点类型都享有共同的·基本属性和方法。

每一个节点都有nodeType属性，代表节点类型，由12个常量表示，任何节点必居其一。

Node.ELEMENT_NODE   1   元素节点
Node.ATTRIBUTE_NODE   2  属性节点
Node.TEXT_NODE   3  文本节点
......

经常使用的为以上三种，还有其余类型可去查阅相关资料

肯定节点类型的方法：

//IE中无效
if(someNode.nodeType==Node.ELEMENT_NODE){
    alert("element");
}

//或（因为IE没有公开Node类型的构造函数，上面的方法会致使错误，因此为了保证兼容性，仍是用数值比较的方法）
if(someNode.nodeType==1){
    alert("element");
}

• nodeName和nodeValue属性

  //先检测节点类型
  if(someNode,nodeType==1){
      value=someNode.nodeNmae;
  }

  对于元素节点

  • nodeName：它的值是元素的标签名
  • nodeValue: 它的值始终是null

• 节点关系

  节点间的关系通常采用家族关系来描述。好比HTML中有父元素，子元素关系。

  1.每一个节点都有childNodes属性，保存着NodeList对象,一种保存着有序节点的类数组对象

  • //访问NodeList对象方法
    var firstChild=someNode.childNodes[0];
    var secondChild=someNode.childNodes.item(1);
    var count=someNode.childNodes.lenth;

  • NodeList是DOM结构动态执行查询的结果。

  • 将NodeList转为数组

    //IE中无效
    var arrayOfNode=Array.prototype.slice.call(someNode.childNodes,0);
    
    //全部浏览器均可运行
    function convertToArray(nodes){
        var array=null;
        try{
            arrayOfNode=Array.prototype.slice.call(nodes,0);
        }catch(err){//报错就手动添加
            array=new Array();
            for(var i=0,len=nodes.length;i<len;i++){
                array.push(node[i]);
            }
        }
    }

  2.每一个节点还有：

  • parentNode属性：指向父节点。父节点的firstChild和lastChild指向第一个和最后一个子节点；只有一个子节点时这两属性指向同一个节点，没有子节点时，两个属性为null
  • nextSibling属性：同一列表中下一个节点，最后一个节点的nextSibling为null
  • previousSibling属性：同一列表中上一个节点，第一个一个节点的previousSibling为null

3.全部节点的ownerDocument属性：指向表示整个文档的文档节点

• 操做节点

  1. appendChild() ： 向节点的childNodes列表末尾添加一个节点

  • 添加新节点：

    someNode.appendChild(newNode);

  • 移动节点到最后一位

    someNode.appendChild(someNode.firstChild);//将第一个子节点移动到最后一位

  1. insertBefore() : 插入节点，接收两个参数：第一个是要插入的节点，第二个是位置参照节点。被插入的节点会做为参照节点的前一个同胞节点被返回。

     //插入后成为最后一个节点
     someNode.insertBefore(newNode,null);
     
     //插入成为第一个节点
     someNode.insertBefore(newNode,someNode.firstChild);

  2. replaceChild(): 替换节点。接收两个参数：要传入的节点和要替换的节点。

  3. removeChild()：移除节点。接收一个参数：要移除的节点。

• 其余方法

  1. cloneNode(): 建立调用这个方法的节点的一个彻底相同的副本。接收一个布尔值参数：是否执行深复制，深复制会复制整个子节点数（true)，浅复制只复制自己。
  2. normalize(): 处理文档树中的文本节点。有时候会出现文本节点不包含文本或者接连出现两个文本节点的状况。在某个节点上调用这个节点，可查找上述的两种状况，若是找到了空节点就删除它，若是找到接连的两个节点就合并。

上一节---->[js——DOM层次节点（一）]