【JavaScript HTML】HTML DOM Elememnts 元素：寻找、事件、比较、Class 类别操作方式比较

Photo by Mohammad Rahmani on Unsplash

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

Reference

HTML DOM Element Object

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話，可以透過下面支付方式贊助作者喝咖啡，如果有什麼建議或想說的話可以贊助並留言給我

If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!

方式 Method	贊助 Donate
PayPal	https://paypal.me/kejyun
綠界 ECPay	https://p.ecpay.com.tw/AC218F1
歐付寶 OPay	https://payment.opay.tw/Broadcaster/Donate/BD2BD896029F2155041C8C8FAED3A6F8