跳至主要内容

[WebAPIs] JavaScript DOM Element Manipulation

keywords: DOM, element​

選取 DOM 元素​

document.querySelector('<CSS Selector>'); // 以 CSS 選取器選取單一元素
document.querySelectorAll('<CSS Selector>'); // 以 CSS 選取器選取所有符合的元素

// 選取鄰近元素
nextNode = node.nextSibling;
previousNode = node.previousSibling;

// 選取父層元素
parentNode = node.parentNode;

// 選取子層元素
childrenNodes = node.children;

取得同層的其他元素（get all sibling elements）​

See the Pen [JS] Get all sibling elements by PJCHEN (@PJCHENder) on CodePen.

建立 DOM Element​

// 建立 DOM 元素
document.createDocumentFragment()
document.createTextNode('hello world')
document.createElement('div');

// 建立完整的 DOM 元素
var newElement = document.createElement('div');
newElement.className = 'className';
newElement.textContent = 'put text content here';
newElement.style.textAlign = 'center’;

// 建立 img 元素
var Img = new Image()
Img.src = "./images/foo.png"
newElement.appendChild('Img')

插入移除 DOM Element​

// 插入 DOM 元素
parentNode.prepend(newNode); //  在 parentNode 裡插入一個 newNode（可以是字串）
parentNode.append(newNode); //  在 parentNode 裡插入一個 newNode（可以是字串）
parentNode.appendChild(newNode); //  在 parentNode 裡插入一個 newNode（不能是字串）
parentNode.insertBefore(newNode, referenceNode); //  在 parentNode 裡的 referenceNode 之前插入一個 newNode (newNode 如果是已經存在於 DOM 上的元素，則會用搬移的)

// 複製 DOM 元素
const newElement = oneElement.cloneNode();

// 移除 DOM 元素，需要參照到父層
ParentNode.removeChild(element1); // 移除 DOM，需要參照到親元素
element1.parentNode.removeChild(element1); // 自己移除自己
HTMLSelectElement.remove(); // 選到某個 element 後，移除

// 沒有 insertAfter ，但是可以透過 nextSibling 達到
parentDiv.insertBefore(sp1, sp2.nextSibling);

// 在 firstChild element 前插入元素，可以透過 firstChild 達到
parentElement.insertBefore(newElement, sp2.firstChild);

添加元素內容​

Node.textContent; // 在元素內部插入內容（會覆蓋掉原本的內容）
el.innerHTML;

targetElement.insertAdjacentXXX​

在 element 中插入 HTML, Element 或 Text：

/**
 * 不會蓋掉原本的內容的方式插入內容
 * position: beforebegin, afterbegin, beforeend, afterend
 **/
element.insertAdjacentHTML(position, htmlText);
targetElement.insertAdjacentElement(position, element);
element.insertAdjacentText(position, DOMString);

插入在 DOM 的 position 下：

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

element.insertAdjacentHTML @ MDN WebAPIs

元素屬性（Attribute）​

element.getAttribute('<html-attribute>'); // 取得屬性值
element.hasAttribute('<html-attribute>'); // 判斷是否有該屬性
element.setAttribute('<html-attribute>', '<value>'); // 若無 value 可帶空值
element.removeAttribute('<html_attribute>'); // 移除某一屬性

element.hasAttribute() @ MDN WebAPIs

元素值（Value）​

const oneValue = oneElement.value; // 取得值
oneElement.value = 'hello'; // 設定值
oneElement.value = null; // 要刪除屬性，可設定成 null 就好

選取資料屬性內容（data-attribute）​

使用 element.dataset.<data-attribute> 可以取得該元素的資料屬性：

// <div id="slider" data-type="slide-show">
let slider = document.getElementById('slider');
slider.dataset.type; // slide-show

let photo = document.querySelectorAll('.photo');
console.log(photo[0].dataset.item); //  "1"
console.log(photo[0].dataset.size); //  "xs"

程式範例​

See the Pen [JS] Dom Manipulation by PJCHEN (@PJCHENder) on CodePen.