元素 Elememnts
HTML DOM (Document Object Model): 元素 Elememnts
Categories:
DOM Search 尋找元素
getElementsByClassName 取得 class 名稱元素
const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
getElementsByTagName 取得 html tag 名稱元素
const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";
const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;
querySelector 查詢元素
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
querySelectorAll 查詢所有元素
// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";
parentNode 母節點
let name = document.getElementById("myLI").parentNode.nodeName;
parentElement 母元素
如果木節點不是 element 節點的話會回傳 null
document.body.parentNode; // Returns the <html> element
document.body.parentElement; // Returns the <html> element
document.documentElement.parentNode; // Returns the Document node
document.documentElement.parentElement; // Returns null (<html> does not have a parent ELEMENT node)
DOM 操作
appendChild 加入子節點
const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
insertBefore 在指定節點前方插入新節點
const newNode = document.createElement("li");
const textNode = document.createTextNode("Water");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);
const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);
remove 移除元素
const element = document.getElementById("demo");
element.remove();
removeChild 移除子節點
const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);
replaceChild 取代子節點
const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);
innerHTML 內部文字或節點
let html = document.getElementById("myP").innerHTML;
document.getElementById("demo").innerHTML = "I have changed!";
let html = document.getElementById("myList").innerHTML;
element.innerHTML = "";
innerText 內部文字
let text = element.innerText;
DOM 事件
addEventListener 加入事件函數
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
removeEventListener 移除事件函數
myDIV.removeEventListener("mousemove", myFunction);
DOM 比較
isEqualNode 節點是否有相同元素
var item1 = document.getElementById("myList1").firstChild;
var item2 = document.getElementById("myList2").firstChild;
var x = item1.isEqualNode(item2);
isSameNode 是否為相同節點
var item1 = document.getElementById("myList1"); // An <ul> element with id="myList"
var item2 = document.getElementsByTagName("UL")[0]; // The first <ul> element in the document
var x = item1.isSameNode(item2);
nodeType 節點類型
var x = document.getElementById("myP").nodeType;
Class 類別
classList 類別清單
const list = element.classList;
list.add("myStyle");
list.remove("myStyle");
list.toggle("myStyle");
| Name | Description |
|---|---|
| add() | Adds one or more tokens to the list |
| contains() | Returns true if the list contains a class |
| entries() | Returns an Iterator with key/value pairs from the list |
| forEach() | Executes a callback function for each token in the list |
| item() | Returns the token at a specified index |
| keys() | Returns an Iterator with the keys in the list |
| length | Returns the number of tokens in the list |
| remove() | Removes one or more tokens from the list |
| replace() | Replaces a token in the list |
| supports() | Returns true if a token is one of an attribute’s supported tokens |
| toggle() | Toggles between tokens in the list |
| value | Returns the token list as a string |
| values() | Returns an Iterator with the values in the list |
Attribute 屬性
attributes 元素屬性值
let numb = document.getElementById("myImg").attributes.length;
getAttribute 取得屬性
let text = element.getAttribute("class");
let text = myAnchor.getAttribute("target");
getAttributeNode 取得屬性物件
const element = document.getElementsByTagName("H1")[0];
let text = element.getAttributeNode("class").value;
hasAttribute 是否有此屬性
let answer = myButton.hasAttribute("onclick");
if (element.hasAttribute("target")) {
element.setAttribute("target", "_self");
}
setAttribute 設定屬性
element.setAttribute("class", "democlass");
setAttributeNode 設定屬性節點
const attr = document.createAttribute("class");
attr.value = "democlass";
const h1 = document.getElementsByTagName("H1")[0];
h1.setAttributeNode(attr);
removeAttribute 移除屬性
document.getElementsByTagName("H1")[0].removeAttribute("class");
removeAttributeNode 移除屬性節點
const element = document.getElementById("myAnchor");
const attr = element.getAttributeNode("href");
element.removeAttributeNode(attr);