Web開發學習筆記11 — DOM、Attribute與Property的差異

文件物件模型（Document Object Model, DOM）是什麼？

簡單來說就是將每個HTML的標籤都物件化，讓JavaScript可以訪問和更改HTML的元素，舉例來說，我們可以點擊按鈕來改變文字。當網頁載入時，瀏覽器會自動幫我們創立這個頁面的DOM。

為何我們需要DOM？

在以前瀏覽器大亂之時，每家瀏覽器的規則都不一樣，讓工程師非常頭疼，直到W3C訂立出了DOM的標準，讓瀏覽器公司可以依照這個準則去設計瀏覽器。

DOM tree與節點（node）

DOM將標籤定義成物件後，會形成一個樹狀結構，也就是DOM tree。
這是我們的HTML檔：

表示為DOM tree後會變成這樣，每個標籤就是一個節點，最上層的是Document，往下延伸出Element，再往下還有Text與Attribute。

Selecting DOM Elements

getElementById：根據元素ID選取。
getElementsByTagName：根據標籤名稱選取。（例如< p >、< h1 >....）
getElementsByClassName：根據Class選取。
getElementsByName：根據Name選取。
querySelector(selectors)：根據selectors選取。（可使用範圍很廣）

HTMLCollection

HTMLCollection是元素（Element）的集合，並提供可選取集合成員的方法與屬性。
如果我們使用getElementById去選取h1，console中會出現HTMLCollection，它看起來長得有點像Array（有length屬性和長得像index的item()），但實質上它是Object，所以不能用陣列方法處理（像是map()、filter()...），但用for可以遍歷。

NodeList

NodeList也是物件，是節點的集合。不像是HTMLCollection只能儲存Element，NodeList同時包含了Text、Attribute...等等。可以看到圖片上NodeList比HTMLCollection多包涵了6個Text

如何得到HTMLCollection和NodeList物件？

HTMLCollection：children、getElementsByTagName()
NodeList：childNodes、querySelectorAll()

注意：

使用childNodes回傳的NodeList為動態集合（live collection）。
使用querySelectorAll()回傳的NodeList為靜態集合（static collection）。
HTMLCollection具有即時性（live），如果document物件發生改變，HTMLCollection物件也會跟著做變化。

textContent與innerText

textContent與innerText皆是DOM的屬性，兩者名字很像，容易混淆。
差異：

textContent

標準化用法
get所有元素的內容，包含<script>、<style>元素
返回每個節點的元素

innerText

非標準化用法
只顯示“人眼可見”的元素，隱藏的內容不會顯示出來。
在計算中加入了CSS樣式，知道Styling長怎樣，但也會造成應用程序下降

示範textContent與innerText的差異結果，使用以下HTML：

<body>

    <p id='para'>
        <style>
            #para {
                color: blue
            }
        </style>
        HI!!!!!!<br>I'm your new classmate</p>

    <h4>textContent:</h4>
    <textarea id="textContent" rows="4" cols="20" readonly>...</textarea>
    <h4>innerText:</h4>
    <textarea id="innerText" rows="4" cols="20" readonly>...</textarea>

</body>

使用以下JavaScript：

let para = document.querySelector('#para');
let textContent = document.querySelector('#textContent');
let innerText = document.querySelector('#innerText');

//textContent顯示：
textContent.value = para.textContent;
<!--"

            #para {
                color: blue
            }

        HI!!!!!!I'm your new classmate"-->


//innerText顯示：
innerText.value = para.innerText;
<!--"HI!!!!!!
I'm your new classmate"-->

頁面顯示結果：

Attribute與Property的差別

當瀏覽器加載頁面時，它會解析HTML並從中生成DOM property。大多數形況下，HTML attribute會自動成為DOM property。
舉例來說，如果tag為<div class = 'introduction'>，則DOM property也會具有div.class = 'introduction'。
但是必須注意attribute與property的映射不是一對一的，下面會詳細介紹它們的相異之處。

Attributes
Attributes是我們寫在HTML的屬性，像是<div type = 'text'>。
Properties
Properties是存在在DOM objects中的屬性，像是div.type。

Attribute要符合相對應的Element class

當我們的element有符合標準的的attribute時，相對應的property就會生成。但是當element不符合標準時，相對應的property就不會生成。
像是input元素有type這個attribute（符合標準），但body元素沒有type（不符合標準），所以不會生成相應的property。

那我們要如何取得不符合標準的attribute呢？

以下有幾種方法：

