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

2022-08-23 04:30:14 字數 2326 閱讀 5067

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

以上是對節點的獲取,下面看一看對節點的操作:

首先看看如何穿建立乙個節點;

var ele = document.createelement("div");

建立乙個div節點

ele.innerhtml = "你好世界";

加入內容,再放入頁面中:

如何放入呢?

ele.insertbefore(newnode, existnode)  在box內,把newnode節點插入到exsitnode的前面

再來看看如何刪除:

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

box.parentnode.removechild(box);

box.remove();

remove:直接刪除!但:相容極差。

節點的轉殖

clonenode():轉殖當前層,不會深層次轉殖。

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

最後就是節點替換了:

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

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

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

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...