因為被朋友嫌棄標題下的好長好冗, 而且看不出重點...

於是乎
這週開始改變了原本下標題的方式, 將比較不重要的字縮寫或省略, 接著主題, 接著副主題
順便練習「怎麼樣下一個 可以打動人心 的標題」 哈哈~

在改變世界前先練習改變DOM吧~

上週練習了如何使用選擇器, 會使用之後, 就可以來用選擇器改變DOM囉~

改DOM的方式其實也是非常簡單, 這裡舉幾個常用的例子

1. input

首先絕對是常用排行第一名的input, 通常實務上會用於對它的值做改變

<input id="myInput"></input>

先使用選擇器的抓到它, 這邊使用我個人最愛用的 querySelector

document.querySelector("#myInput")

接著要對它做 改變值 的動作, 於是乎, 後面串.value來改變它

// 賦予id為myInput的DOM, 並賦予值為"我是大帥哥"
document.querySelector("#myInput").value = "我是大帥哥"; 

此時會發現原本空的input欄位, 已經被我塞進了內容了

是不是很簡單阿~

那既然可以塞值, 相反的當然也能取值, 取值方式就是「不要給它值」就對了

// 取id為myInput的DOM值, 並賦予到變數上
var myInputValue = document.querySelector("#myInput").value; 
console.log(myInputValue); // "我是大帥哥"

基本上到這邊就會一半了, 剩下的一半都是依此類推

2. span

例如今天遇到一個span的內容是錯的, 我要將它改正

<span class="mySpan">我是醜男</span>

一樣要先用選擇器抓到它

document.querySelector('.mySpan')

接著後面串改變內容的語法.textContent, 再給它正確的內容就可以了

// 抓到class包含mySpan的DOM, 並賦予值為"我是大帥哥"
document.querySelector('.mySpan').textContent = '我是大帥哥(無誤)';

一樣要取內容的方式也是「不要給它內容」就對了

// 抓到class包含mySpan的DOM的值, 並賦予到變數上
var mySpanContent = document.querySelector(".mySpan").textContent; 
console.log(mySpanContent); // "我是大帥哥(無誤)"

3. 依此類推

就是依此類推
其他常用方法還有像是改變html內容 - innerHtml

document.querySelector("#myElement").innerHtml = "<h3>海賊王最高</h3>"; 

或是只要改變text內容就好的 - innerText

document.querySelector("#myElement").innerText = "海賊王最高"; 

還有進階一點的可以改變class - classlist
或是改變id - id

4. 使用方法改變DOM

上面都是取得DOM的 屬性 的方式來去做改變的方式
那其實javascript有提供內建的方法(function)也可以用於改變DOM, 例如:

• setAttribute(name, value): 設定DOM的屬性, name為屬性名稱, value為屬性值

// 抓到id為myElement的DOM, 使用setAttribute方法設定它的id為myElement2
document.querySelector("#myElement").setAttribute('id','myElement2');

• getAttribute(name): 取得DOM的屬性值, name為要取得的屬性名稱

// 抓到id為myElement的DOM, 使用getAttribute方法取得它的id
var myElementId = document.querySelector("#myElement").getAttribute('id');
console.log(myElementId); // myElement

• append(something): 在DOM裡插入東西(邪笑xD), 是在內容的最後面插入喔~

document.querySelector("#myElement").append("不要想歪歪xD");

• prepend(something): 也是在DOM裡插入東西xD, 但是是在內容的最前面插入~

document.querySelector("#myElement").prepend("就叫你不要想歪歪xD");

方法當然也是不只這幾種, 其他相關的使用方式及說明可以參考 MDN-Element

釣竿和魚都有了
就看你要如何磨練技術去釣到牠們

上面那句我想了很久呢~ 而且真的是自己寫給自己看的
希望自己經由這一年的磨練可以達到更高的境界

本週內容就到這, 下週預計寫DOM的事件, 並與使用者做互動
(事情漸漸變得有趣起來了呢~呵)
(中二病發作)