el.hasAttribute() - 檢查這個attribute有沒有存在
el.getAttribute() - 取得attribute
el.setAttribute() - 設定attribute的value
el.removeAttribute() - 移除attribute
el.attributes - 將該元素所有attribute的節點返回為一個集合

通常Attribute與Property的之間是同步的

通常Attribute與Property的之間是同步的，意思是說當一個標準的attribute變更，與它相對應的property也會自動更新。
以下範例：

//attribute => property

let p = document.querySelector('p');
p.setAttribute('id', 'paragraph');
p.id;    //"paragraph"

//property => attribute
p.id = 'newParagraph';
p.getAttribute('id');    //"newParagraph"

但也有例外的情況，像input.value只能同步attribute => property。

<input id = 'input' type = 'password'>Password

<script>
//attribute => property
input.setAttribute('value', 'password');
input.value;    //password

//property =X> attribute
input.value = 'newPassword';
input.getAttribute('value');    //password（沒有更新成newPassword）

</script>

DOM property的值通常為string但也有例外的狀況，例如：當利用element.property取得style屬性時是回傳object，另一種情況：用element.getAttribute取得style的屬性時，會回傳string。

<body id="body" style="background-color:#000;">
</body>

<script>
console.log(body.getAttribute('style'));
//background-color:#000;

console.log(document.body.style);
//CSSStyleDeclaration {0: "background-color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
</script>

相同概念的舉例，input.checked的property是回傳boolean值，而使用getAttribute則會回傳空字串。

<input id = "input" type = "checkbox" checked>Check Box

<script>
console.log(input.getAttribute('checked'));  //empty string
console.log(input.checked);   //true
</script>

上述提到property大多為string。但少數情形下，儘管property的type是string，attribute也不一定是string。
經典的例子就是URL，看以下的例子可以發現element.href回傳的都是完整URL。這是因為
W3C的規定，href property一定要是完整形式的連結。

<a href='/Users/teagan/Desktop/DOM.html'>DOM</a>
<a href='#1'>first-paragraph</a>

<script>
//選取第一個a連結
let dom = document.querySelectorAll('a')[0];

console.log(dom.getAttribute('href'));
// /Users/teagan/Desktop/DOM.html

console.log(dom.href);
// file:///Users/teagan/Desktop/DOM.html


//選取第二個a連結
let google = document.querySelectorAll('a')[1];

console.log(google.getAttribute('href'))'
// #1

console.log(google.href);
// file:///Users/teagan/Desktop/DOM.html#1
</script>

非標準屬性、數據

有時我們使用非標準屬性去自定義數據，或是為JavaScript標記（mark）HTML元素。
注意，使用data-*來自定義屬性，這讓JS或CSS更加容易讀取屬性的值。

範例一：取得屬性的值

<body id="body" data-product-category="noodles">

<script>
//使用element.dataset.property取得（注意-(dash)要轉換成camelCase
console.log(document.body.dataset.productCategory)  //noodles

//或使用getAttribute
console.log(document.body.getAttribute('data-product-category'))  //noodles
</script>

範例二：變更字的顏色與內容

<div class="order" data-order-state="new">
  A new order.
</div>
<style>
  .order[data-order-state="new"] {
    color: black;
  }

  .order[data-order-state="pending"] {
    color: green;
  }
</style>
<script>
order.dataset.orderState = "pending";
let padding = document.querySelector('.order');
padding.textContent = 'A padding order';
</script>

執行JS會改變字的顏色與內容：

參考資料：

Web開發學習筆記11 — DOM、Attribute與Property的差異

文件物件模型（Document Object Model, DOM）是什麼？

為何我們需要DOM？

DOM tree與節點（node）

Selecting DOM Elements

HTMLCollection

NodeList

如何得到HTMLCollection和NodeList物件？

textContent與innerText

Attribute與Property的差別

Attribute要符合相對應的Element class

那我們要如何取得不符合標準的attribute呢？

通常Attribute與Property的之間是同步的

非標準屬性、數據

Teagan Hsu

Related Posts

Comments

文件物件模型（Document Object Model, DOM）是什麼？

為何我們需要DOM？

DOM tree與節點（node）

Selecting DOM Elements

HTMLCollection

NodeList

如何得到HTMLCollection和NodeList物件？

textContent與innerText

Attribute與Property的差別

Attribute要符合相對應的Element class

那我們要如何取得不符合標準的attribute呢？

通常Attribute與Property的之間是同步的

非標準屬性、數據

Teagan Hsu

Related Posts

[JS] 迴圈: while loop 、 for loop 結構與執行流程

JS30 Day 12 筆記

[React] 一些 Hooks 的分類

Comments