js中操作dom的方法(複習)

2021-07-29 07:01:58 字數 1354 閱讀 9246

一、查詢元素

getelementbyid() 通過id查詢元素 返回乙個dom元素

getelementsbytagname() 通過標籤名查詢元素 返回乙個偽陣列

getelementsbyclassname() 通過類名查詢元素,返回乙個偽陣列

getelementbyname() 通過屬性名name查詢元素 ,返回乙個偽陣列

queryselector(selector) 獲取符合選擇器的第乙個元素, 返回乙個dom元素

queryselectorall(selector) 獲取符合選擇器的所有元素,返回乙個偽陣列

二、建立節點

createelement(節點名) 建立乙個節點,並返回

createtextnode() 建立乙個文字節點

clonenode(boolean)轉殖乙個節點,並返回,當傳入true時為深層轉殖, 呼叫他的元素的子元素也會被轉殖並返回。不傳時,預設false,只轉殖當前元素,不轉殖他的子元素。

三、插入節點

insertbefore(要插入元素,參考元素)  在某元素的子元素(參考元素)前面插入元素

四、刪除節點

removechild(元素) 刪除傳入的子元素

五、查詢節點

children 某元素的所有子元素, 返回乙個偽陣列

childnodes 某元素的所有子節點(包括子元素),返回乙個偽陣列

firstchild 某元素的第乙個子元素,返回乙個dom元素

lastchild 某元素的最後乙個子元素,返回乙個dom元素

nextsibling 某節點之後緊跟的節點,返回乙個dom元素

nextelementsibling 下乙個元素節點

previouselementsibling 上乙個元素節點

precioussibling某元素之前緊跟的節點 ,返回乙個dom元素

parentnode 父節點

六、替換節點

replacechild(newnode,oldnode) 替換某元素中的某個幾點

七、節點屬性

節點名稱(唯讀):nodename

節點值: nodevalue

節點型別(唯讀):nodetype

八、屬性操作

獲取元素屬性:

element.attributes 返回乙個由 的偽陣列

設定元素屬性:ele.setattribute(name,value);

判斷擁有某個屬性:ele.hasattribute(name);

刪除某個屬性:ele.removeattribute(name);

判斷是否擁有屬性設定:

ele.hasattributes();

JS中的DOM操作方法

1 childnodes 返回當前元素所有子元素的陣列 2 firstchild 返回當前元素的第乙個子元素 3 lastchild 返回當前元素的最後乙個子元素 4 nextsibling 返回緊跟在當前元素後面的元素 5 nodevalue 指定表示元素值的讀 寫屬性 6 parentnode ...

JS中DOM操作的一些方法

常用dom方法 選擇器 需要注意 getelementbyid 適用於需要查詢文件中的乙個特定的元素,如果沒有指定 id 的元素返回 null,如果存在多個指定 id 的元素則返回第乙個。其他的方法獲取結果可能是多個,所以element後面要加s。元素物件 b bb div a aaa div c ...

JS中的DOM基本操作

一 基本操作 1.增 1 document.createelement 建立元素節點 2 document.createtextnode 建立文字節點 3 doucment.createcomment 建立注釋節點 4 createdocumentfragment 建立一虛擬的節點物件,節點物件包含...