DOM節點之間的關係,與節點的基本操作

以下獲取節點都會獲取所有的節點型別,不只是包括元素節點,還有文字型別等

獲取乙個元素節點的所有子節點

元素節點物件.childnodes

獲取到的是乙個類陣列nodelist

獲取乙個元素節點的第乙個子節點

元素節點物件.firstchild

獲取乙個元素節點的最後乙個子節點

元素節點物件.lastchild

獲取乙個元素節點的下乙個節點物件

元素節點物件.nextsibling

獲取乙個元素節點的上乙個節點物件

元素節點物件.previoussibling

獲取乙個元素節點的父節點

元素節點物件.parentnode

以下獲取節點只會獲取到元素節點型別

獲取乙個元素節點的所有子節點

元素節點物件.children

獲取到的是乙個類陣列htmlcollection

獲取乙個元素節點的第乙個元素子節點

元素節點物件.firstelementchild

獲取乙個元素節點的最後乙個元素子節點

元素節點物件.lastelementchild

獲取乙個元素節點的下乙個兄弟元素節點

元素節點物件.nextelementsibling

獲取乙個元素節點的上乙個兄弟元素節點

元素節點物件.previouselementsibling

獲取乙個元素節點的元素父節點

元素節點物件.parentelement

獲取乙個元素節點的所有子節點個數

元素節點物件.childelementcount

增加文字節點

var text = document.createtextnode("文字內容")

var ele = document.createelement("元素名")

如把上面的文字節點新增到元素節點中去

追加法

在某乙個子節點前插入節點

語法:父元素物件.insertbefore(要插入的節點物件名,插入到哪個元素節點前)

ele.insertbefore(text,ele.lastelementchild);

ele.insertbefore(text,null);
ele.insertbefore(text,undefined);

//例: 將第2個li替換成p元素

var ul = document.queryselector(".ul1");
var p = document.createelement("p");
ul.replace(p,ul.firstelement.nextelementsibling);

例:

ul.replace(ul.lastelementchild);

true表示深複製,就是全部複製,子孫之類的全部複製

false表示淺複製,就是只複製當前的節點,子孫節點不會複製

var ul = document.queryselector(".ul1");

​//複製乙份ul成為ul的下乙個兄弟
​ul.parentelement.insertbefore(ul.clonenode(true),ul.nextelementsibling);

DOM資料之節點之間的訪問關係

dom 訪問關係 節點的獲得 節點的訪問關係，是以屬性的方式存在的。dom的節點並不是孤立的，因此可以通過dom節點之間的相對關係對它們進行訪問。父節點 parentnode 呼叫者就是節點。乙個節點只有乙個父節點。呼叫方式就是節點.parentnode.兄弟節點 nextsibling 下乙個節點...

xpath 軸,節點之間的關係

測試軸可定義相對於當前節點的節點集。軸名稱結果 ancestor 選取當前節點的所有先輩 父 祖父等 ancestor or self 選取當前節點的所有先輩 父 祖父等 以及當前節點本身。attribute 選取當前節點的所有屬性。child 選取當前節點的所有子元素。descendant 選取當...

DOM 01 DOM訪問關係 節點的獲得

父節點 兄弟節點 單個節點 ie指的是ie 6 7 8 1 獲取父節點 element.parentnode 2 獲取兄弟點 2.1獲取上乙個兄弟節點 ie element.nextsibling 其他 element.previouselementsibing 總結 var prev elemen...