dom節點及對節點的常用操作方法

在說dom節點前，先來看看頁面的呈現：

dom渲染流程：

1、瀏覽器解析html原始碼，然後建立乙個dom樹。

在dom樹中，每乙個html標籤都有乙個對應的節點(元素節點),並且每乙個文字也都有乙個對應的節點(文字節點)。dom樹的根節點就是documentelement，對應的是html標籤。

2、瀏覽器解析css**，計算出最終的樣式資料。

對css**中非法的語法它會直接忽略掉。解析css的時候會按照如下順序來定義優先順序：瀏覽器預設設定，使用者設定，外聯樣式，內聯樣式，html中的style(嵌在標籤中的行間樣式)。

3、建立完dom樹並得到最終的樣式資料之後，構建乙個渲染樹。

渲染樹和dom樹有點像，但是有區別。dom樹完全和html標籤一一對應，而渲染樹會忽略不需要渲染的元素(head、display:none的元素)。渲染樹中每乙個節點都儲存著對應的css屬性。

4、當渲染樹建立完成之後，瀏覽器就可以根據渲染樹直接把頁面繪製到螢幕上。

那我們的節點大致是12種：

我們平常可見的也就文字節點，屬性節點，元素節點，注釋節點等…

先來看看獲取節點：

childnodes：獲取元素下的所有節點：返回乙個陣列

var box_ele = document.getelementbyid(「box」);

var child_nodes = box_ele.childnodes;

nodetype:辨別元素的型別

1=> 元素節點

2=> 屬性節點

3=》 文字節點

4…nodevalue：獲得文字節點的值

children：獲取元素下的所有元素節點：返回乙個陣列

var box_ele = document.getelementbyid(「box」);

var child_nodes = box_ele.children;

一般而言，我們多用childr。

nodename：判定元素的型別 返回標籤的大寫 如：div span等.

另外的獲取：關係型節點獲取

子集類：

firstchild：第乙個子節點

firstelementchild：第乙個元素子節點

lastchild：最後乙個子節點

lastelementchild：最後乙個元素子節點

兄弟類：

nextsibling：下乙個節點

nextelementsibling：下乙個元素節點

previoussibling：上乙個節點

previouselementsibling：上乙個元素節點

父級類：

parentnode：父節點

特別注意的：

屬性節點：

由於屬性都是在元素裡邊的，所以屬性節點獲取一定是在元素節點之上。

var box_ele = document.getelementbyid(「box」);

var attributes = box_ele.attributes;

這裡的attributes是乙個陣列：

屬性分為屬性和屬性值：

那我們可以通過之前的nodetype，nodename，nodevalue來看看attributes裡的內容：

如：attributes[0].nodetype

attributes[0].nodename

attributes[0].nodevalue

再來看看如何刪除：

removechild()：這個方法需要找到父節點再刪除：

box.parentnode.removechild(box);

box.remove();

remove：直接刪除！但：相容極差。

節點的轉殖

clonenode()：轉殖當前層，不會深層次轉殖。

clonenode(true)：整層及以下都轉殖。

最後就是節點替換了：

obj.replacechild(新新增的節點 , 被替換的節點) 替換子節點

dom節點及對節點的常用操作方法

dom節點及對節點的常用操作方法 在說dom節點前，先來看看頁面的呈現 dom渲染流程 1 瀏覽器解析html原始碼，然後建立乙個dom樹。在dom樹中，每乙個html標籤都有乙個對應的節點 元素節點 並且每乙個文字也都有乙個對應的節點 文字節點 dom樹的根節點就是documentelement，...

DOM之對節點的操作

1.createelement 建立乙個元素節點 let p document.createelement p 這個方法必須要傳遞乙個節點作為引數 不能字串 是放在父元素的末尾 2.insertbefore 插入到某乙個元素的前面 語法 父元素.insertbefore 你要插入的元素,哪乙個元素的...

DOM節點及高階操作

1 attributes得到dom屬性節點 包含所有的預設屬性 自定義屬性的屬性名和屬性值 2 getattribute 得到某個屬性值，括號裡為屬性名，可得到所有屬性 預設屬性和自定義屬性 console.log obox.getattribute id console.log obox.geta...