文章目錄:

1.DOM簡介
2.獲取元素
???? ?? getElementByld()
???? ?? getElementsByTagName()
???? ?? getElementsByClassName()
???? ?? querySelector()和querySelectorAll()
???? ?? getElementsByName()
???? ?? 選擇title元素和body元素
3.創建元素
4.插入元素
???? ?? appendChild()
???? ?? insertBefore()
5.刪除元素
6.復制元素
7.替換元素
8.HTML屬性操作(對象屬性)
???? ?? 獲取HTML屬性值
???? ?? 設置HTML屬性值
9.HTML屬性操作(對象方法)
???? ?? getAttribute()
???? ?? setAttribute()
???? ?? removeAttribute()
???? ?? hasAttribute()
10.CSS屬性操作
???? ?? 獲取CSS屬性值
???? ?? 設置單一CSS屬性
???? ?? 設置多個CSS屬性
11.DOM遍歷
???? ?? 查找父元素
???? ?? 查找子元素
???? ?? 查找兄弟元素
12.innerHTML和innerText

1.DOM簡介

節點和元素的概念解析:

每一個元素是一個節點，每一個節點看成一個對象

我們操作元素的時候實際上是把元素看成一個對象，然后對這個對象的屬性和方法進行相關的操作

節點是包含元素的

每一個元素是一個節點，這個節點稱為元素節點

2.獲取元素

2.1獲取元素概述

獲取元素其實就是，獲取元素節點，對于一個頁面，我們想要對某個元素進行操作，就必須通過一定的方式來獲取該元素，只有獲取到了才能對其進行相應的操作。

2.2getElementByld()

getElementByld()：通過id來選擇元素
語法：document.getElementById("id名")

例子：

getElementByld()：不可以操作動態的DOM，如下：

2.2getElementsByTagName()

getElementsByTagName():通過標簽名來選擇元素
語法：document.getElementsByTagName("標簽名")

我們可以看到我們并沒有按照標準的語法來寫這段代碼，那么上面的例子是不是可以這么寫呢

當然可以但是我們需要知道兩者的區別，第一種寫法的意思是獲取的是id為list的ul元素下的所有li元素(以偽數組的形式)，第二種寫法的意思是獲取整個HTML頁面的所有li元素(以偽數組的形式)

注：偽數組的形式指的是只能使用length和下標的方式，但是對于數組的其他方法是無法使用的

getElementsByTagName()能操作動態創建的DOM，如下：

2.3getElementsByClassName()

getElementsByClassName()：通過class來選擇元素
語法：document.getElementsByClassName("類名")

2.4querySelector()和querySelectorAll()

