【JS】文件物件模型

DOM

 發表於 2021-02-16  |  3 分鐘  |  547 個字

【JS】文件物件模型

DOM

 發表於 2021-02-16  |  3 分鐘  |  547 個字

取得DOM元素方法

方法 取得目標 得到結果
.getElementById() id 只能取得一個
.getElementsByName() name 以陣列形式呈現
.getElementsByTagName() <標籤> 以陣列形式呈現
.querySelector() id、class、<標籤> 只能取得一個
.querySelectorAll() id、class 以陣列形式呈現

.getElementById()

1
2
3
4
5
6
7

// <-----html----->
#a 蘋果
#a 香蕉

// <-----js----->
let a = document.getElementById("a");
console.log(a);  //<div id='a'>蘋果</div>

.getElementsByName()

1
2
3
4
5
6
7
8

// <-----html----->
div(name="a") 蘋果
div(name="a") 香蕉

// <-----js----->
let a = document.getElementsByName("a");
console.log(a[0]);  //<div id='a'>蘋果</div>
console.log(a[1]);  //<div id='a'>香蕉</div>

.getElementsByTagName()

1
2
3
4
5
6
7
8

// <-----html----->
p 蘋果 
p 香蕉

// <-----js----->
let a = document.getElementsByTagName("p");
console.log(a[0]);  //<p>蘋果</p>
console.log(a[1]);  //<p>香蕉</p>

.querySelector()

1
2
3
4
5
6
7
8
9

// <-----html----->
.box 蘋果 
  a(href="#") 123
.box 香蕉
  a(href="#") 456

// <-----js----->
let a = document.querySelector(".box a");
console.log(a);  //<a href='#'>123</a>

.querySelectorAll()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// <-----html----->
.box 蘋果 
  a(href="#") 123
.box 香蕉
  a(href="#") 456

// <-----js----->
let a = document.querySelectorAll(".box a");
console.log(a[0]);  //<a href='#'>123</a>
console.log(a[1]);  //<a href='#'>456</a>

.textContent

  • 修改DOM元素的"文字"內容。

1
2
3
4
5
6
7

// <-----html----->
.box 蘋果 

// <-----js----->
let a = document.querySelector(".box");
a.textContent = "香蕉";
console.log(a);  //<div class='box'>香蕉</div>

.setAttribute()

  • 設定DOM元素的屬性。

1
2
3
4
5
6
7

// <-----html----->
a(href="#") 連結 

// <-----js----->
let a = document.querySelector("a");
a.setAttribute("href","https://www.google.com.tw/");
console.log(a);  //<a href='https://www.google.com.tw/'>連結</a>

.getAttribute()

  • 取得DOM元素的屬性。

1
2
3
4
5
6

// <-----html----->
a(href="https://www.google.com.tw/") 連結

// <-----js----->
let a = document.querySelector("a");
console.log(a.getAttribute("href"));  //https://www.google.com.tw/

.style

  • 改變DOM元素的樣式。

1
2
3
4
5
6
7

// <-----html----->
a(href="#") 連結 

// <-----js----->
let a = document.querySelector("a");
a.style.backgroundColor = "red";
console.log(a);  //<a href='#' style='background-color: red;'>連結</a>

.value

  • 取得DOM元素的值。

1
2
3
4
5
6

// <-----html----->
input(type="text" value="蘋果")

// <-----js----->
let input = document.querySelector("input");
console.log(input.value);  //蘋果

.type

  • 取得DOM元素的類型。

1
2
3
4
5
6

// <-----html----->
input(type="text" value="蘋果")

// <-----js----->
let input = document.querySelector("input");
console.log(input.type);  //text

.innerHTML

  • 在DOM元素裡增加<標籤>，會先清空。

1
2
3
4
5
6
7

// <-----html----->
ul 

// <-----js----->
let ul = document.querySelector("ul");
ul.innerHTML = `<li>蘋果</li>`;
console.log(ul);  //<ul><li>蘋果</li></ul>

.createElement

  • 創造HTML<標籤>。

1
2
3

// <-----js----->
let li = document.createElement("li");
console.log(li);  //<li></li>

.appendChild

  • 在DOM子元素插入Node節點。

1
2
3
4
5
6
7
8

// <-----html----->
ul

// <-----js----->
let li = document.createElement("li");
let ul = document.querySelector("ul");
ul.appendChild(li);
console.log(ul);  //<ul><li></li></ul>

innerHTML + for

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// <-----html----->
ul

// <-----js----->
let fruits=[
  {
    name: "蘋果",
    amount: 100,
    prod:["美國","日本"] 
  },
  {
    name: "香蕉",
    amount: 300,
    prod:["台灣","泰國"] 
  },
  {
    name: "鳳梨",
    amount: 500,
    prod:["夏威夷","新加玻"] 
  },
];
let str = "";
let ul = document.querySelector("ul");
for(let i=0 ; i<fruits.length ; i++){
  str += `<li>${fruits[i].name}</li>`
  ul.innerHTML = str;
}
console.log(ul);  //<ul><li>蘋果</li><li>香蕉</li><li>鳳梨</li></ul>

createElement + appendChild + for

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// <-----html----->
ul

// <-----js----->
let fruits=[
  {
    name: "蘋果",
    amount: 100,
    prod:["美國","日本"] 
  },
  {
    name: "香蕉",
    amount: 300,
    prod:["台灣","泰國"] 
  },
  {
    name: "鳳梨",
    amount: 500,
    prod:["夏威夷","新加玻"] 
  },
];
let ul = document.querySelector("ul");
for(let i=0 ; i<fruits.length ; i++){
  let li = document.createElement("li");
  li.textContent = `${fruits[i].name}`;
  ul.appendChild(li);
}
console.log(ul);  //<ul><li>蘋果</li><li>香蕉</li><li>鳳梨</li></ul>

XSS(Cross Site Scripting)

  • 跨網站指令碼攻擊。

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

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

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

其他相關