Day17 - DOM(03) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 17

自我挑戰組

JavaScript 新手筆記系列第 17 篇

Day17 - DOM(03)

11th鐵人賽 javascript

hokou

2019-10-02 23:35:03

948 瀏覽

分享至

前言

今日繼續進行 DOM 的練習範例

index.html

<body>
    <a id="google" href="#">點我連結到Google</a>
    <script src="JS/test.js"></script>
</body>

存取或變更屬性值

在進行前當然要先選取你要變更的那個節點，如昨日(Day16 - DOM(02))的 getElementById() 和 querySelector()
getAttribute('')：取得屬性的值
setAttribute('屬性名','屬性值')：設定某個屬性的值為多少

var ele1 = document.querySelector('#google');
// 設定屬性 id = google 的變數為 ele1
console.log(ele1.getAttribute('href'));
// 取得其 href 屬性的值，顯示 #
ele1.setAttribute('href' , 'https://www.google.com/');
// 設定 href 的值為 https://www.google.com/
console.log(ele1.getAttribute('href'));
// 顯示 https://www.google.com/

hasAttribute('')：檢查是否有指定的屬性
removeAttribute('')：移除指定的屬性

// 承上例
if (ele1.hasAttribute('href')){
    // 假如屬性有 href 的話，(當下還有連結)
    ele1.removeAttribute('href');
    // 移除屬性 href，(結果連結被移除了)
};

操作 HTML 內容

textContent：擷取文字或更新
innerHTML：除了文字外還可以存取子屬性
- 變更屬性若因為有 " ， " 前面需加 \

// 承上，先把 if 段範例註解不執行
// 如果效果沒出來，先把後面的部分註解不執行
var ele2 = document.querySelector('#google');
console.log(ele2.textContent);
// 擷取文字
// 顯示 點我連結到Google

console.log(ele2.innerHTML);
// 顯示 點我連結到Google

ele2.textContent = '點我連結到Yahoo';
// 文字修改，但連結屬性還在，還是 https://www.google.com/

ele2.innerHTML = '點我連結到<em>Yahoo</em>';
// 除了文字還可以增加屬性，Yahoo 變成斜體
// 連結屬性未變更，還是 https://www.google.com/

ele2.innerHTML = '<a href=\"https://tw.yahoo.com/\">點我連結到<b>Yahoo</b></a>';
// 除了文字還可以增加屬性，變成粗體，並且修改連結 https://tw.yahoo.com/
// ''內因為連結而有""，"前面需加 \