zuppachu
commented
5 years ago JavaScript 與瀏覽器的溝通
執行 JS 的一百種方式
可以在哪裡執行 JS?
- node.js
- 瀏覽器上面
// 在 index.html <script src="./index.js"></script>
// ./ 代表同一個資料夾底下
以上兩個為不同的執行環境，因此語法上有一些差異。
那兩者的差別在哪呢？
有些時候某些語法可能在瀏覽器上面不支援，或是在 node.js 不支援。例如：Node.js 引入模組的`require` 用法在瀏覽器上無法使用。
## DOM 是啥毀？
全名是：Document Object Model。
為 JS 跟瀏覽器之間的橋樑。可以說是瀏覽器提供 DOM，讓程式語言，如：JS 可以操控 HTML 內的元素，用來改變介面（網頁的面貌）。
<!----- DOM 操作範例 ------>
## 如何選到想要的元素
>最好把 `<script></script>` 放在 `<body>` 結束之前，因為瀏覽器是由上而下跑的。如果先放前面的話， DOM 會沒抓取到跑出空白的答案
- getElementsByTagName
```javascript
const elements = document.getElementsByTagName('div')-
getElementsByClassName
<body> <div class="block"> // by classname 所以不用 . hello </div> <script> const elements = document.getElementsByClassNAme('block') console.log(elements) </script> </body> -
getElementById 注意：因為 id 只有一個，所以 element 沒有 s
-
querrySelector 最推薦的用法。
但需注意：此方法只回傳 document 第一個符合的元素
用法：
- id 用
# - class 用
. - tag 用
<tag 的名字> - 關係選擇器
> + ~<body> <div id="block"> hello </div> <div class="box"></div> <script> const elements = document.querrySelector('#block') cosnt ans = document.querrySelector('.box') console.log(elements) </script> </body>// 如： id 底下的 <a> const elements = document.querrySelector('#block > a')
- querrySelectorAll:
會取得所有選到匹配的元素
<div class="test"> <p>123</p> <p>321</p> </div> var test = document.querySelectorAll('.test > p'); test[1].style.color = 'red'; // 得 紅色 321querrySelectorandquerrySelectorAll是 CSS 的選擇器。
改變 CSS
- x.style.paddingTop
<body> <div id="block"> hello </div> <div class="box"></div> <script> const elements = document.querrySelector('#block') elements.style.paddingTop = '10px'; elements.style['padding-left'] = '20px'; elements.style.background = 'red'; </script> </body>但上面這種寫法不方便更改和維護，所以不建議使用這種方式寫 CSS。比較好的方法是另寫一個 class，當事件觸發時，在幫元素加上變動。
改變元素的 Class
- 新增：x.classList.add
- 刪除：x.classList.remove
- 開關：x.classList.toggle
<style>
.active {
background: blue;
}
</style>
<body>
<div id="block">hello</div>
<div class="box">Ciao</div>
<script>
const elements = document.querrySelector('#block')
elements.classList.add('active')
</script>
</body>加上一個名叫 'active' 的 class 在 <div id='block'> 的裡面。
移除的話用： element.classList.remove('active')
還有一種是：toggle。這個很妙，比如你寫:
element.classList.toggle('active')
// 本來沒有 -> 變成新增
// 本來有 -> 變成移除抓取、改變文字或標籤內容：
-
innerText: 只能寫入存文字 只顯示標籤的內容，不包含標籤
element.innerText = 'icecream'<body> <div id="block"> Ciao <a>hello<a> </div> <script> const element = document.querrySelector('#id') console.log(element.innerText) </script> </body>
// 得 // ciao // hello
- innerHTML：
顯示標籤內的所有內容
與 innerText 不一樣的地方是可以寫入標籤
`element.innerHTML = '<div>icecream</div>'`
```javascript=
<body>
<div id="block">
Ciao
<a>hello<a>
</div>
<script>
const element = document.querrySelector('#id > a')
console.log(element.innerHTML = 'I am a link')
</script>
</body>
// 得 a= I am a link-
outerHTML 顯示包含標籤 可以改變標籤內容，包括標籤本身
element.outerHTML = '<div>gelato<div>icecream</div></div>'<body> <div id="block"> Ciao <a>hello<a> </div> <script> const element = document.querrySelector('#id > a') console.log(element.outerHtml) </script> </body>
// 得
## 插入與刪除元素：appendChild 與 removeChild
- 刪掉元素：
首先要先知道他的上一層（parent）是誰 ，才可能刪除元素。const element = document.querySelector('#block') element.removeChild(document.querySelector('a'))
- 新增元素：const element = document.querySelector('#block') cosnt item = document.createElement('div') // 建立新 parent element.appendChild(document.querySelector('p'))
need to checkout more api ?
FE102 課程簡介
三個重要面向：介面、事件、資料！