JavaScript---DOM基礎操作總結表
JavaScript組成
| JavaScript組成 |
作用 |
相容性 |
| ECMAScript:直譯器、翻譯 |
|
幾乎沒有相容性問題 |
| DOM:Document Object Model，文件物件模型 |
操作頁面元素的能力document |
有一些相容性問題 |
| BOM:Browser Object Model，瀏覽器物件模型 |
操作瀏覽器的能力window |
沒有相容性問題---幾乎不相容 |
DOM基礎操作---獲取節點、節點操作、屬性操作、文字操作
在 HTML DOM 中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
1、獲取節點---document、節點指標
| document |
語法 |
功能 |
| getElementById |
document.getElementById(“id”) |
通過元素id獲取節點 |
| getElementsByName |
document.getElementsByName(元素name屬性) |
通過元素的name屬性獲取節點 |
| getElementsByTagName |
document.getElementsByTagName(元素標籤) |
通過元素標籤獲取節點 |
| 節點指標 |
語法 |
功能 |
| firstChild firstElementChild |
父節點.firstChild |
獲取元素的首個子節點 |
| lastChild lastElementChild |
父節點.lastChild |
獲取元素的最後一個子節點 |
| childNodes |
父節點.childNodes |
獲取元素的子節點列表 |
| previouSibling previousElementSibling
|
兄弟節點.previouSibling |
獲取已知節點的前一個節點 |
| nextSibling nextElementSibling |
兄弟節點.nextSibling |
獲取已知節點的後一個節點 |
| parentNode |
子節點.parentNode |
獲取已知節點的父節點 |
| nodeType |
節點.nodeType |
判斷節點型別
|
| children<相容火狐> |
oUl.children.length |
獲取子節點 |
| offsetParent |
|
返回最近的祖先定位元素。 |
2、節點操作---建立節點、插入節點、替換節點、複製節點、刪除節點
| 節點操作 |
語法 |
功能 |
| 建立:createElement |
document.createElement(元素標籤) |
建立元素節點 |
| 建立:createAttribute |
document.createAttribute(元素屬性) |
建立屬性節點 |
| 建立:createTextNode |
document.createTextNode(文字內容) |
建立文字節點 |
| 插入:appendChild |
appendChild(所新增的新節點) |
向節點的子節點列表的末尾新增新的子節點 |
| 插入:insertBefore |
insertBefore(所要新增的新節點，已知子節點) |
在已知子節點前插入一個新的子節點 |
| 替換:replaceChild |
replaceChild(要插入的新元素，將被替換的老元素) |
將某個子節點替換為另外一個 |
| 複製:cloneNode |
需要被複制的節點.cloneNode(true/false) |
建立指定節點的副本，true複製當前節點及其所有子節點，false僅複製當前節點 |
| 刪除:removeChild |
removeChild(要刪除的節點) |
刪除指定的節點 |
3、屬性操作--獲取屬性、設定屬性、刪除屬性
| 屬性操作 |
語法 |
功能 |
| 獲取：getAttribute |
元素節點.getAttribute(元素屬性名) |
獲取元素節點中指定屬性的屬性值 |
| 設定：setAttribute |
元素節點.setAttribute(屬性名,屬性值) |
建立或改變元素節點的屬性 |
| 刪除：removeAttribute |
元素節點.removeAttribute(屬性名) |
刪除元素中的指定屬性 |
4、文字操作
| 文字操作 |
功能 |
| insertData(offset,String) |
從offset指定的位置插入String |
| appendData(String) |
將string 插入到文字節點的末尾處 |
| deleteData(offset,count) |
從offset起刪除count個字元 |
| replaceData(off,count,String) |
從off將count個字元用string替代 |
| splitData(offset) |
從offset起將文字節點分為兩個節點 |
| substring(offset,count) |
返回由offset起的count個節點 |