【JS】改變DOM元素

createElement、innerHTML、prepend、append、textContent、setAttribute、getAttribute、style、value、type

 發表於 2021-02-04  |  2 分鐘  |  284 個字

【JS】改變DOM元素

createElement、innerHTML、prepend、append、textContent、setAttribute、getAttribute、style、value、type

 發表於 2021-02-04  |  2 分鐘  |  284 個字

點擊按鈕 + 改變標籤結構(innerHTML、prepend、append)

1
2
3
4

<button class="btn" type="button">按鈕</button>
<ul class="list">
  <li>蘋果</li>
</ul>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

let btn = document.querySelector(".btn");
let list = document.querySelector(".list");

//替換"蘋果"
btn.onclick = function(){
  list.innerHTML = "<li>香蕉</li>";
}

//加在"蘋果"前面
btn.onclick = function(){
  let banana = document.createElement("li");
  banana.textContent = "香蕉";
  list.prepend(banana);
}

//加在"蘋果"後面
btn.onclick = function(){
  let banana = document.createElement("li");
  banana.textContent = "香蕉";
  list.append(banana);

點擊按鈕 + 改變文字(textContent)

1
2

<button class="btn" type="button">按鈕</button>
<p class="apple">蘋果</p>


1
2
3
4
5

let btn = document.querySelector(".btn");
let apple = document.querySelector(".apple");
btn.onclick = function(){
  apple.textContent = "香蕉";
}

點擊按鈕 + 改變標籤屬性(setAttribute、getAttribute)

1
2

<button class="btn" type="button">按鈕</button>
<a class="link" href="#">連結</a>


1
2
3
4
5
6
7
8

let btn = document.querySelector(".btn");
let link = document.querySelector(".link");

btn.onclick = function(){
  link.setAttribute("href","https://www.google.com.tw/");
  let href = document.getElementsByTagName("a")[0].getAttribute("href");
  console.log(href); //"https://www.google.com.tw/"
}

點擊按鈕 + 改變元素樣式(style)

1
2

<button class="btn" type="button">按鈕</button>
<a class="link" href="#">連結</a>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

let btn = document.querySelector(".btn");
let link = document.querySelector(".link");

//將連結背景變紅色
btn.onclick = function(){
  
  //第一種寫法
  link.style.backgroundColor = "red";

  //第二種寫法，多樣式寫法["",""]
  link.style["background-color"] = "red";

  //第三種寫法，多樣式寫法"";""
  link.style.cssText = "background-color: red";

}

點擊按鈕 + 取得input裡的值(value)

1
2

<button class="btn" type="button">按鈕</button>
<input class="text" type="text">


1
2
3
4
5
6

let btn = document.querySelector(".btn");
let text = document.querySelector(".text");

btn.onclick = function(){
  console.log(text.value); //[顯示輸入框裡的文字]
}

點擊按鈕 + 取得input的類型(type)

1
2

<button class="btn" type="button">按鈕</button>
<input class="password" type="password">


1
2
3
4
5
6

let btn = document.querySelector(".btn");
let password = document.querySelector(".password");

btn.onclick = function(){
  console.log(password.type); //password
}

XSS(Cross Site Scripting)

  • 跨網站指令碼攻擊。

  • 在 input 裡直接撰寫 <script> 腳本來進行攻擊。

  • 盡量避免使用 .onclick + .innerHTML 方法。

名稱 innerHTML createElement
使用方法 組完字串再帶入 以DOM節點來處理
效能 比較好 比較差
安全性 比較差 比較好

javaScript 

其他相關