wordpress_blog

This is a dynamic to static website.

聯絡我

JavaScript 複習05

gee.hsu

DOM – 選取網頁元素

為什麼要瞭解 DOM?

  • DOM (Document Object Model) – 文件物件模型
  • dom tree – 節點數狀圖

瞭解 document 的重要性

// all.js
console.log('JS有正確載入');  // JS有正確載入
console.log(document);  // #document

DOM 環境配置

// index.html
// <script> 從 <head> 移到 </body> 的上方
// 程式碼是由上到下執行
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <a href="#">複習 DOM</a>
  

  <script src="all.js"></script>
</body>
</html>

querySelector 選擇器

// all.js - 1
// 選取 h1
// 宣告變數 el (是 element 元素的縮寫)
//                  選取網頁上的元素 "CSS 選擇器"
const el = document.querySelector("h1");
console.log(el);

// index.html - 2
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1 class="header">複習 Review JS</h1>
  <a href="#">複習 DOM</a>


  <script src="all.js"></script>
</body>
</html>
// all.js - 2
// 選取 .header
// const: 宣告變數
// el: element(元素)的縮寫
// =: 賦予
// document: 網頁文件
// querySelector: 選取網頁上的元素
// (".header"): "CSS 選擇器"
const el = document.querySelector(".header");
console.log(el);

textContent 寫入文字資料

// all.js
// textContent: 修改文字節點、文字內容
const el = document.querySelector("h1");
el.textContent = "Hello World!!";

innerHTML 插入 HTML 標籤

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <a href="#">複習 DOM</a>

  <div class="main">
    <p>hello!</p>
  </div>


  <script src="script.js"></script>
</body>
</html>
// all.js
// innerTHML 是先清空裡面全部內容，再重新寫入
const main = document.querySelector(".main");

// 反引號``
// 也可以使用單引號、雙引號
main.innerHTML = `<h1 class="header">innerHTML 插入 HTML 標籤</h1>`;

// main: 選取網頁的元素
// innerHTML: 增加網頁的結構
// =: 賦予
// `<h1 class="header">innerHTML 插入 HTML 標籤</h1>`: 自己組出來的字串資料

// 回顧
// 1.要加入 HTML 標籤，請使用 innerHTML
// 2.innerHTML 的特性是會把原本裡面的預設內容全部清掉，清掉以後它才會重新賦予新的值進去

innerHTML 加入變數

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <a href="#">複習 DOM</a>

  <ul class="list">
  </ul>


  <script src="all.js"></script>
</body>
</html>
// all.js
// ul.list
// <li><a href="https://www.google.com.tw">連到Google網頁</a></li>

const list = document.querySelector(".list");
console.log(list);  // <ul class="list"></ul>

let myLink = "https://www.google.com.tw";
let myName = "Google";
let content = `<li><a href="${myLink}">連到${myName}網頁</a></li>`;

list.innerHTML = content + content;

textContent 與 innerHTML 運用差異

// all.js
// textContent: 文字，只針對文字做調整
// innerHTML: HTML 結構，元素、屬性、文字都可以做調整

const main = document.querySelector(".main");
// console.log(main);

// main.innerHTML = `<h1>這是一個標題</h1>`;
main.textContent = `<h1>這是一個標題</h1>`;

// 使用時機
// HTML 標籤、顯示 DOM 結構時，使用 innerHTML
// 只是文字內容的時候，使用 textContent

setAttribute 增加 HTML 標籤屬性

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <a href="#">Google 連結</a>


  <script src="script.js"></script>
</body>
</html>
// style.css
.red {
  color: red;
}
// all.js
const myLink = document.querySelector("a");
// console.log(myLink);

//                  屬性     內容
myLink.setAttribute("href", "https://google.com.tw");
myLink.setAttribute("class", "red");

querySelectorAll 可重複選取多個元素

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <a href="#">Google 連結</a>
  <a href="#">Google 連結</a>


  <script src="all.js"></script>
</body>
</html>
// style.css
.red {
  color: red;
}
// all.js
// querySelector 只會選取第一個符合的元素
// 回傳是 DOM 節點

// querySelectorAll 可重複選取多個元素
// 回傳是 NodeList 陣列節點

const myLinks = document.querySelectorAll("a");

console.log(myLinks);  // NodeList: 節點列表

//                      屬性     內容
myLinks[0].setAttribute("href", "https://google.com.tw");
myLinks[0].setAttribute("class", "red");

//                      屬性     內容
myLinks[1].setAttribute("href", "https://google.com.tw");
myLinks[1].setAttribute("class", "red");

.innerHTML、.textContent、.getAttribute 取值方法

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <a href="https://www.google.com.tw" class="red">
    <span>Google連結</span>
  </a>


  <script src="all.js"></script>
</body>
</html>
// all.js
// .innerHTML 取的值是 HTML 結構
// .textContent 取的值是文字
// .getAttribute 取的值是屬性

const myLink = document.querySelector("a");
console.log(myLink);

console.log(myLink.getAttribute("href"));
console.log(myLink.getAttribute("class"));
console.log(myLink.innerHTML);

let content = myLink.innerHTML;
console.log(content);

console.log(myLink.textContent);

表單元素取值方式

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <input type="text" class="txt" value="你好嗎?">
  <select class="list">
    <option value="台北市">台北市</option>
    <option value="高雄市">高雄市</option>
  </select>


  <script src="all.js"></script>
</body>
</html>
// all.js
// input 取值
const txt = document.querySelector(".txt");
console.log(txt.value);

// select 取值
const list = document.querySelector(".list");
console.log(list.value);
console.log(list[0].value);
console.log(list[1].value);

// 賦予值
txt.value = "How are you?";
console.log(txt.value);

txt.value = "台北市";
console.log(list.value);