你選中那一個？

你選中那一個？

下列有許多圖片，都是小圖片。你可以任選一個，click一下，那張就會變大。其他消失。再click一下那張大照片，就會恢復原狀。

這是要使用 javascript 來找出你按下去的是那一張，再對那一張進行 class 的變動。

所以，如何選取就是思考上的重中之重。

在這裡，文科生，我們要會使用 css 選取器，你才不會要用到奇怪的計算方法。

1. 要把 flex 裡面的 div 都選出來。 document.querySelectorAll(".flexcontainer >div");
2. 每個 div 都要被賦予可以 click 的功能，所以要會遍歷功能， forEach。以及 div 有監聽的功能，addEventListener("click", (event) => {}); ，即有 click 的動作後，就可以去做什麼事。
3. 我們用 classList.toggle() 的功能，把 class 的許多屬性加到 div 裡面去，這是文科生最好用的方法，直觀的用就可以。

語法：

<style type="text/css">.flexcontainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flexcontainer >div {
width: 24%;
margin-bottom: 5px;
}
.flexcontainer >div >img {
width: 100%;
}
.displaynodiv {

display: none !important;
}
.largeDiv {
display: block !important;
width: 100% !important;
transition: 1s all;
}
</style>
<div class="flexcontainer">
<div><img src="https://images.pexels.com/photos/38146388/pexels-photo-38146388.jpeg" /></div>

<div><img src="https://images.pexels.com/photos/38146387/pexels-photo-38146387.jpeg" /></div>

<div><img src="https://images.pexels.com/photos/38146357/pexels-photo-38146357.jpeg" /></div>

<div><img src="https://images.pexels.com/photos/38146336/pexels-photo-38146336.jpeg" /></div>

<div><img src="https://images.pexels.com/photos/38146330/pexels-photo-38146330.jpeg" /></div>
</div>
<script>
const allDivcontainer = document.querySelectorAll(".flexcontainer >div");
allDivcontainer.forEach(element =>{
element.addEventListener("click", (evnet) =>{
allDivcontainer.forEach(element =>{
element.classList.toggle("displaynodiv");

});
event.currentTarget.classList.toggle("largeDiv");
});

});
</script>

就是不要那一個

先按下去看看吧!

第一個div

第二個div

第三個div

第四個div

**按下去的是第幾個div啊？

看到了嗎？

按下去那一個，和其他的顏色都不一樣。

文科生會說，啊，被排擠了。


語法：

<style>
#test0608 div {
border: 1px solid red;
margin-bottom: 5px;
font-size: 3em;
padding: 5px;
}
</style>

<div id="test0608">
<div>第一個div</div>
<div>第二個div </div>
<div>第三個div </div>
<div>第四個div</div>
</div>
<div id="test060802" style="font-size: 2em;">**按下去的是第幾個div啊？
</div>
<script>
const divElements = document.querySelectorAll("#test0608 div");
divElements.forEach(dive => {
dive.addEventListener("click", (event) => {
event.target.style = "color: red;";
let pattern = Array.from(divElements).indexOf(event.target);
let patternadd = pattern +1;
document.querySelector("#test060802").append(patternadd);
const elements = document.querySelectorAll(`#test0608 :not(:nth-of-type(${patternadd}))`);

elements.forEach(el => {
el.style = 'color: green';
});
});
});
</script>

把特定文字刪除掉，文字節點的使用

先看一下下列這個html的文本。

<div id="testid0604">
<p>00000</p>
11111 iiiii<br>
22222
<br>
33333<span>44444</span>
55555 uuuuu
<p>66666</p>
</div>

可以看到，div內有很多節點物件，如本例，<p></p>、<span></span>、<br>、<br>、<p></p>等5個，又稱之為元素節點。但也有文字物件、例如11111 iiiii、22222、33333、55555 uuuuu等4個，也稱為文字節點。

如果我們來進行計算，可以看到共有9個節點物件。

我們可以透過節點物件的概念，找出文字節點。這樣，我們就可以對文本內的特定文字進行操作，例如刪除。

要注意的是，javascript會把<div>以及</div>也算2個計算進去，所以，一共會有11個節點物件。但在其排列序列的數字列表是0-10。亦即<div>是序列0，而</div>是序列10。而<p>00000</p>是序列1。

語法：
<script>
const divNodesList = document.querySelector("#testid0604").childNodes;
//節點物件的集合

let Nodescontent = divNodesList[2].textContent;
//找出第2序列列表的節點元素，亦即0,1,2的2，一般概念中的第三個，其內容是什麼。

divNodesList[7].remove();
//會刪除序列7的節點，即第八個節點物件
</script>

前面的html文本，呈現如下：

00000

11111 iiiii
22222
3333344444 55555 uuuuu

66666

按一下，刪除第八個節點物件。即<span>44444</span>那一個。

再按一下，把第三個(文字)節點內容，即divNodesList[2].，寫到下列的div中。

 

 

陣列的作用和操作

獅子
大象
河馬

1

按下去，就有「相應的」的文字跑出來。這「相應的」的文本表現需求，就應可以使用陣列這種程式寫作思維來想看看。

const cars = ["Saab", "Volvo", "BMW"];

這是陣列 an array 語法形態。可以看到，cars 是陣列名稱。裡面包含了三個內容物。

為什麼要使用這種，是在一種什麼樣的思考推動下，所以要採用陣列的操作模式來完成作品。

陣列會給裡面的內容物一種序列，有數字的序列，從 0 開始。這樣，我們就可以用「數字」來指稱內容物，而加以使用。

在javascript中，使用數字和使用名詞是完全不相同的，運思邏輯。

同樣是 1 ，當成數字使用字，就可以進行加減乘除。如果當成名詞，就只是一個「文字」。文字，無法進行數字運算。

我們把陣列轉成數字序列，可以使用下列語法表示：

const  index = cars.indexOf("saab");

saab 所代表的序列數字是 0。然後，我們可以用數字來運算了。 0+1=1，所以現在指向了 Volvo 。

看一下下列語法，空白框      被填入的效果是 空白 ，空白框有變化了。

語法：

<script>
const cars = ["Saab", "Volvo", "BMW"];
let index = cars.indexOf("Saab");
let indexch = index + 1;
document.querySelector("#testid0603").textContent = cars[indexch];
</script>