跳至主要内容

[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)

建立 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.