querySelector()和querySelectorAll()：通過選擇器的方式來獲取所需要的元素
querySelector()：選取滿足選擇條件的第一個元素
querySelectorAll()：選取滿足條件的所有元素
語法：
document.querSelector("選擇器“)
document.querySelectorAll("選擇器")
選擇器的寫法和CSS完全一致

2.5getElementsByName()

getElementsByName()：表單元素一般有一個其他元素都沒有的name屬性，如果想要通過name屬性來獲取表單元素，我們可以使用getElementsByName()來實現。一般的getElementsByName()只用于表單元素，且只用于單選按鈕和復選框
語法：document.getElementsByName("name名")

例子1：

例子2：

2.6.選擇title元素和body元素

由于一個頁面只有一個title元素和一個body元素所以專門提供兩個方便的方法進行選擇
語法：document.title和document.body

例子：

3.創建元素

例子1：
對上述例子分析：

例子2創建帶屬性的元素：

例子3：動態創建圖片：

例子4：創建多個元素：

4.插入元素

4.1appendChild()

appendChild()：把一個新的元素插入到父元素的內部子元素的末尾
語法：A.appendChild(B)：在沒有特殊說明的情況下，A表示父元素，B表示動態創建好的新元素

例子：

4.2insertBefore()

insertBefore()：將一個新的元素插入到父元素的某一個子元素之前
語法：A.insertBefore(B,ref)：A表示父元素，B表示子元素，ref表示指定子元素

例子：

5.刪除元素

語法：A.removeChild(B)：刪除父元素下的子元素，A表示父元素,B表示父元素內的某個子元素

例子1：刪除最后一個子元素：

例子2：刪除整個列表：

6.復制元素

語法：obj.cloneNode(bool)：復制元素
obj表示被復制的元素，bool表示一個布爾值
bool取1或者true表示復制元素本身以及該元素下的所有子元素
0或者false表示僅僅復制元素本身，不復制該元素下的所有子元素

例子：

7.替換元素

語法：A.replaceChild(new,old)
A表示父元素，new表示新子元素，old表示舊子元素

演示一下上述的例子：

8.HTML屬性操作(對象屬性)

8.1HTML屬性操作(對象屬性)簡介

8.2獲取HTML屬性值

語法：obj.attr
obj是元素名，是一個DOM對象，所謂的DOM對象就是使用getElementByld()和getElementsByTagName()等方法獲取的元素節點，attr是一個屬性名

例子1：獲取靜態HTML中的屬性值

例子2：獲取動態DOM中的屬性值

例子3：獲取文本框的值

例子4：獲取單選框的值

例子5：獲取復選框的值
例子6：獲取下拉菜單的值

8.3設置HTML屬性值

語法：obj.attr="值"
obj是元素名是一個DOM對象，attr是屬性名

例子1：

例子2：

我們點擊修改后

9.HTML屬性操作(對象方法)

9.1getAttribute()

語法：obj.getAttribute(“attr”)：獲取某個元素屬性的值
obj是元素名，attr是屬性名。注意它只能有一個參數且特別注意attr要用引號
其實obj.getAttributr("atttr")和obj.attr獲取屬性值的方式是等價的都能獲取靜態的HTML屬性值和動態的DOM屬性值

例子1：獲取固有屬性值

例子2：獲取自定義屬性值

看到彈出的結果，可能和我們想的預期的不一樣，那么這是為啥呢，其實這個data是我們自定義的屬性，不是用戶自帶的，我們使用obj.attr是無法獲取自定義屬性的，那么這時候只能使用的我們的getAttribute()，如下：

9.2setAttribute()

語法：obj.setAttribute(“attr”,"值")：設置某個元素某個屬性的值
obj是元素名，attr是屬性名第一個參數是屬性名，第二個參數是要設置的屬性值，同樣的一下兩個也是等價的
obj.setAttribute(“attr”,"值")
obj.attr="值"

例子：

9.3removeAttribute()

語法：obj.removeAttribute()：刪除某個屬性

例子1：

例子2：

9.4hasAttribute()

語法：obj.hasAttribute()：判斷元素是否包含某一個屬性，包含返回true不包含返回false

10.CSS屬性操作

10.1獲取CSS屬性值

語法：getComputedStyle(obj).attr或getComputedStyle(obj)["attr"]
obj代表DOM對象，通過getElementByld()和getElementsByTagName()等方法獲取，attr代表表示CSS屬性名，屬性名使用的是駝峰原則，比如我們的CSS屬性字體大小是font-size，當我們用js來獲得屬性值的時候要這么寫fontSize，其他的類似。

下面舉個例子：

10.2設置單一CSS屬性值

1.設置一個屬性值：obj.style.attr="值"等價于obj.style["attr"]="值"，屬性名使用駝峰原則

例子1：設置一個屬性值

例子2：設置符合屬性值

由于我們的attr和val都是我們輸入的字符串所以不能用obj.style.attr來設置，而是用obj.style[attr]

10.3設置多個CSS屬性值

語法：obj.style.cssText="值",注意這里再使用的時候就不再使用駝峰原則了

例子1：

當我在文本框中輸入：height:50px;width:50px;background-color:red;就變成了：

例子2：

10.4一個值得思考的問題：

我們在獲取CSS屬性值的時候使用obj.style.attr或者obj.style["attr"]不就行了，為啥要使用getComputedStyle()呢，看下面一段代碼：

為啥？？？？獲取寬度失敗。原因是因為obj.style.attr只可以獲取元素style屬性中設置的CSS屬性值
對于內部或者外部樣式是沒有辦法獲取的，下面行內樣式就能成功獲取

getComputedStyle()可以獲取內部和外部，行內式

11.DOM遍歷

11.1查找父元素

語法：obj.parentNode：獲取某個元素的父元素
同樣的obj是DOM對象

例子(代碼太長顯示不完就直接上代碼了)：

<!DOCTYPE html> <html> <head><title></title><meta charset="utf-8" /><style type="text/css">table{border-collapse:collapse;}table,tr,td{border:1px solid gray;}</style><script>window.onload = function () {var oTd = document.getElementsByTagName("td");//遍歷每一個td元素for (var i = 0; i < oTd.length; i++) {//為每一個td元素添加點擊事件oTd[i].onclick = function () {//獲得當前td的父元素（即tr）var oParent = this.parentNode;//為當前td的父元素添加樣式oParent.style.color = "white";oParent.style.backgroundColor = "red";};}}</script> </head> <body><table><caption>考試成績表</caption><tr><td>小明</td><td>80</td><td>80</td><td>80</td></tr><tr><td>小紅</td><td>90</td><td>90</td><td>90</td></tr><tr><td>小杰</td><td>100</td><td>100</td><td>100</td></tr></table> </body> </html>

沒點擊之前：

點擊之后：

11.2查找子元素

firstELementChild：獲取第一個子元素節點
lastELementChild：獲取最后一個子元素節點

例子1：childNodes與children的比較

例子分析：為啥第一個長度為7,毋庸置疑元素節點有三個，還有四個空白節點，由于每個ul和li,每個li和li之間有一個空格，js會把這些空格當成空白節點，所以長度為7

例子2：

上面代碼我們在進行刪除的時候，我們發現，我們想要刪除一個li元素，必須點兩次刪除。那肯定是空白文檔搞得鬼，我們可以使用使用nodeType屬性來判斷,這個屬性是判斷節點類型的，每一個類型的節點nodeType屬性值不同

節點類型nodeType值

元素節點	1
屬性節點	2
文本節點	3

那么我們每次刪除的時候，先判斷節點類型，是文本節點(空白節點屬于文本節點)就刪除兩次，是元素節點就刪除一次，如下(點擊一次就能刪除)：

11.3查找兄弟元素

previousSibling：查找前一個兄弟節點
nextSibling：查找后一個兄弟節點
previousElementSibling：查找前一個兄弟元素節點
nextElementSlibling：查找后一個兄弟元素節點

例子：

12.innerHTML和innerText

innerHTML：獲取和設置一個元素的內部元素
innerText：獲取和設置一個元素的內部文本

例子1:

如果要用innerHTML就比較簡單了(本質就是用innerHTML設置一個內部元素)

innerHTML和innerText到底是獲取啥的呢，看例子2：

最后一個例子：

我們可以看到innerHTML后面的字符串既然可以換行寫，一般情況下是不能換行的，在innerHTML中要把字符串截斷分行顯示，在每次截斷的地方加一個\就行

最后我們再把innerHTML和innerText所表示的內容再舉幾個例子：

總結

以上是生活随笔為你收集整理的一文搞定JS中的DOM基础与进阶的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。