PJCHENder 未整理筆記

[WebAPIs] JavaScript DOM Element Manipulation

2018-06-10

[WebAPIs] JavaScript DOM Element Manipulation

@(JavaScript)[JavaScript, WebAPIs, DOM]

keywords: DOM, element

選取 DOM 元素

1
2
3
4
5
6
7
8
9
10
11
12
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 建立 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 插入 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);

添加元素內容

1
2
Node.textContent      // 在元素內部插入內容(會覆蓋掉原本的內容)
el.innerHTML

targetElement.insertAdjacentXXX

在 element 中插入 HTML, Element 或 Text:

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

插入在 DOM 的 position 下:

1
2
3
4
5
6
7
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

element.insertAdjacentHTML @ MDN WebAPIs

元素屬性(Attribute)

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

element.hasAttribute() @ MDN WebAPIs

元素值(Value)

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

選取資料屬性內容(data-attribute)

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

1
2
3
4
5
6
7
// <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.

## 參考

掃描二維條碼,分享此文章