[JavaScript] - 基礎概念

本篇主要是複習 JavaScript 的基礎概念，將一些簡單的觀念做個紀錄．

queryselector 用法：

• 只回傳符合指定選擇器的第一個元素

html:

1
2

<div class="divclass"></div>
<div class="divclass"></div>

js:

1

document.querySelector(".divclass").textContent='測試文字';

output:

queryselectorAll 用法：

• 抓取所有符合匹配的元素,以陣列方式回傳

js:

1
2
3

var divclass = document.querySelectorAll('.divclass');
divclass[0].textContent='測試文字１';
divclass[1].textContent='測試文字２';

把 divclass 印出來：

output:

appendChild

• 動態增加子結點，加入後並不會清掉子結點原本的內容

  目標加入到下方<p>元素裡:

  1	<p class="title"></p>

  • 透過 creatElement() 加入:

  creatElement() 創立後，加入想要的元素：

  1 2	var str = document.createElement('p'); str.textContent = 'Yes!';

  指定在 class='title' 後動態加入：

  1	doucment.querySelector('.title').appendChild(str);

output:

1
2
3

<p class="title">
    <p>Yes!</p>
</p>

• 透過 createTextNode() 加入:

  1 2	var str = document.createTextNode("Yes!!"); doucment.querySelector('.title').appendChild(str);

  output:

  1	<p class="title">Yes!!</p>

innerHTML v.s creatElement

innerHTML

• 字串傳入直接渲染、效能快、安全性低
• 同層節點會被清空，只留下本次加入的 innerHTML

html:

1

<p id="ptag"></p>

js:

1

document.getElementById("ptag").innerHTML = "Hello ptag.";

output:

1

<p id="ptag">Hello ptag.</p>

creatElement

• 以 DOM 節點新增、效能差、安全性高

html:

1

<div id="tempdiv"></div>

js:

1
2

var btn = document.createElement("BUTTON");
document.getElementById("tempdiv").appendChild(btn);

output:

1
2
3

<div id="tempdiv">
    <button></button>
</div>

splice 陣列刪除

• array.splice(‘刪除的第 n 個位置’,’要刪幾個’)

  1 2 3

  var numArray = [0,1,2,3]; numArray.splice(1,1)//刪除第一個,刪除一個 console.log(numArray);//[0,2,3]

自訂 dataset － data-*

• 可元件上自定義資料屬性

取得 div 裡 data-userid 的值：

html:

1

<div id="user" data-userid="777">Tony</div>

js:

1
2

let element = document.querySelector('#user');
console.log('id:'+element.dataset.userid); //id:777

BOM (Browser Object Model)

windows 底下有很多物件，介紹其中幾個：

• DOM : 操作 DOM 元素
• history : 歷史瀏覽紀錄
• location : 網址資訊做調整
• frames : 針對網頁的 iframe 做操控
• screen : 載具螢幕相關資訊
• navigator : 瀏覽器相關資訊、版本

參考：udemy,w3schools,MDN

tags: javascript