JavaScript DOM操作

HTML文檔結構:


ct_htmltree.gif

在 HTML DOM (文檔對象模型)中,每個部分都是節點:

文檔本身是 文檔節點
所有 HTML 元素是 元素節點
所有 HTML 屬性是 屬性節點
HTML 元素內的文本是 文本節點
注釋是 注釋節點

1557212834997.jpg

常用方法:

1.獲取節點:

document.getElementById(idName) //通過id號來獲取元素,返回一個元素對象
document.getElementsByName(name) //通過name屬性獲取id號,返回元素對象數組
document.getElementsByClassName(className) //通過class來獲取元素,返回元素對象數組(ie8以上才有)
document.getElementsByTagName(tagName) //通過標簽名獲取元素,返回元素對象數組

2.獲取/設置元素的屬性值:

element.getAttribute(attributeName) //括號傳入屬性名,返回對應屬性的屬性值
element.setAttribute(attributeName,attributeValue) //傳入屬性名及設置的值

3.創建節點Node:

document.createElement("h3") //創建一個html元素,這里以創建h3元素為例
document.createTextNode(String); //創建一個文本節點;
document.createAttribute("class"); //創建一個屬性節點,這里以創建class屬性為例

4.增添節點:

element.appendChild(Node); //往element內部最后面添加一個節點,參數是節點類型
elelment.insertBefore(newNode,existingNode); //在element內部的中在existingNode前面插入newNode

5.修改節點:

parent.replaceChild(newNode,oldNode) // 新節點替換舊節點

6.刪除節點:

element.removeChild(Node) //刪除當前節點下指定的子節點,刪除成功返回該被刪除的節點,否則返回null

常用屬性:

1.獲取當前元素的父節點 :

element.parentNode //返回當前元素的父節點對象

2.獲取當前元素的子節點:

element.chlidren //返回當前元素所有子元素節點對象,只返回HTML節點
element.chilidNodes //返回當前元素多有子節點,包括文本,HTML,屬性節點。(回車也會當做一個節點)
element.firstChild //返回當前元素的第一個子節點對象
element.lastChild //返回當前元素的最后一個子節點對象

3.獲取當前元素的同級元素:

element.nextSibling //返回當前元素的下一個同級元素 沒有就返回null
element.previousSibling //返回當前元素上一個同級元素 沒有就返回null

4.獲取當前元素的文本:

element.innerHTML //返回元素的所有文本,包括html代碼
element.innerText //返回當前元素的自身及子代所有文本值,只是文本內容,不包括html代碼

5.獲取當前節點的節點類型:

node.nodeType //返回節點的類型,數字形式(1-12)
常見幾個1:元素節點,2:屬性節點,3:文本節點。

6.設置樣式:

element.style.color=“#eea”; //設置元素的樣式時使用style,這里以設置文字顏色為例

DOM常用操作
JavaScript淺談DOM操作
jQuery之DOM操作

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 目錄 1. 基本概念 1.1 Node類型 DOM1級定義了一個Node接口,該接口由DOM中所有節點類型實現。這...
    王童孟閱讀 436評論 0 1
  • 節點 節點類型 每個節點都有一個 nodeType 屬性,用于表示節點類型。nodeType 屬性返回節點的類型。...
    練曉習閱讀 486評論 0 4
  • 前言:盡管現在有很多優秀的框架,大大簡化了我們的DOM操作,但是我們仍然要學好DOM知識來寫原生JS,從根本上去理...
    長鯨向南閱讀 1,921評論 0 0
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數據類型 5種簡單數據類型:Unde...
    RickCole閱讀 5,161評論 0 21
  • 每天一句:成長的速度取決于在過程中發現和解決問題的速度,最終這是一個量變引發質變的過程; DOM(Document...
    EndEvent閱讀 604評論 0 0