本篇介紹如何透過 JavaScript 來控制或修改 DOM Tree 上面的節點元素。
這些元素可以是標籤、屬性或文本內容。
讓我們討論如何使用getAttribute、innerHTML 和 textContent 方法
參考資料:
https://hackmd.io/@5LnhTJLgQHyOZgGrp8n55g/SJMDAXp5Y
https://tsuifei.github.io/blog/DOM_Methodes/
https://javascript.plainenglish.io/the-dom-of-javascript-848506ebf386
首先，我們看以下HTML元素。
HTML文檔由各種不同的元素組成，這些元素可以是標籤、屬性或文本內容。
在我們的討論中，我們將專注於一些常見的HTML元素。
a.
<h1>和<h2>標籤
<h1> 和 <h2> 標籤通常用於標題，其中<h1> 表示主標題，而<h2> 表示次要標題。
我們可以藉由使用getAttribute 方法來獲取這些標籤的屬性值，例如id或class。
b.
<a>標籤
<a> 標籤用於創建超連結，其中href 屬性指定連結的URL。我們可以使用getAttribute 方法來獲取href 屬性的值。
c.
<span>標籤
<span> 標籤通常用於包裹內容以便進行樣式化或JavaScript操作。我們可以使用innerHTML 和 textContent 方法來獲取或設置<span> 元素的內容。
<script src="JS\all.js"></script>我們先把HTML 文本內容寫好，內部元素<a>、<span>、<h1>、<h2>
<body>
<h1> 這是海景第一排</h1>
<h2 class="header"> 就是我啊! </h2>
<a href="https://products.aspose.app/cells/zh-hant/editor/html" class="link">
<span> 連結給他點下去! </span></a>
</body>檔案名稱: all.js
getAttribute 方法用於獲取HTML元素的特定屬性的值。
如果我們想要獲取上面 <a> 元素的href 屬性的值，以下可以這樣做。
const myLink=document.querySelector("a");
console.log(myLink.getAttribute("href"));
console.log(myLink.getAttribute("class"));
console.log(hrefurl_data); // 輸出: 連結的URLinnerHTML 方法用於擷取或設置元素內部HTML內容，包括所有子元素和文本。這方法允許我們直接操作元素的HTML結構。例如：
console.log(myLink.innerHTML);textContent 方法 ，它會自動過濾掉HTML標籤。這對於獲取純文本非常有用。
// 給與一個賦予值 content
let content = myLink.innerHTML;
console.log(content);import 與 export 在Node.js 有提到其用法: Node.js require、module以及exports 模組設定 - Hugo Habor 每一個Javascript檔案可當作獨立模組系統(ES Module) 1. Module（模組）…
作者今天遇到一個很奇怪的問題 寫程式寫到一半... 點擊應用程式時... 怎麼都跳不出畫面... 後來查詢了一下是Reg註冊可能被微軟更新給搞掉了... 文章資訊來源: 【以解決】各位.exe檔案打不開，不要相信"在 Windows 7 或 Windows Vista 中無法打開 .EXE 檔案"這篇文章…
Node.js可以提供你很多模組，今天來探索如何使用 Node.js 的 http 模組來架設一個簡單的伺服器。 本篇使用模組require 載入你所需要的模組。這次我們使用'http' 模組來創造一個簡單的server。 資料參考 Node.js - createServer 起手式 - iT…
針對Node.js來談談 require、module以及exports 模組設定。這些概念允許開發者將大型程序分解成小的、可管理的、可重用的部分，稱為模塊。 下面將逐一介紹這些概念，以及它們如何與 JavaScript 關聯。 An Essential Guide to Node.js Modules (javascripttutorial.net) 1. Module（模組）…
像是很多專案必須讀取國家資料中心的metadata，許多檔案格式為CSV、JSON、Html可以利用網頁技術去爬蟲；拿一個範例來嘗試看看就知道這些語法的實際用途。 [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) - Cool3c 在這裡我們使用台北市資料大平台 UBike2.0 作為資料依據! 目的 來抓取空位數量 >15， 抓取空位數量 <15。…