DOM常用操作

查詢節點

// 返回擁有指定id的第乙個物件的引用

document.
getelementbyid
('id屬性值');
//返回擁有指定class的物件集合
document/element.
getelementsbyclassname
('class屬性值');
//返回擁有指定標籤名的物件集合
document/element.
getelementsbytagname
('標籤名');
//返回擁有指定名稱的物件結合
document.
getelementsbyname
('name屬性值');
//僅返回第乙個匹配的元素
document/element.
queryselector
('css選擇器');
//返回所有匹配的元素
document/element.
queryselectorall
('css選擇器');
//獲取頁面中的html標籤
document.documentelement
//獲取頁面中的body標籤
document.body

// 建立新的元素節點

document.
createelement
('元素名');
//建立新的屬性節點
document.
createattribute
('屬性名');
//建立新的文字節點
document.
createtextnode
('文字內容');
//建立新的注釋節點
document.
createcomment
('注釋節點');
//建立文件片段節點
document.
createdocumentfragment()
;

//向父節點的最後乙個子節點後追加新節點

parent.
( element/txt/comment/fragment )
;//向父節點的某個特定子節點之前插入新節點
parent.
insertbefore
( newchild, existingchild )
;//給元素增加屬性節點
element.
setattributenode
( attributename )
;//給元素增加指定屬性，並設定屬性值
element.
setattribute
( attributename, attributevalue )
;

// 刪除已有的子節點，返回值為刪除節點

parentnode.
removechild
( existingchild )
;// 刪除具有指定屬性名稱的屬性，無返回值
element.
removeattribute
('屬性名');
// 刪除指定屬性，返回值為刪除的屬性 
element.
removeattributenode
( attrnode )
;

// 用新節點替換父節點中已有的子節點

parentnode.
replacechild
( newchild, existingchild )
;//若原元素已有該節點，此操作能達到修改該屬性值的目的
element.
setattributenode
( attributename )
;//若原元素已有該節點，此操作能達到修改該屬性值的目的
element.
setattribute
( attributename, attributevalue )
;

DOM常用操作

查詢節點 通過id查詢dom節點 getelementbyid 通過class屬性查詢 getelementsbyclassname 通過標籤名查詢 getelementsbytagnames 通過指定名稱查詢 getelementsbyname 匹配選擇器，只返回匹配的第乙個元素 querysel...

Dom節點操作常用方法

1.訪問 獲取節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意拼寫 elements document.getelementsbytagname tag...

DOM常用操作 元素 節點相關

dom物件的深入理解這篇文章中有提到一些dom操作，我們會在這篇文章中簡單回顧一下。幾個需求 dom元素的增刪改 注意 如果獲取到一組物件，要獲得元素物件需要加相應索引 只有事先寫好了行內樣式才可以獲取和修改，其他設定樣式的方法不可。而且設定之後也只是設定行內樣式 需要提前寫好某個樣式類的css c...