何のを為に生きて行くのか

2019年5月5日星期日

[Back To Basic] Javascript - DOM Node Lists

NodeList 物件(objects) 是一組從document中的節點(nodes)。

NodeList 和 HTMLCollection 幾乎相同。

getElementsByClassName() 有些瀏覽器回傳 NodeList，有些回傳 HTMLCollection
childNodes 回傳 NodeList
querySelectorAll() 大部分瀏覽器回傳 NodeList

NodeList和HTMLCollection的差別

HTMLCollection 可以用 name / index / id 來搜尋；NodeList 只能用 index
NodeList可以包含 attributes nodes 和 text nodes；HTMLCollection不行

HTMLCollection 不是陣列，不能用陣列的方法(methods)

source code

2019年5月2日星期四

[Back To Basic] Javascript - DOM Collections

HTMLCollection 是一個物件(object)，陣列狀的一種型別。

可以用 index 取出 HTMLCollection 中的元素

e.g.
const collection = document.getElementsByTagName('p');
const text = collection[1].textContent; // 取出文字

取得 HTML Collection 數量: collection.length; // 取得長度

HTMLCollection 不是陣列，不能用陣列的方法(methods)

source code

2019年5月1日星期三

[Back To Basic] Javascript - DOM Nodes

新增節點

建立元素
附加元素

const div1 = document.createElement('div'); // 建立元素

const text1 = document.createTextNode('This is my div'); // 建立文字節點

div1.appendChild(text1); // 附加文字

document.body.appendChild(div1); // 附加元素到body

insertBefore()

附加元素都會在最後面，若想新增再最前面可用 insertBefore()

語法: parent.insertBefore(newChild, refChild);

parent: 父節點

newChild: 新增的節點

refChild: 參考的節點

新增的節點，會新增在參考的節點之前

const text2 = document.createTextNode('This is my second setence.');

div1.insertBefore(text2, text1);

刪除節點

刪除元素

div1.removeChild(text1);

刪除時一定要知道"父節點"是誰，很麻煩。

最常使用的解決方式(找出自己的父節點，再刪除自己)：

text1.parentNode.removeChild(text1); // 刪除text1

替換節點: replaceChild()

語法: parent.replaceChild(newChild, refChild);