文章目錄:

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>