Web開發學習筆記13 — DOM節點操作屬性與方法

#DOM Methods #DOM Property

Posted by Teagan Hsu on 2020-12-30

Properties

需要注意是回傳節點還是元素，如果是回傳元素則可以使用el.style改變CSS style。

  • .parentNode - 回傳此節點的父節點
  • .childNodes - 回傳此節點的子節點
  • .parentElement - 回傳此節點的父元素
  • .nextSibling - 回傳此節點的下一個sibling節點
  • .previousSibling - 回傳此節點的前一個sibling節點
  • .nextElementSibling - 回傳此節點的下一個sibling元素
  • .previousElementSibling - 回傳此節點的前一個sibling元素

Methods

插入DOM Node方法：

  • ParentNode.append()（IE不支持） -
    在此ParentNode的末尾子節點後，插入節點物件或DOMString物件

  • ParentNode.prepend()（IE不支持） -
    在此ParentNode中的最前端子節點前，插入節點物件或DOMString物件

  • Node.appendChild() -
    在此元素的子節點末尾，插入一個節點。

  • Node.insertBefore() -
    在參考節點前插入一個擁有指定父節點的子節點。

  • Element.insertAdjacentHTML() -
    插入HTML字串到DOM節點的特定位置。

  • Element.insertAdjacentElement() -
    插入element到DOM節點的特定位置。

➤ ParentNode.append()

參數可以輸入數個node或DOMStrings。
語法：

ParentNode.append(...nodes Or DOMStrings)

範例：將連結句子"Google"改成"Google Link"（不使用textContent的情況下）

let href = document.querySelector('#href');
href.append(' Link');

➤ ParentNode.prepend()

參數可以輸入數個node或DOMStrings。
語法：

ParentNode.prepend(...nodes Or DOMStrings);

範例：將連結句子"Google"改成"Go to Google"，"Go to"要是h1大小。

let h1 = document.createElement('h1');
h1.textContent = 'Go to'
let href = document.querySelector('#href');
href.prepend(h1);

➤ ParentNode.appendChild()

參數只能輸入一個節點。
語法：

element.appendChild(a Child Node)

範例：增加新的CSS style，將連結顏色改為tomato、粗細900。

let style = document.createElement('style');
style.innerHTML = `#href {color:tomato; font-weight:900}`
document.head.appendChild(style)

➤ Node.insertBefore()

需要注意，如果不是用createElement()新建立一個node，而是用舊有node作為newNode的話，node不會被複製，而是會位移到新位置。
語法：

parentNode.insertBefore(newNode, referenceNode);

以下所有範例使用的HTML檔：

<body>
  <ul>
   <li><a id="google" href="https://www.google.com/">Google</a></li>
   <li><a id="youtube" href="https://www.youtube.com/">Youtube</a></li>
  </ul>
</body>

範例：將"Youtube"此行連結移至"Google"前

//Select parentNode、google、youtube
let parentNode = document.querySelector('ul');
let google = document.querySelectorAll('li')[0];
let youtube = document.querySelectorAll('li')[1];

//將youtube插入google之前
parentNode.insertBefore(youtube, google);

//youtube被位移到google之前

➤ Element.insertAdjacentHTML()

➤ Element.insertAdjacentElement()

//Element.insertAdjacentHTML()
element.insertAdjacentHTML(position, text);

//Element.insertAdjacentElement()
element.insertAdjacentElement(position, element);

參數：

  • position
    • beforebegin: 在元素之前。
    • afterend: 在元素之後。
    • afterbegin: 在元素裡面，第一個子元素之前。
    • beforeend: 在元素裡面，最後一個子元素之後。

使用Element.insertAdjacentHTML()

範例：在google列點後插入一個twitter連結；在youtube後插入一個fb連結

let google = document.querySelectorAll('li')[0];

//Create text
let twitter = '<li><a id="twitter" href="https://twitter.com/">Twitter</a></li>'
let fb = '<li><a id="fb" href="https://www.facebook.com/">Facebook</a></li>'

