文檔對象模型（Document Object Model，簡稱DOM）

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充标志語言的标準接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的标準模型就稱為DOM。

1、擷取節點

1、節點

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>111111</p>
    <ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>

</html>

節點樹（家譜）

2、擷取子節點

元素.childNodes 在标準浏覽器下，傳回的可能有文本節點，在IE8及以下，隻傳回元素節點
元素.children 隻傳回元素節點（推薦）

<ul id="list">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

var ul = document.getElementById('list');
// var li = ul.childNodes;
var li = ul.children;
console.log(li);

3、節點的基本屬性

節點基本屬性有nodeType(節點類型), nodeName(節點名), nodeValue(節點内容)

var p = document.querySelector('p');
var ul = document.querySelector('ul');
var li = ul.childNodes;

// 元素.nodeType  元素節點1   屬性節點2   文本節點3    文檔節點9
console.log(p.nodeType); // 1 元素節點
for (var i = 0; i < li.length; i++) {
    console.log(li[i].nodeType);
}

// ----------------------------
// 元素.nodeName   元素節點，傳回大寫的标簽名   文本節點，傳回#text
console.log(p.nodeName); // P
console.log(ul.nodeName); // UL
for (var i = 0; i < li.length; i++) {
    console.log(li[i].nodeName);
}

// ----------------------------------
// 元素.nodeValue
// 隻有文本節點才有nodeValue
console.log(p.nodeValue); // null
console.log(p.childNodes[0].nodeValue); // 111111

4、擷取父節點

元素.parentNode 父節點(沒有相容性問題)
元素.offsetParent 傳回離它最近的有定位屬性的父級，如果沒有定位的父級，則傳回body

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

var box3 = document.getElementById('box3');
console.log(box3.parentNode);

console.log(box3.offsetParent);

5、其它節點

<ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>

var ul = document.getElementsByTagName('ul')[0];

// 通過父級，擷取第一個子節點
// 父級.firstChild            在标準浏覽器下，有可能傳回的是一個文本節點，在IE8及以下，傳回的是一個元素節點
// 父級.firstElementChild     在标準浏覽器下，傳回的是第一個元素節點，在IE8及以下傳回undefined

// console.log(ul.firstChild);
// console.log(ul.firstElementChild);
var first = ul.firstElementChild || ul.firstChild;
first.style.background = 'red';

// --------------------------------
// 通過父級，擷取最後一個子元素
// 父級.lastChild
// 父級.lastElementChild
var last = ul.lastElementChild || ul.lastChild;
last.style.background = 'green';

// ----------------------------------
// 擷取元素的下一個兄弟節點
// 元素.nextSibling
// 元素.nextElementSibling
var next = first.nextElementSibling || first.nextSibling;
next.style.background = 'yellow';

// 某個元素的上一個兄弟節點
// 元素.previousSibling
// 元素.previousElementSibling
var prev = last.previousElementSibling || last.previousSibling;
prev.style.background = 'pink';

6、屬性操作

attribute可以操作自定義的屬性（在标簽上可見），也可以操作原生的屬性

<p id="txt" title="我就是我，不一樣的煙火" abc="小鄧子">王老二</p>

var txt = document.getElementById('txt');

// 點的方式
console.log(txt.title);
txt.title = '帥哥們舉個手';

// 中括号   
console.log(txt['title']);
txt['title'] = '美女們舉個手';
// 比點的形式強大，還可以接收變量
var t = 'title';
console.log(txt[t]);
txt[t] = '再次升華';

// -------------------------------
// 點和中括号的形式，隻能操作原生的屬性，不能操作自定義的屬性
console.log(txt.abc); // undefined

// -----------------------------
// attribute可以操作自定義的屬性（在标簽上可見），也可以操作原生的屬性
// 設定：元素.setAttribute(屬性名, 值);
// 擷取：元素.getAttribute(屬性名);
// 删除：元素.removeAttribute(屬性名);
console.log(txt.getAttribute('abc'));
txt.setAttribute('abc', '俊男靓女');
txt.removeAttribute('abc');

2、操作節點

1、建立節點

建立标簽節點：document.createElement(标簽名);
建立文本節點：document.createTextNode(文本);

2、添加節點

添加節點：父級.appendChild(子級); 将子級添加到父級的最後

var div = document.createElement('div'); // 建立div
// var txt = document.createTextNode('我就是我'); // 建立文本
// div.appendChild(txt); // 文本添加到div中
// body.appendChild(div); // div添加到body中


var div = document.createElement('div'); // 建立div
div.innerHTML = '我是新來的';
body.appendChild(div); // div添加到body中

案例：留言

3、插入節點

插入節點：父元素.insertBefore(要插入的節點, 參考的節點)

<ul>
    <li>吃飯</li>
    <li class="ab">睡覺</li>
    <li>打豆豆</li>
</ul>

var ab = document.querySelector('.ab');

var li = document.createElement('li');
li.innerHTML = '刷牙';

ab.parentNode.insertBefore(li, ab);

4、删除節點

删除節點：父級.removeChild(被删除的元素);

<ul>
    <li>吃飯</li>
    <li>睡覺</li>
    <li>打豆豆</li>
</ul>

var ul = document.getElementsByTagName('ul')[0];
var li = document.getElementsByTagName('li');

for (var i = 0; i < li.length; i++) {
    li[i].onclick = function () {
        ul.removeChild(this); // 删除
    }
}

5、替換節點

替換節點：父元素.replaceChild(新的節點, 被替換的節點);

<p>小鄧</p>
<button>替換</button>
<div>老王</div>

var p = document.querySelector('p');
var button = document.querySelector('button');
var div = document.querySelector('div');

button.onclick = function () {
    document.body.replaceChild(p, div);
}

6、複制節點(克隆)

複制節點：被複制的節點.cloneNode(是否克隆子孫節點);

<button>複制</button>
<ul>
    <li>吃飯</li>
    <li>睡覺</li>
    <li>打豆豆</li>
</ul>

window.onload = function () {
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');

    btn.onclick = function () {
        var o = ul.cloneNode(true);
        document.body.appendChild(o);
    }
}

3、表格操作

DOM提供了可以簡便快速擷取表格元素的屬性，先擷取到表格table對象(oTab)，再通過table擷取裡面的元素，再通過 table 擷取裡面的元素

比如擷取到了表格table為oTab：

thead-----oTab.tHead 一個

tfoot------oTab.tFoot 一個

Tbody----oTab.tBodies 一堆

tr----------oTab.rows 一堆

td----------oTab.tr.cells 一堆(必須通過tr來擷取)

var box = document.getElementById('box');

var head = box.tHead; // 擷取表格頭 隻有一個
head.style.backgroundColor = 'pink';

var foot = box.tFoot; // 擷取表格尾 隻有一個
foot.style.backgroundColor = 'green';

var body = box.tBodies; // 擷取表格體 多個（一個組）
// console.log(body);
body[0].style.backgroundColor = '#ccc';

var tr = body[0].rows; // 擷取表格行 多個（一個組）
// console.log(tr);
tr[0].style.backgroundColor = '#333';

var td = tr[0].cells; // 擷取某一行下的單元格  多個（一個組）
// console.log(td);
td[1].style.backgroundColor = 'red';