[筆記] JavaScript 丼（一）瀏覽器上的 JavaScript

哪裡可以執行 JavaScript

Node（或其它執行環境如： Deno、V8、SpiderMonkey……）
HTML 裡的 script 標籤
HTML 裡引入 script
JavaScript 程式碼放在哪裡有很重大的影響！

Node vs 瀏覽器

兩個不同的執行環境，除了 JavaScript （ECMAScript）語言本身就有的語法及特性。

有些功能兩者都會實作，如：console.log()、setTimeout()
有些功能則是只能在某個環境裡執行，例如 require()、fs() 可以在 Node 上使用，但是瀏覽器上不行；Document 物件只在瀏覽器上存在，Node 裡不存在。

JavaScript 在瀏覽器裡幹什麼：介面、事件、資料

用 JavaScript 進行以上三件事：改變介面（畫面）、監聽事件、處理資料

什麼是丼

一個瀏覽器特有的「文件」系統。
Document => Object ，瀏覽器其中一個重要的工作就是將「文件」轉換成「物件」！
Document 可以看做就是「HTML 文件經由解析之後成為一些物件」，我們就可以在瀏覽器上面操作、使用它們。

一個 DOM 的概略狀態：

Document
└─── <html>
    ├── <head>
    │   ├── <title>
    │       └── "My Web Site"
    └── <body>
        ├── <h1>
            ...

選擇物件

.getElementByXXX .getElementsByXXXXX，
script 放的位置會有影響，放在還沒有被解析的元素之前是沒辦法選擇該元素的。
document.getElementsByTagName() ByClassName，會抓到一個 HTML Collection。ByID
querySelector(‘CSS SELECTOR’) 只會選到第一個
querySelectorAll 會選到全部
（會抓到一個 NodeList）
querySelector 的使用方法相較之下更直覺一點。

選到物件後改變 CSS

const element = document.querySelector('#block')
element.style.background =  "red"
element.style.padding = "10px"
element.style["padding-top"] = "10px"
element.style.paddingTop = "10px" (cammel cased)

通常是不會像上面這樣用的！而是會先寫好一個 class，然後直接增加或移除某個 element 的 class。

element.classList.add('XXXX')
element.classList.remove('YYYY')
element.classList.toggle('ZZZZZ')

改變內容

innerText 標籤裡面的文字，不會抓到 tag
innerHTML 標籤裡的所有元素，也會抓到tag
outerHTML 把自已在內以下的所有元素都抓起來

插入或刪除元素

想刪除元素的話要先找到他的「上一代」是誰。然後再用 .removeChild() 刪除。

const element = document.querySelector('#block')
element.removeChild(document.querySelector('a'))

新增元素
- 先創造一個新的元素：const item = document.createElement('div')
- 然後 element.appendChild(item) 將 item 新增上去。
  還可以設定其它內容像是 item.innerText = 'XXX' ，將 item 內容改為 XXX。
  也可以加入純文字：const item = document.creatTextNode('ZZZ')

還有其它像是選擇旁邊的元素、拿到上層再上層的元素、插入到最前面……等等，再自已去找 API 資料。

[筆記] JavaScript 丼（一） 瀏覽器上的 JavaScript