DOM簡介和節點操作

nodetype值

節點型別

1元素節點，例如和

3文字節點

8注釋節點

9document 節點

10dtd 節點

方法功能

相容性document.getelementbyid

通過id得到元素

ie6document.getelementsbytagname()

通過標籤名得到元素陣列

ie6document.getelementsbyclassname()

通過類名得到元素陣列

ie9document.queryselector()

通過選擇器得到元素

ie8部分相容、ie9完全相容

document.queryselectorall()

通過選擇器得到元素陣列

ie8部分相容、ie9完全相容

延遲執行

"box1"
>
>
我是段落p
>
class
="spec"
>
我是段落p
>
>
我是段落p
>
div>

var the_p = document.
queryselector
('#box1 .spec'
);

關係

考慮所有節點

只考慮元素節點

子節點childnodes

children

父節點parentnode

同第乙個子節點

firstchild

firstelementchild

最後乙個子節點

lastchild

lastelementchild

前乙個兄弟節點

previoussibling

previouselementsibling

後乙個兄弟節點

nextsibling

nextelementsibling

var box = document.
getelementbyid
('box');
function
getchildren
(node)
}return children;
}console.
log(
getchildren
(box)
)

var para = document.
getelementbyid
('para');
function
getpreviouselementsibling
(node)
return o.previoussibling;
}console.
log(
getpreviouselementsibling
(para)
);

var para = document.
getelementbyid
('para');
function
getallelementsibling
(node) 	
o = node;
while
(o.nextsibling !==
null
)return prevs.
concat
(nexts);}
console.
log(
getallelementsibling
(para)
);

innerhtml 能以html語法設定節點中的內容

innertext 能以純文字的形式設定節點中的內容

;obox.classname = newclass;從 ie10 開始相容

// 新增 class
el.classlist.
add(
'c1');
// 移除 class
el.classlist.
remove
('c2'
);

var odiv = document.
createelement
('div'
);

父節點.
(孤兒節點)
;

父節點.
insertbefore
(孤兒節點，標桿節點)
;

新父節點.
(已經有父親的節點)
;新父節點.
insertbefore
(已經有父親的節點，標桿子節點)
;

父節點.
removechild
(要刪除的子節點)
;

var 孤兒節點 = 老節點.
clonenode()
;var 孤兒節點 = 老節點.
clonenode
(true
);

"box"
>
div>

var obox = document.
getelementbyid
('box');
obox.dataset.weathday =10;
// 定義
console.
log(obox.dataset.weathday)
;// 獲取

DOM節點操作

節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容文字節點 cdata section n...

操作dom節點

取到節點物件可以，我們可以建立乙個節點後動態插入到dom節點樹中 html中 1 建立乙個文字節點第一段第二段第三段 js var div document getelementsbytagname div 0 var textnode document createtextnode 文字節點 ...

DOM 節點操作

方法名只能document呼叫返回單一的值返回動態集合 getelementbyid getelementsbytagname getelementsbyclassname queryselectorall queryselector 建立節點document.createelement ta...

DOM簡介和節點操作

DOM節點操作

操作dom節點

DOM 節點操作

相關推薦