DOM

意思

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

<h3>Document Object Mode</h3>
<p>has existed</p>
//document 總體變數
//找到網頁文件下的body tag 裡面包住的所有字,然後換成
document.body.innerHTML="ERRRRRRRRRRRRR!"
Display

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

Document Object Mode

has existed

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

ERRRRRRRRRRRRR!

使用選擇器改變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"
Display

Your Cats

My Dogs變成Your Cats了

Animal is the best friend

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";
}
Display

The domestic cat is known as man’s best friend. The cat 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 cats, making them the most abundant predators in the world.

dog全部變成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";
}
Display

The domestic cat is known as man’s best friend. The cat 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 cats, making them the most abundant predators in the world.

dog全部變成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")
Display

Your cat is so cool

標題變成cat了

it’s name is moko

可以往下選擇小孩元素: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"
}
Display

About My dog


moko is a beautiful CAT
she is my best CAT friend
I love my CAT

只有内文的dog被換成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>"

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *