本篇介紹如何透過 JavaScript 來控制或修改 DOM Tree 上面的節點元素。
這些元素可以是標籤、屬性或文本內容。
讓我們討論如何使用getAttribute、innerHTML 和 textContent 方法
參考資料:
https://hackmd.io/@5LnhTJLgQHyOZgGrp8n55g/SJMDAXp5Y
https://tsuifei.github.io/blog/DOM_Methodes/
DOM-Tree
https://javascript.plainenglish.io/the-dom-of-javascript-848506ebf386
1. HTML 取用元素標籤
首先，我們看以下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> 元素的內容。
DOM 環境配置
<script src="JS\all.js"></script>HTML 文本內容
我們先把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>JS檔案建立
檔案名稱: all.js
JS-getAttribute方法
getAttribute 方法用於獲取HTML元素的特定屬性的值。
如果我們想要獲取上面 <a> 元素的href 屬性的值，以下可以這樣做。
const myLink=document.querySelector("a");
console.log(myLink.getAttribute("href"));
console.log(myLink.getAttribute("class"));
console.log(hrefurl_data); // 輸出: 連結的URLJS-innerHTML方法
innerHTML 方法用於擷取或設置元素內部HTML內容，包括所有子元素和文本。這方法允許我們直接操作元素的HTML結構。例如：
console.log(myLink.innerHTML);JS-innerHTML、textContent混用方法
textContent 方法 ，它會自動過濾掉HTML標籤。這對於獲取純文本非常有用。
// 給與一個賦予值 content
let content = myLink.innerHTML;
console.log(content);執行結果顯示
