DOM

DOM 並不是編程語言，是一個文檔對象的模型。該模型獨立於編程語言。

瀏覽器為 JavaScript 提供一系列的接口進而操作 DOM。( Python 中也能夠操作 DOM )

MDN: 文檔對象模型 (DOM)，它提供了對文檔的結構化表述，定義一種方式可以從程序中對結構進行訪問，進而改變結構樣式與內容。DOM 將文檔解析為一個由節點和對象組成的結構集合。

DOM 創建

var h1 = document.createElement('h1');    // 元素
var input = document.createElement('input');    // 元素
var text = document.createTextNode('hello world!');    // 文本

創建最常用的是 document.createElement 和 document.createTextNode 這兩個

JS Bin

DOM 查詢

HTML5 向 Web API 引入了 document.querySelector 和 document.querySelectorAll，功能類似 jQuery 的選擇器。

querySelector 返回第一個滿足條件單個元素

var h1 = document.querySelector('h1');    // node
var container = document.querySelector('.container');    // node
var content = document.querySelector('.container p');    // node

querySelectorAll 返回所有滿足條件的元素

var pTag = document.querySelectorAll('p');    // node
var pAndh1 = document.querySelectorAll('p, h1');    // nodeList

getElementById 返回符合 ID 的元素

var div = document.getElementById('criteo-tags-div');    // node

getElementsByClassName 返回符合Class 的所有元素

var divs = document.getElementsByClassName('ui-widget');    // nodeList

getElementsByTagName 返回符合標籤的所有元素

var wrapper = document.getElementsByTagName('h1');    // nodeList

parentNode 父節點

var div = document.getElementById('criteo-tags-div');
var parent = div.parentNode;    // 返回父節點

childNodes 子節點

var div = document.getElementById('criteo-tags-div');
var children = div.childNodes;    // nodeList

// 查詢子元素
div.getElementsByTagName('script')    // nodeList
// 第一個/最後一個子元素 
div.firstElementChild;
div.lastElementChild;
// 前/後的相鄰元素
div.previousElementSibling;
div.nextElementSibling;

DOM 更改

div.appendChild(node);    // 添加
div.removeChild(node);    // 移除

JS Bin

DOM 屬性操作

var attrs = div.attributes;    // (name, value) NameNodeMap

// 獲取
var classes = div.getAttribute('class');

// 設置
div.setAttribute('class', 'highlight');

// 移除
div.removeAttribute('class');

// 判斷
div.hasAttribute('class');

JS Bin

DOM 事件綁定

var button = document.getElementById('button_1');

button.onclick = function () {
    // dosomething...
};

JS Bin

innerHTML

DOM 元素的 innerHTML, outerHTML, innerText, outerText 屬性可以省去許多操作。

var container = document.getElementById('container');
container.innerText = 'hello world';
container.innerHTML = '<h1>hello world</h1>';

四者之間的區隔如下，比如以這個 HTML 元素舉例 <div><p>Text in DIV</p></div>

• innerHTML 內部 HTML，<p>Text in DIV</p>。
• outerHTML 外部 HTML，<div><p>Text in DIV</p></div>。
• innerText 內部文本，Text in DIV。
• outerText 外部文本，Text in DIV，賦執會把標籤一併賦值過去。

JS Bin