js節點操作

每個節點都有乙個 parentnode 屬性，該屬性指向文件樹中的父節點。包含在 childnodes 列表中的所有節點都具有相同的父節點，因此它們的 parentnode 屬性都指向同乙個節點。此外，包含在childnodes 列表中的每個節點相互之間都是同胞節點。通過使用列表中每個節點的 previoussibling和 nextsibling 屬性，可以訪問同一列表中的其他節點。列表中第乙個節點的 previoussibling 屬性值為 null ，而列表中最後乙個節點的 nextsibling 屬性的值同樣也為 null。

節點（note）之間的關係如下圖：

每個節點都有乙個 childnodes 屬性，其中儲存著乙個 nodelist 物件。 nodelist 是一種類陣列物件，用於儲存一組有序的節點，可以通過位置來訪問這些節點。請注意，雖然可以通過方括號語法來訪問 nodelist 的值，而且這個物件也有 length 屬性，但它並不是 array 的例項。 nodelist 物件的獨特之處在於，它實際上是基於 dom 結構動態執行查詢的結果，因此 dom 結構的變化能夠自動反映在 nodelist 物件中。我們常說， nodelist 是有生命、有呼吸的物件，而不是在我們第一次訪問它們的某個瞬間拍攝下來的一張快照。

訪問儲存在 nodelist 中的節點，可以這樣：

//獲取第乙個子元素
①var firstchild = somenode.childnodes[0];
②var secondchild = somenode.childnodes.item(1);
//判斷元素是否包含子元素
①var count = somenode.childnodes.length;
②var ishas=somenode.haschildnodes();

將 nodelist 物件轉換為陣列（對 arguments 物件使用 array.prototype.slice() 方法可以將其轉換為陣列）：

function converttoarray(nodes) catch (ex) 
}return array;
}

操作節點的方法：

向 somenode的childnodes 列表的末尾新增乙個節點。

2.insertbefore() ---------somenode.insertbefore(newnode, somenode.firstchild)

這個方法接受兩個引數：要插入的節點和作為參照的節點。插入節點後，被插入的節點會變成參照節點的前乙個同胞節點

3.replacechild() ---------somenode.replacechild(newnode, somenode.firstchild);

接受的兩個引數是：要插入的節點和要替換的節點。

4.removechild() ----------somenode.removechild(somenode.lastchild);

與使用 replacechild() 方法一樣，通過 removechild() 移除的節點仍然為文件所有，只不過在文件中已經沒有了自己的位置。

5.clonenode() -----引數可以帶ture或者false,表示是否深度複製，這個方法應該很少用到，略過。

6.normalize() -------作用是處理文件樹中的文字節點,也略過

操作節點的例子：

(function
()                 } 
} var getelementbyclassname=function
(classname)
}return
arr;
};var b=getelementbyclassname("czzhpf-hd-1");
var a=b[0];
del_ff(a);
var chils=a.childnodes;        
chils[0].style.display="none";   //第乙個子元素
chils[1].style.display="none";   //第二個子元素
chils[2].style.display="none";   //第三個子元素

})
()

js節點操作

Js節點操作

js 節點操作

js操作dom節點

js節點操作

Js節點操作

js 節點操作

js操作dom節點

相關推薦