//Use insertAdjacentHTML()
google.insertAdjacentHTML('afterend', twitter);

//Select element(因為前面增加新的li)
let youtube = document.querySelectorAll('li')[2];

//Use insertAdjacentHTML()
youtube.insertAdjacentHTML('afterend', fb);

使用Element.insertAdjacentElement()

範例：順序由上到下改為Twitter => Google => Facebook => Youtube

//Select element
let google = document.querySelector('li');

//Create element
let twitter = document.createElement('li');
twitter.innerHTML = '<a id="twitter" href="https://twitter.com/">Twitter</a>'

//Use insertAdjacentElement()
google.insertAdjacentElement('beforebegin', twitter)

//Select element
let ul = document.querySelector('ul');

//Create element
let fb = document.createElement('li');
fb.innerHTML = '<a id="fb" href="https://www.facebook.com/">Facebook</a>'

//Use insertAdjacentElement()
ul.insertAdjacentElement('beforeend', fb)

Node.appendChild()與ParentNode.append()的差異

  • Node.appendChild()目前各瀏覽器都有支援，而IE目前不支援ParentNode.append()。
  • Node.appendChild()參數只接受節點物件，ParentNode.append()還額外接受DOMString物件。
  • Node.appendChild()會返回節點物件，ParentNode.append()則不會回傳值。
  • Node.appendChild()只能附加一個節點，而ParentNode.append()則可一次附加多個節點與字串。

複製DOM Node方法：

  • Node.cloneNode() -
    在此元素的子節點末尾，插入一個節點。

語法：

let newClone = node.cloneNode([deep])
  • deep
    • true: 深層複製，此節點的後代節點都會一起被複製
    • false: 只複製此節點本身。false為預設參數。

範例：複製ul並插入在原ul底下

//select the ul element
let ul = document.querySelector('ul');

//clone the node
let cloneNode = ul.cloneNode(true);

//change id（因為複製，會連原本的id都複製，但每個id的名字都要不同）
cloneNode.id = 'link-2';

//insert the node
document.body.appendChild(cloneNode);

移除DOM Node方法：

  • Node.removeChild() -
    從DOM中移除一個子節點，並返回被移除的節點。

  • ChildNode.remove() -
    從DOM中移除物件（IE不支援，萬惡的IE....）

➤ Node.removeChild()

➤ ChildNode.remove()

語法：

//Node.removeChild()
node.removeChild(child);

//ChildNode.remove()
node.remove();

使用Node.removeChild()

範例：移除第一個li

//注意：因為移除的是子節點，所以前面的node要先返回父元素/父節點
let firstLink = document.querySelector('li');
firstLink.parentElement.removeChild(firstLink)

使用ChildNode.remove()

範例：移除第二個li

let secondLink = document.querySelectorAll('li')[1];
secondLink.remove(secondLink);

替換DOM Node方法：

  • ChildNode.replaceWith() -
    將子節點替換成其他node或DOMString

➤ ChildNode.replaceWith()

語法：

ChildNode.replaceWith((Node or DOMString)... nodes);

範例：把第一個li替換成空白li

let firstLink = document.querySelector('li');
let emptyLi = document.createElement('li');
firstLink.replaceWith(emptyLi)

參考資料

  1. ParentNode.append() - MDN
  2. Node.appendChild() - MDN
  3. Element.insertAdjacentElement() - MDN
  4. Node.insertBefore() - MDN
  5. ChildNode.remove() - MDN
  6. Node.removeChild() - MDN
  7. ChildNode.replaceWith() - MDN

#DOM Methods #DOM Property

Teagan Hsu
大學生




Related Posts

留言板、新增功能篇--(編輯、刪除)

留言板、新增功能篇--(編輯、刪除)

 s103071049
callback function

callback function

 tzutzu858
Day 8 - HTML Canvas

Day 8 - HTML Canvas

 hoyi-23

Comments