JavaScirpt(JS)——DOM文檔對象模型

一、HTML DOM介紹

HTML DOM 是 W3C 标準（是 HTML 文檔對象模型的英文縮寫，Document Object Model for HTML）。
HTML DOM 定義了用于 HTML 的一系列标準的對象，以及通路和處理 HTML 文檔的标準方法。
HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹)。

　　通過 DOM，可以通路所有的 HTML 元素，連同它們所包含的文本和屬性。可以對其中的内容進行修改和删除，同時也可以建立新的元素。

　　HTML DOM 獨立于平台和程式設計語言。它可被任何程式設計語言諸如 Java、JavaScript 和 VBScript 使用。

二、DOM樹

　　通過畫dom樹可以展示文檔中各個對象間的關系，用于對象的導航。

三、DOM節點——節點類型

　　HTML 文檔中的每個成分都是一個節點。

DOM 是這樣規定的：

　　1、整個文檔是一個文檔節點

　　2、每個 HTML 标簽是一個元素節點

　　3、包含在 HTML 元素中的文本是文本節點

　　4、每一個 HTML 屬性是一個屬性節點

　　其中，document與element節點是重點。

四、DOM節點——節點關系

　　節點樹中的節點彼此擁有層級關系。

　　父(parent),子(child)和同胞(sibling)等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

注意：

在節點樹中，頂端節點被稱為根（root）
每個節點都有父節點（除了根）
一個節點可擁有任意數量的孩子
同胞是擁有相同父節點的節點

　　下面的圖檔展示了節點樹的一部分，以及節點之間的關系：

五、DOM 節點——節點查找

　　方式一：直接查找節點

//通過id查找，拿到的是一個标簽對象
var oDiv = document.getElementById('box');
//通過類名查找，得到的是一個數組裡存放的标簽
var oDiv = document.getElementsByClassName('.box')[0];
//通過标簽名查找，得到的也是一個數組
var oDiv = document.getElementsByTagName('div')[0];
//通過name屬性去查找，得到的也是一個數組
var oDiv = document.getElementsByName('yuan');

　　方式二：導航查找節點：通過某一個标簽的位置去查找另一個标簽

parentElement           // 父節點标簽元素
children                // 所有子标簽
firstElementChild       // 第一個子标簽元素
lastElementChild        // 最後一個子标簽元素
nextElementtSibling     // 下一個兄弟标簽元素
previousElementSibling  // 上一個兄弟标簽元素

六、DOM節點——節點操作

1、建立節點

　　document.createElement(标簽名) ：在js中動态建立一個html标簽

// createElement() 建立節點
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');

2、添加節點

　　容器.appendChild(新元素)：把目前建立的新元素添加到容器的末尾

　　容器.insertBefore(新元素, 老元素)：在目前容器中，把新元素添加到老元素之前

// DOM元素用appendChild()追加子節點
oDiv.appendChild(oP);   // 添加子節點
oP.appendChild(oSpan);

// 把增加的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點);

3、删除節點

　　容器.removeChild(元素)：獲得要删除的元素，通過父元素調用删除。

oSpan.onclick = function () {
    // removeChild 删除建立的對象
    oDiv.parentNode.removeChild(oDiv);
}

4、替換節點

　　容器.replaceChild(新元素, 老元素)：在目前容器中，拿新元素替換老元素。

somenode.replaceChild(newnode, 某個節點);

5、複制節點

　　元素.cloneNode(false/true)：把原有元素克隆一份一模一樣的。

　　false：隻克隆目前元素本身。

　　true：深度克隆，把目前元素及其後代都進行克隆

<style>
    .box{
        width: 100px;
        height: 100px;
        background: #f50;
        margin-top: 10px;
    }
</style>
<div class="box" id="box1">1</div>
<div class="box" id="box2"><span>1</span>2</div>
<script>
    var box1 = document.getElementById('box1'),
        box2 = document.getElementById('box2');
    document.body.removeChild(box1);    // -> 删除元素,移除盒子
    document.body.appendChild(box2.cloneNode()) // -> 克隆盒子并添加到body末尾,但不克隆子元素及内容
    document.body.appendChild(box2.cloneNode(true)) // -> 克隆元素并添加到body末尾,克隆子元素及内容(即使是深度克隆也隻是克隆内容和結構,并不會克隆盒子上發生的事件)
