Hugo Habor

Tag: innerHTML

  • JavaScript DOM-擷取HTML 表單內容

    JavaScript DOM-擷取HTML 表單內容

    在本篇開始之前，佛心的給大家 HTML Form 表單的設計入門預習。

    畢竟要了解這一篇，是需要了解HTML 裡面一些原生設計好的元件的喔!

    參考連結:

    https://hackmd.io/@MikanS/BypCrTfkF

    網頁表單內容擷取

    HTML

    好想吃漢來海港喔~ 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Practice/DOM/CSS/Decoration.css">
    <title>DOM Get Values</title>
</head>
<body>

    <input type="text" class="txt" value="想要吃甚麼?"> 

    <select class="list">
          <option value="肯德基">肯德基</option>
          <option value="麥當勞">麥當勞</option>
          <option value="拿坡里炸雞">拿坡里炸雞</option>
          <option value="漢來海港">漢來海港</option>
          <option value="寧夏夜市">寧夏夜市</option>
    </select>

<script src="Practice/DOM/JS/all01.js"></script>

    
</body>
</html>

    JavaScript

    加入選擇器document.querySelector() 此時你可以將文本內容提取出來。

    const txt =document.querySelector(".txt");
console.log(txt.value);

const list =document.querySelector(".list");
console.log(list.value)

    CSS

    .txt{
    background:gray;
    padding: 5px;
    font-size: 120%;
    color:beige;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}


.list{
    background:gray;
    padding: 5px;
    font-size: 120%;
    color:beige;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

    網頁表單畫面

    HTML Form 表單

    執行視窗

    qureyselector示範畫面

    操作執行視窗

    此時我們可以來操作看看執行視窗，將.txt 賦於其他字串資料。

    JavaScript

    const txt =document.querySelector(".txt");
console.log(txt.value);
txt.value ="好像不知道要選甚麼..."

const list =document.querySelector(".list");
console.log(list.value)

    執行視窗

    直接操作執行視窗_觀看互動過後的更新值

    將原本的肯德基 >> 拿坡里炸雞

    輸入 list.value

    你會得到了最新更改過的賦予值!

    https://www.lovethispic.com/image/337093/the-day-you-stop-learning-is-the-day-you-start-dying

  • JavaScript DOM 擷取方法-getAttribute, innerHTML and textContent

    JavaScript DOM 擷取方法-getAttribute, innerHTML and textContent

    本篇介紹如何透過 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); // 輸出: 連結的URL

    JS-innerHTML方法

    innerHTML 方法用於擷取或設置元素內部HTML內容，包括所有子元素和文本。這方法允許我們直接操作元素的HTML結構。例如：

    console.log(myLink.innerHTML);

    JS-innerHTML、textContent混用方法

    textContent 方法 ，它會自動過濾掉HTML標籤。這對於獲取純文本非常有用。

    // 給與一個賦予值 content
let content = myLink.innerHTML;
console.log(content);

    執行結果顯示