意思

Document Object Mode
JavaScript找到html/css的節點node，並且控制或改變它

<h3>Document Object Mode</h3>
<p>has existed</p>

//document 總體變數
//找到網頁文件下的body tag 裡面包住的所有字，然後換成
document.body.innerHTML="ERRRRRRRRRRRRR!"

如果沒有JavaScript的話，會長這樣

但是JavaScript改變了内容，所以變成

使用選擇器改變html, css内容

ID selector: getElementById()

div
 h1#heading My Dogs
 p Animal is the best friend

//getElementById("ID") ID選擇器，裡面不用加#
document.getElementById("heading").innerHTML="Your Cats"

tag selector: getElementsByTagName()

不像id只會出現一個，tag會出現很多次，所以要用迴圈批量命名

div
 p
 | The domestic 
 span.animal dog
 | is known as man's best friend. The 
 span.animal dog
 | was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion 
 span.animal dog
 | s, making them the most abundant predators in the world.

//先命名變數
//注意element"s"
var span_els = document.getElementsByTagName("span");
//抓下來的tag是陣列形式(HTML collection)
//所以要這樣寫才能在console看到
//console.log(span_els[0])

//用迴圈批量改
for (var i = 0; i < span_els.length; i++) {
 span_els[i].innerHTML = "cat";
}

class selector: getElementsByClassName()

class一樣會出現很多次，也要迴圈命名

div
 p
 | The domestic 
 span.animal dog
 | is known as man's best friend. The 
 span.animal dog
 | was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion 
 span.animal dog
 | s, making them the most abundant predators in the world.

var animal_els = document.getElementsByClassName("animal");

for (var i = 0; i < animal_els.length; i++) {
 animal_els[i].innerHTML = "cat";
}

其他選擇法：querySelector()

任意選擇一個class, tag, id…等任何元素
jQuery也是用此法選擇
效能比getElemetBy法好，但需要較新瀏覽器支援

div 
 h3#h3 Hey this's my dog
 p it's name is moko

//id的話要加#，class的話加.
document.querySelector("#h3").innerHTML=("Your cat is so cool")

可以往下選擇小孩元素：querySelectorAll()

選CSS的話母親跟小孩中間要加空格

div
 h1 About My 
 span.pet Dog
 hr
 p moko is a beautiful 
 span.pet dog
 br
 | she is my best 
 span.pet dog
 | friend
 br
 | I love my 
 span.pet dog

var pet_els=document.querySelectorAll("p .pet")
//得出一個node list，跟陣列很像
for(var i=0;i<pet_els.length;i++){
 pet_els[i].innerHTML="CAT"
}

進階：querySelector() 與 querySelectorAll 的差異

querySelector 只能選取單一元素，以及他的HTML部分而已
querySelectorAll 可以選取複數元素【陣列】，以及該元素所有資訊【nodeList】
※如果想抓到 nodeList 資訊的話，必須使用  querySelectorAll選擇器（不論想抓單一或複數元素）

.text SOME TEXT

var qs=document.querySelector(".text");
console.log(qs); //<div class="text">SOME TEXT</div>
//↑回報字串

var qsa=document.querySelectorAll(".text");
console.log(qsa); //出現複雜的nodeList，一個一個點開來看可以找到很多資訊

//注意：如果想要再網頁中使用 nodeList ，必須先轉換成陣列才可以

中括號：指定屬性

※querySelector、querySelectorAll 都可以使用

p(color="green") title1
p(color="green") title2
p(color="green") title3
p(color="green") title4
p(color="blue") title5
p(color="blue") title6
p(color="blue") title7
p(color="blue") title8

const greens=document.querySelectorAll("p[color='green']");

greens.forEach(green => green.style.color="#5aad6f");

Display

title1

title2

title3

title4

title5

title6

title7

title8

選取HTML屬性（Attribute）

用法一：不指定內容

h1(data-color="red") Red
h1 Blue
h1 Orange
h1 Green

document.querySelector("h1[data-color]") 
//"<h1 data-color='red'>Red</h1>"

如果data-color只有一個的話，querySelector會選到唯一的一個，但若data-color有數個的話，querySelector只會選到第一個。

要讓第二個data-color也被選到的話，要使用querySelectorAll，並指定index

h1(data-color="red") Red
h1(data-color="blue") Blue
h1(data-color="orange") Orange
h1(data-color="Green") Green

document.querySelector("h1[data-color]") //"<h1 data-color='red'>Red</h1>"
document.querySelectorAll("h1[data-color]")[1]//"<h1 data-color='blue'>Blue</h1>"

用法二：指定名稱

h1(data-color="red") Red
h1(data-color="blue") Blue
h1(data-color="orange") Orange
h1(data-color="Green") Green

document.querySelector("h1[data-color='red']") //"<h1 data-color='red'>Red</h1>"