</script>

6、節點屬性操作

（1）擷取文本節點的值：

innerText：不管你是指派還是取值，隻能識别純文字
innerHtml：既可以識别純文字，也可以識别标簽

// 設定oH2的内容，p标簽會被解析成p元素顯示到HTML頁面中
oH2.innerHTML = '<p>嘿 sariy</p>';

// 隻設定元素内的文本内容，div标簽将被當做文本元素
oH2.innerText = '<div>嘿嘿</div>'

// 将建立好的元素節點添加到指定元素所有内容的後面
oDiv.appendChild(oH2);
// 擷取元素節點裡的所有内容 包括标簽和文本
console.log(oDiv.innerHTML);
// 隻擷取元素内的文本内容，html标簽将被忽略
console.log(oDiv.innerText);

（2）屬性（Attribute）操作：

　　給目前元素設定/擷取/移除屬性的(一般操作的都是他的自定義屬性)。

//擷取标簽屬性
console.log(oH2.getAttribute('class'));//wusir2

//設定标簽屬性
oA.setAttribute('href','https://www.luffycity.com');

//删除元素上的屬性
oA.removeAttribute('href');

　　getAttribute 可以操作其他的，但是不可以操作class

<body><div class="c1" id="d1">DIV</div>
<script>
    var ele = document.getElementsByClassName('c1')[0];
    ele.id='d2';//修改id
    console.log(ele);

//取屬性值 :
//    方式一
    console.log(ele.getAttribute('id'));
//    方式二
    console.log(ele.id);
/ 屬性指派
//    方式一
    ele.setAttribute('id','d3');
    console.log(ele);
//    方式二
    ele.id = 'd3';
    console.log(ele);

（3）value屬性可設定或傳回單選按鈕的value屬性的值

// 文法
radioObject.value=sometext

function check(browser) {
    document.getElementById("answer").value=browser
}

（4）關于class的操作

var ele = document.getElementsByClassName('c1')[0];
console.log(ele.className); //列印類的名字
     
ele.classList.add('hide');
console.log(ele); //<div class="c1 hide" id="d1">

ele.classList.remove('hide');//吧添加的remove移除了
console.log(ele)

（5）改變css樣式

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

七、DOM Event對象

　　Event 對象代表事件的狀态，比如事件在其中發生的元素、鍵盤按鍵的狀态、滑鼠的位置、滑鼠按鈕的狀态。

　　事件通常與函數結合使用，函數不會在事件發生前被執行！

事件句柄（Event Handlers）

　　HTML 4.0 的新特性之一是能夠使 HTML 事件觸發浏覽器中的行為，比如當使用者點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性清單，可将之插入 HTML 标簽以定義事件的行為。

屬性	此事件發生在何時...	IE	F	O	W3C
onabort	圖像的加載被中斷。	4	1	9	Yes
onblur	元素失去焦點。	3
onchange	域的内容被改變。
onclick	當使用者點選某個對象時調用的事件句柄。
ondblclick	當使用者輕按兩下某個對象時調用的事件句柄。
onerror	在加載文檔或圖像時發生錯誤。
onfocus	元素獲得焦點。
onkeydown	某個鍵盤按鍵被按下。			No
onkeypress	某個鍵盤按鍵被按下并松開。
onkeyup	某個鍵盤按鍵被松開。
onload	一張頁面或一幅圖像完成加載。
onmousedown	滑鼠按鈕被按下。
onmousemove	滑鼠被移動。
onmouseout	滑鼠從某元素移開。
onmouseover	滑鼠移到某元素之上。
onmouseup	滑鼠按鍵被松開。
onreset	重置按鈕被點選。
onresize	視窗或架構被重新調整大小。
onselect	文本被選中。
onsubmit	确認按鈕被點選。
onunload	使用者退出頁面。