3.11 DOM 基礎節點操控

找出頁面上的元素

假設有一個結構如下：

<span id="a" class="other">這是 span</span>

以下 5 種寫法，都可以找出 span 標籤：

// 找出頁面上有 id 的名稱叫做 a 的元素，然後存至變數
let my_el1 = document.getElementById("a");

// 找出頁面上有標籤名稱叫做 span 的元素，然後存至變數，
// 頁面上會有很多個 span 標籤，所以會存至陣列，故抓出索引值為 0 的元素
let my_el2 = document.getElementsByTagName("span")[0];

// 找出頁面上有 class 名稱叫做 other 的元素，然後存至變數，
// 頁面上會有很多個標籤有 class 的名稱叫做 other，所以會是陣列，故抓出索引值為 0 的元素
let my_el3 = document.getElementsByClassName("other")[0];

// 找出頁面上是 span 標籤且同時有 class 叫做 other，然後存至變數，
// 只會抓出找到的第一個
let my_el4 = document.querySelector("span.other");

// 找出頁面上是 span 標籤且同時有 class 叫做 other，然後存至變數，
// 會抓出多個，然後會是陣列，故只抓出索引值為 0 的元素
let my_el5 = document.querySelectorAll("span.other")[0];

元素.innerHTML

將標籤裡的東西都移除，然後放入指定的東西。

例：

html：

<span id="a" class="other">這是 span</span>

執行完以下 js 之後：

let my_el1 = document.getElementById("a");
my_el1.innerHTML = "其它文字";

原來的 html 會變成：

<span id="a" class="other">其它文字</span>

元素.value

取得文字框的資料。

例：

<input type="text" id="my_text">

然後執行以下程式，就可以在 console 中，印出文字框的資料：

var my_text_el = document.getElementById("my_text");
console.loog(my_text_el.value);