JavaScript學徒篇-DOM

querySelector - 選擇單一元素

---HTML---
<div class="title"></div>
<div id="content"></div>

---JavaScript---
let el = document.querySelector('.title');
let el2 = document.querySelector('#content');


el.textContent = '123';
el2.textContent = '123456';

你就可以看到，我們除了可以用getElementById來選取DOM元素之外，我們也可以用querySelector來選取
目標DOM元素，而且id或className都可以選擇。

querySelectorAll - 可重複選取多個元素

要注意的是querySelectorAll回傳的是一個NodeList的類陣列。

你可以看到我們透過querySelectorAll來取得span標籤的類陣列。

並透過ES6 寫法來將類陣列的內容淺複製到真正的陣列裡面。
如此，才能讓這個新的陣列來進行只有陣列才能用的方法囉。

setAttribute - 增加標籤屬性 v.s getAttribute - 取得標籤屬性內容

上面這個例子，我們可以透過setAttribute 來為一個a連結新增href的屬性，並為這個屬性塞入值。
接著，再用getAttribute來取得這個a連結的href屬性的內容。

插入 HTML 標籤的兩種方法

innerHTML

方法: 組完字串之後，傳進語法進行渲染
優點: 效能快
缺點: 資安風險

createElement

方法: 以DOM節點處理
優點: 安全性高
缺點: 效能差

innerHTML

a. 以上這個範例你可以看到我們透過innerHTML來為.container裡面塞入了子節點。
b. 注意~~我們將class的名稱加入innerHTML的內容裡面時，如果以最外面用單引號的時候，你裡面就要用雙引號喔，不然，這段字串會組不起來。

innerHTML會清除原本的內容

c. 你可以看到原本.container裡面有一個Hello的內容，在我們用innerHTML來將子節點塞入之後，它是會直接被清掉的喔。

innerHTML 傳統寫法v.s字版字面值

另外，我們想要在innerHTML的字串裡面塞入變數的話有兩種寫法
ex:

---傳統寫法---
let el = document.querySelector('.container');
let link = "https://www.google.com/";
el.innerHTML = '<a href="'+link+'">按鈕</a>';

---字版字面值---
el.innerHTML = `<a href=${link}>按鈕</a>`;

你可以看到以上的差別，傳統的寫法的意思是前面的字串是<a href="， 中間的變數內容是https://www.google.com/ ，後面的
字串是">按鈕</a>，所以，整體結果組出來才會是<a href="https://www.google.com/">按鈕</a>的效果。

那在字版字面值的寫法，
只要外面要反引號包起來，然後，變數的部分用${}包起來就可以達成跟上面的一樣效果囉~

innerHTML 與 for 迴圈

以上這個範例你可以看到，我們透過for迴圈將str變數的內容一直塞入各元素的連絡電話的內容，
等到塞完之後，再利用innerHTML來將這段組好的字串塞進去，就可以得到畫面上的效果囉。

createElement 寫法

以上這個範例你可以看到我們先透過createElement創出一個li的節點，
並在途中利用setAttribute和textContent來為這個新節點塞入內容和屬性，最後，再用appendChild，
來為父元素塞入這個新創出來的子節點。

XSS 跨網站指令碼注意事項（Cross-site scripting）

innerHTML 不建議用在送出表單的部分

因為，如果在送出表單部分使用innerHTML，惡意使用者很可能會蓄意的
加入一些js的語法，來駭入你的網站。
所以，innerHTML是建議用在內部從遠端抓到可信任資料的時候，並要將這些資料渲染到
畫面上時，才建議使用innerHTML。

所以，這種時候，在安全性上，使用createElement的語法就比較可以避免以上這種攻擊。

那以上這種攻擊，就有一種術語叫做XSS攻擊，跨網站式的攻擊。

event(事件)

當你在function裡面丟入一個引數e，此時，當我們跟該元件互動的時候，
瀏覽器會將我們跟該元件互動的資訊(像是: 鼠標點擊的座標…等等)，並將這些資訊存到這個引數e裡，此時，我們就能透過解析這個e所帶的資訊，來設計我們希望的相對應的互動了~
例:

在html檔案中
<input type="button" value="點擊" class="btn">

在Javascript檔案中
var el = document.querySelector('.btn');
el.onclick = function(e){
   console.log(e);
}

根據以上的例子，當我們點擊那個input的按鈕的時候，會觸發它的onclick事件，這個時候，因為我們有丟入引數e，所以，瀏覽器會將我們跟那個按鈕互動的相關資訊，都記在e裡面。