意思
Document Object Mode
JavaScript找到html/css的節點node,並且控制或改變它
<h3>Document Object Mode</h3>
<p>has existed</p>
//document 總體變數
//找到網頁文件下的body tag 裡面包住的所有字,然後換成
document.body.innerHTML="ERRRRRRRRRRRRR!"
如果沒有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"
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";
}
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";
}
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")
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"
}
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>"