Skip to main content

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