<style>
.slides img{background-color:grey!important}
.slides img[title^='"']{filter:invert(100%)}
hr, .slides [title^='*']{display:none}
summary h1{display:inline;border-bottom:0!important}
</style>
<!-- .slide: data-background="black" -->
###### [JavaScript 教學/](/@NCHUIT/js)
:::spoiler {state=open}<h1>操作網頁元素 pt.2</h1>
<!-- | <i class="fa fa-fw fa-wpforms"></i>防疫表單 | <i class="fa fa-fw fa-wpforms"></i>入社表單 | <i class="fa fa-fw fa-comments-o"></i>回饋單 |
|:-:|:-:|:-:|
| [![](https://i.imgur.com/YjOk5L9.png '"' =172x)](https://forms.gle/bghmKYxjc9v7m9WE8) | [![](https://i.imgur.com/sLgC1CR.jpg '"' =172x)](https://reurl.cc/q1keqn) | [![](https://i.imgur.com/SZXAKmT.png '"' =172x)](http://reurl.cc/VjYNGZ) |
+ <i class="fa fa-google"></i> meet.google.com/czn-pbav-zvr -->
+ <i class="fa fa-book"></i> 網頁 md.nchuit.cc/js
+ <i class="fa fa-tv"></i> 簡報 md.nchuit.cc/js7
[ToC]
:::
> [name=VJ]
----
## 請多多發問
----
## [清除新分頁HTML程式碼](https://stackoverflow.com/questions/1870441/remove-all-attributes)
```javascript=
(doc=document.documentElement).innerHTML=""
while(doc.attributes.length) // 清掉所有屬性
doc.removeAttribute(doc.attributes[0].name);
```
 [](https://store.line.me/stickershop/product/7034336)
----
## 插入HTML元素
---
## `getElementsByTagName("TAG")`
注意是Element++s++，取出來的是陣列
例如，靠 TAG 取得元素後修改內文
```htmlembedded=
<h1>畢聯會</h1>
<h1>資訊科學研習社</h1>
<script> // 只看前面的內容請把 <script>...</> 拿掉
GET = document.getElementsByTagName("h1")
GET[0].innerHTML = "學生會"
GET[1].innerHTML = "NCHUIT"
</script>
```
TAG: ``<TAG>...</TAG>``、`<TAG .../>`、`<TAG ...>`
----
:::spoiler 練習1: 為下面所有`<button>`加上監聽器，點擊後彈出`Hello world`
1. 窮舉
```javascript=
GET = document.getElementsByTagName("button")
GET[0].onclick = ev => alert("Hello world")
GET[1].onclick = ev => alert("Hello world")
GET[2].onclick = ev => alert("Hello world")
```
2. 使用`for`迴圈
```javascript=
for(const 按鈕 of document.getElementsByTagName("button"))
按鈕.onclick = ev => alert("Hello world")
```
:::
```htmlembedded=
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
```
提示:
1. `addEventListener("click", ev => {...})`
2. `onclick = ev => {...}`
3. ``alert("Hello world")``
---
## `getElementsByClassName("CLASS")`
注意是Element++s++，取出來的是陣列
例如，靠 Class 取得元素後修改內文
```htmlembedded=
<h1 class="grad">畢聯會</h1>
<h1 class="it">資訊科學研習社</h1>
<script> // 只看前面的內容請把 <script>...</> 拿掉
document.getElementsByClassName("grad")[0].innerHTML = "學生會"
document.getElementsByClassName("it")[0].innerHTML = "NCHUIT"
</script>
```
----
:::spoiler 練習2: 使用`class`取得內文
```javascript=
document.getElementsByClassName("ui-status")[0].innerHTML
```
:::
提示:
1. <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd>
2. 
3. `document.getElementsByClassName("***").innerHTML`
---
## `getElementById("ID")`
算是常用的，只會取到唯一的一個元素，因為一個 ID 只會對應到一個 TAG。下面示範靠ID取得元素後修改內文
```htmlembedded=
<h1 id="grad">畢聯會</h1>
<script> // 只看前面的內容請把 <script>...</> 拿掉
document.getElementById("grad").innerHTML = "學生會"
</script>
```
----
:::spoiler 練習3: 用以下元素取得你頭像網址然後打開
```javascript=
window.open(document.getElementById("profile-dropdown").previousElementSibling.children[0]["src"])
```
:::
1. `getElementById("profile-dropdown")`
2. `previousElementSibling`
3. `children[0]["src"]`
4. `window.open(...)`
---
## `querySelector(TAG / #ID / .CLASS)`
最好用，請參照 [CSS 選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Selectors)，見下面範例，只會取到第一個
```htmlembedded=
<h1 id="grad">畢聯會</h1>
<h1 class="it">資訊科學研習社</h1>
<script> // 只看前面的內容請把 <script>...</> 拿掉
document.querySelector("#grad").innerHTML = "學生會"
document.querySelector(".it").innerHTML = "NCHUIT"
</script>
```
----
:::spoiler 練習4: 用 CSS 選擇器**只**取出紅色
```javascript=
document.querySelectorAll(`form > p span`)
```
:::
```htmlembedded=
<form>
<p>
我是
<span style="color:red">紅色</span>
</p>
<div>
<p>
我是
<span style="color:blue">藍色</span>
</p>
</div>
</form>
```
提示: `form p span`
---
## `querySelectorAll(*)`
如`..Elements..`，出來的東西是**陣列**
:::spoiler 練習5: 取上次看到的靜態表格`<tr>`、`<td>`
```javascript=
trs = document.querySelectorAll("tr")
console.log(trs)
tds = document.querySelectorAll("td")
console.log(tds)
```
:::
```htmlembedded=
<table><tbody>
<tr><td>A1</td><td>B1</td><td>C1</td><td>D1</td><td>E1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td><td>D2</td><td>E2</td></tr>
<tr><td>A3</td><td>B3</td><td>C3</td><td>D3</td><td>E3</td></tr>
<tr><td>A4</td><td>B4</td><td>C4</td><td>D4</td><td>E4</td></tr>
<tr><td>A5</td><td>B5</td><td>C5</td><td>D5</td><td>E5</td></tr>
</tbody></table>
```
----
:::spoiler 上次的練習plus: 建立5×5的HTML表格, 搭配 CSS，利用按鍵監聽器「移動」紅色欄位
```htmlembedded=
<table id="表格">
<tbody>
<tr><td>A1</td><td>B1</td><td>C1</td><td>D1</td><td>E1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td><td>D2</td><td>E2</td></tr>
<tr><td>A3</td><td>B3</td><td>C3</td><td>D3</td><td>E3</td></tr>
<tr><td>A4</td><td>B4</td><td>C4</td><td>D4</td><td>E4</td></tr>
<tr><td>A5</td><td>B5</td><td>C5</td><td>D5</td><td>E5</td></tr>
</tbody>
</table>
<style>td[我在這]{background-color: red;}</style>
<script>
HTML表格元素 = []
for(const 元素 of document.getElementById("表格").tBodies[0].children)
HTML表格元素.push(元素.children);
console.log(HTML表格元素);
現在位置 = [2,2];
HTML表格元素[現在位置[0]][現在位置[1]].setAttribute("我在這","");
onkeydown = ev => {
if(ev.keyCode < 37 || ev.keyCode > 40) return;
HTML表格元素[現在位置[0]][現在位置[1]].removeAttribute("我在這");
switch(ev.key){ default:
break;case "ArrowUp": if(--現在位置[0] == -1) 現在位置[0] = 4;
break;case "ArrowDown": if(++現在位置[0] == 5) 現在位置[0] = 0;
break;case "ArrowLeft": if(--現在位置[1] == -1) 現在位置[1] = 4;
break;case "ArrowRight": if(++現在位置[1] == 5) 現在位置[1] = 0;
}
HTML表格元素[現在位置[0]][現在位置[1]].setAttribute("我在這","");
}
</script>
```
:::
示例
→
{"metaMigratedAt":"2023-06-17T00:41:35.325Z","metaMigratedFrom":"YAML","breaks":true,"description":"JavaScript教學-110-2主題社課-國立中興大學資訊科學研習社","title":"操作網頁元素 pt.2","contributors":"[{\"id\":\"e86b6571-4dea-4aa4-ba20-ece559b0e015\",\"add\":9581,\"del\":3146}]"}