JS-網站互動設計程式進化之道-Document Object Model

發表於

Document Object Model

JavaScript&JQuery-網站互動設計程式進化之道-Document Object Model

學習筆記(4)

打造產品很困難。如果它很簡單，那每個人都來做了

引言

原文書名：JavaScript & JQuery: Interactive Front-End Web Development
作者：Jon Duckett
譯者：謝銘倫
出版社：碁峰
出版日期：2017/02/24

五、文件物件模型（Document Object Model , DOM）

節點類型

  • 文件節點：document 節點
  • 標籤元件節點：HTML 標籤，改變結構
  • 屬性節點：改變 class 屬性觸發特效（屬於標籤元件的一部分）
  • 文字節點：text 節點，改變文字內容

存取元件節點

  • 選取一個標籤節點
1
2
3
4
5
// 利用ID唯一值選取元件
var el = document.getElementById('one');

// 用CSS選擇器，回傳第一個符合條件的元件
var el = document.querySelector('li.hot');
  • 選取多個標籤節點
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 選取有指定class值的所有元件
var elements = document.getElementsByClassName('hot'); 

// 選取有指定標籤的所有元件
var elements = document.getElementsByTagName('li');

// 用CSS選擇器，選取所有符合條件的元件（靜態節點串列）
var els = document.querySelectorAll('li.hot');


// 判斷節點串列項目數量
if (elements.length > 2) {
    // 回傳指定節點
    var el = elements[2];
    el.className = 'cool';
    els[1].className = 'cool';
}

// 巡訪節點串列
if (hotItems.length > 0) {
    for (var i = 0; i < hotItems.length; i++) {
        hotItems\[i\].className = 'cool';
    }
}
  • 節點間的選取（DOM巡訪）
1
2
3
4
5
6
7
8
9
10
// 選取目前節點的父節點
var parentItem = startItem.parentNode;

// 選取前或後兄弟節點
var prevItem = startItem.previousSibling;
var nextItem = startItem.nextSibling;

// 選取第一個或最後一個子節點
var firstItem = startItem.firstChild;
var lastItem = startItem.lastChild;

操作元件節點

  • 存取/變更文字節點
1
2
3
4
5
6
// 存取文字節點
var elText  = itemTwo.firstChild.nodeValue;   
// 變更文字內容
elText = elText.replace('pine nuts', 'kale');  
// 設定文字節點至元件中
itemTwo.firstChild.nodeValue = elText;
  • 操作HTML節點內容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 取得子元件及文字內容
var itemContent = firstItem.innerHTML;
// 變更內容
firstItem.innerHTML = '<a href=\\"http://example.org\\">' + itemContent + '</a>';

// 只存取文字內容
var showTextContent = firstItem.textContent;


// DOM操作
// 建立新元件節點
var newEl = document.createElement('li');

// 建立文字節點
var newText = document.createTextNode('quinoa');

// 將文字節點加入元件節點下
newEl.appendChild(newText);

// 找出新節點要加入的位置
var position = document.getElementsByTagName('ul')[0];

// 插入新節點
position.appendChild(newEl);

//找出容納節點(父節點)
var containerEl = removeEl.parentNode;

// 移除元件節點(子節點)
containerEl.removeChild(removeEl);

屬性節點

  • 存取變更屬性值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 檢查屬性值是否存在
if (firstItem.hasAttribute('class')) {
    //取得屬性值
    var attr = firstItem.getAttribute('class');

var firstItem = document.getElementById('one');
//變更class屬性值
firstItem.className = 'complete';

var fourthItem = document.getElementsByTagName('li').item(3);
//加入class屬性值
fourthItem.setAttribute('class', 'cool');

if (firstItem.hasAttribute('class')) {
    //移除class屬性
    firstItem.removeAttribute('class');
}