今天要接著看的是 [FE102] 前端必備:JavaScript 這堂課主要是在講怎麼在瀏覽器上面執行JavaScript,詳細請點連結看介紹。那就直接開始吧~
JavaScript在哪裡執行?
第一個是在node執行(上一堂課都是在node環境執行JS),第二個就是瀏覽器,一樣是用VScode來寫。
在html檔案使用<script>
tag來寫。
<script>
alert("hello")
</script>
或是寫在新增的JS檔案裡,像寫css一樣從外部引入,而不是寫在html行內。雖然script tag
放html哪裡都可以,但還是有差。
//html <head>區塊
<title>home page</title>
<script src="./index.js"></script>
//放在<head>會因為還沒解析到<body>造成不同結果。
//html <body>區塊
<body>
<header>.....</header>
<main>....</main>
......略
<script src="./index.js"></script>
//通常還是會放在</body>前
</body>
//index.js
alert("hello")
node.js與瀏覽器跑JS的差別:JS本身語法寫在哪裡都一樣,但有些語法可能會不支援。例如:node.js支援 var fs = require("fs")
,但瀏覽器會回報require is not defind。
如何選到想要的元素:getElement
//HTML
<body>
<header id="para"></header>
<p></p>
<div class="container">
<a></a>
</div>
</body>
//script
const element = document.getElementsByTagName("")
//html tag (會選到很多個,複數要+s)
const element = document.getElementsByClassName("container") //css classname
const element = document.getElementById("para") //css idname(id只會有一個,Element沒有s)
const element = document.querySelector(".container") // css selector id把.換成# tag則不用加符號同css用法
const element = document.querySelector(".container a") //還可以選到下層的a,只會選到1個元素
const element = document.querySelectorAll(".container a") //可以選多個
//querySelector像css的選法
改變元素的Class:操控HTML tag的class
element.classList.add("btn_primary") //新增
element.classList.remove("btn_primary") //移除
element.classList.toggle("btn_primary") //原本沒有就新增或原本有就移除
改變內容:inner、outer 的 HTML 與 text
//HTML
<div class="container">Hello
<a>link</a>
</div>
//script
const element = document.querySelector(".container")
console.log(element.innerText) //拿到container內的所有文字
const element2 = document.querySelector(".container a")
element2.innerText = "this a link" //對a內容做改變
console.log(element2.innerText) //印出a -> this a link
console.log(element.innerHTML)
//Hello <a>link</a> 印出 container內的所有東西
console.log(element.outerHTML)
//index1.html:19 <div class="container">Hello <a>link</a></div> 印出包含container內的所有東西
插入與刪除元素:removeChild
//HTML
<div class="container">Hello
<a>link</a>
</div>
//script
const element = document.querySelector(".container")
element.removeChild(document.querySelector("a")) //刪除<a>
刪不掉的情形:找不到父層
//HTML
<a>111</a>
<div class="container">Hello
<a>link</a>
</div>
//script
const element = document.querySelector(".container")
element.removeChild(document.querySelector("a"))
//會刪除第一個<a>但該沒有父層會報錯。(要有明確的parent才能刪除)
插入與刪除元素:appendChild
//HTML
<div class="container">Hello
<a>link</a>
</div>
//script
const element = document.querySelector(".container")
element.removeChild(document.querySelector("a")) //刪除<a>
const item = document.createElement("h1")
//新增一個<h1>tag
item.innerText = "111" //對<h1>寫入文字"111"
element.appendChild(item) //把<h1>放在container子層
const item2 = document.createTextNode("222")
//單純新增一個文字,沒有tag
element.appendChild(item2) //把文字放在container子層