[學習筆記] 邊學邊寫 JavaScript 30天 (17)：JS與瀏覽器的溝通

2022 iThome 鐵人賽

DAY 17

Modern Web

[學習筆記] 邊學邊寫 JavaScript 30天系列第 17 篇

14th鐵人賽

LeeFang

團隊好想工作室 v6.0

2022-10-02 18:08:30

472 瀏覽

分享至

前言

今天要接著看的是 [FE102] 前端必備：JavaScript 這堂課主要是在講怎麼在瀏覽器上面執行JavaScript，詳細請點連結看介紹。那就直接開始吧～

今天內容

瀏覽器JavaScript撰寫位置
選元素：getElement
改變元素的Class
改變內容
插入與刪除元素：appendChild、removeChild

筆記

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子層