JavaScript 02 DOM基本操作

2021-09-18 09:08:00 字數 1372 閱讀 7509

獲取節點

(1)document:

getelementbyid():語法:document.getelementbyid(元素id);通過元素id獲取節點

getelementsbyname():語法:document.getelementsbyname(元素name屬性);通過元素name屬性獲取節點

getelementstagname();語法:document.getelementsbytagname(元素標籤);通過元素標籤獲取節點

(2)節點指標:

firatchild() 語法:父節點.firstchild 功能:獲取元素的首個子節點

lastchild() 語法:父節點.lastchild 功能:獲取元素的最後乙個子節點

childnodes() 語法:父節點.childnodes 功能:獲取元素的子節點列表

previoussilling() 語法:兄弟節點.previoussibling 功能:獲取已知節點的前乙個節點

nextsibling() 語法:兄弟節點.nextsibling 功能:獲取已知節點的後乙個節點

parentnode() 語法:子節點.parentnode 功能:獲取已知節點的父節點

節點操作

(1)建立節點

createelement 語法:document.createelement(元素標籤) 用於 建立元素節點

createattribute 語法:document.createattribute(元素屬性) 用於 建立屬性節點

createtextnode 語法:document.createtextnode(文字內容) 用於建立文字節點

(3)替換節點

replacechild 語法:replacechild(要插入的新元素,將被替換的老元素) 功能:將某個子節點替換為另乙個

(4)複製節點

clonenode 語法:需要被複製的節點.clonenode(true/false) 功能:建立指定節點的副本

引數:true:複製當前節點及其所有子節點 false:僅複製當前節點

(5)刪除節點

removechild 語法:removechild(要刪除的節點)功能:刪除指定的節點

3.屬性操作

(1)獲取屬性

getattribute 語法:元素節點.getattribute(元素屬性名) 功能:獲取元素節點中指定屬性的屬性值

(2)設定屬性

setattribute() 語法:元素節點.setattribute(元素屬性名) 功能:建立或改變元素節點的屬性

(3)刪除屬性

removeattribute 語法:元素節點.removeattribute(屬性名) 功能:刪除元素中的指定屬性

4.文字操作

javascript學習 DOM擴充套件

主要的兩個擴充套件物件是selector api和html5,新增了一些使用的方法和屬性。selector api 可以根據css選擇符選擇與某個模式匹配的dom元素,核心是通過css選擇符查詢dom文件取得元素的引用。主要方法有queryselector 和queryselectorall 方法。...

JavaScript物件 DOM技術

dom document object model 文件物件模型 dom技術 把標記文件變成物件樹,通過對這棵樹中的物件進行操作 增刪改查 實現對文件內容的操作。對dom物件樹進行增刪改查,產生的效果就是對頁面內容進行增刪改查 文件 html頁面,xml文件 檔案 dhtm 動態html技術,它不是...

JavaScript 操作DOM物件

簡介 全稱 document object model 文件物件模型 是基於文件程式設計的一套api介面,大部分主流瀏覽器都執行了w3c發布的第一級的dom規範,因此解決了瀏覽器相容性問題 任何一種支援dom程式設計的語言都可以使用它,比如html html dom css dom geteleme...