DOM操作整理

2022-09-04 12:48:12 字數 2063 閱讀 3277

dom獲取

1. 直接獲取

document.getelementbyid("box_id") 通過id獲取

document.getelementsbyname("myinput") 通過節點name,返回相同name的陣列

document.getelementsbytagname(tagname) 查詢標籤名 (返回:標籤陣列) 由上至下子元素也包含

document.getelementsbyclassname("box_class") 查詢類名 (返回:標籤陣列)   ie 5,6,7,8 中無效 

2.獲取父節點

(呼叫者).parentnode

3.獲取單個子節點

第乙個子節點: 父節點.firstelementchild || 父節點.firstchild firstchild:呼叫者是父節點 ie678中指第乙個子元素標籤在火狐谷歌ie9+以後都指的是第乙個節點(包括空文件和換行節點) firstelementchild: 在火狐谷歌ie9都指的第乙個元素節點。

最後乙個子節點: 父節點.lastelementchild|| 父節點.lastchild lastchild: ie678中指最後乙個子元素節點(標籤)。在火狐谷歌ie9+以後都指的是最後乙個節點(包括空文件和換行節點) lastelementchild: 在火狐谷歌ie9都指的最後乙個元素節點。 

4.獲取所有子節點

父節點.childnodes 標準屬性 獲取所有節點包括html節點,所有屬性,文字節點  火狐 谷歌等高本版會把換行也看做是子節點

父節點.children 非標準屬性  但是幾乎所有瀏覽器都支援  但不返回文字節點 。(使用較多)

5.獲取兄弟節點

下乙個兄弟節點: (呼叫者).nextelementsibling || (呼叫者).nextsibling nextsibling: 在ie678中指下乙個元素節點(標籤)。在火狐谷歌ie9+以後都指的是下乙個節點(包括空文件和換行節點) nextelementsibling: 在火狐谷歌ie9都指的是下乙個元素節點。

前乙個兄弟節點: (呼叫者).previouselementsibling|| (呼叫者).previoussibling previoussibling:ie678中指前乙個元素標籤 在火狐谷歌ie9+以後都指的是前乙個節點(包括空文件和換行節點) previouselementsibling: 在火狐谷歌ie9都指的是前乙個元素節點。 總結:在ie678中用previoussibling,在火狐谷歌ie9+以後用previouselementsibling。

dom操作

1.建立節點

新的標籤(節點) = document.createelement("標籤名");     var creatediv = document.createelement("div");

2.插入節點:

插入到指定節點之前:父節點.insertbefore(新節點,指定節點)在指定節點前插入;                      boxid.insertbefore(creatediv,bqarr[1]);

3.刪除節點:

知道父節點:父節點.removechild(子節點);必須指定要刪除的子節點              box_id.removechild();

不知道父節點:node.parentnode.removechild(box_id_c);                bqarr[1].parentnode.removechild(bqarr[1]);

4.複製節點:

5.節點屬性:

//      獲取:getattribute(名稱)  //      設定:setattribute(名稱, 值)  //      刪除:removeattribute(名稱)

//nodetype //nodename 節點名稱

jquery知識整理 04 DOM操作

捕獲階段 text 設定或返回所選元素的文字內容 html 設定或返回所選元素的內容 包括html標記 val 設定或返回表單字段的值 jquery attr 方法用於獲取屬性值。對於 html 元素本身就帶有的固有屬性,在處理時,使用 prop 方法。對於 html 元素我們自己自定義的 dom ...

原生js的dom操作 常用的整理

父節點parentnode 第乙個子節點 只會獲取到元素節點 firstelementchild 第乙個子節點 如果有文字節點將會獲取到文字節點 firstchild 最後乙個節點 只會獲取到元素節點 lastelementchild 最後乙個子節點 如果有文字節點將會獲取到文字節點 lastchi...

js知識整理 六 DOM操作元素樣式

box1 style div1 hello div div onchangestyle 節點樣式的修改 button function onchangestyle 拿到節點 var divnode document.getelementbyid div1 script 方法一 修改classname...