Day.15 DOM:取值、設值,有時還有null

Day.15 DOM:取值、設值,有時還有null

本日閱讀進度:第六章 與你的網頁互動(247~264頁)

重點摘要:

1.程式碼沒有被執行?

程式碼本身沒有問題,但瀏覽器上卻看不到效果,為什麼?

檢查看看你是不是把程式碼放在<head>元素裡,

如果是的話,因為瀏覽器執行完程式碼的時候,

底下的<body>部分尚未被載入,所以頁面沒有任何改變。

你可以選擇把程式碼移到<body>的底部,

或是告訴瀏覽器等頁面載完再執行程式碼,作法如下:

<script>
function init() {
  var otaku = document.getElementById("sunday");
  otaku.innerHTML = "我要在家看漫畫";
}

window.onload = init;
</script>

也就是建立一個名為init的函式,並把程式碼放進去。

接著,取得window物件,並將函式指定給window物件的onload屬性。

重新載入後,頁面就會顯示出效果了。

2.如何為HTML元素設定屬性?

可以使用一個名為setAttribute的方法來為HTML元素的屬性設值。

otaku.setAttribute("class", "athome");

如此一來,otaku這個元素除了原來的id屬性之外,又多了一個class屬性。

3.如何取得屬性的值?

除了有setAttribute方法可以設值外,也有getAttribute方法可以取得屬性的值。

假設我想要取得id為”tetsudo”這個元素的”fanlevel”屬性的值,可以這麼做:

var mania = document.getElementById("tetsudo");
var fanlevelText = mania.getAttribute("fanlevel");
console.log(fanlevelText);

使用getElementById找到id為”tetsudo”的元素並傳回它。

把所找到的元素賦值給名為mania的變數。

再使用getAttribute方法取得”fanlevel”屬性的值。

4.如果屬性不存在

如果使用getElementById但DOM中並不存在所指定的id的話,會得到null。

getAttribute也是同樣的結果。

DOM的部分就先介紹到這,明天要介紹麻煩的等於(=)了。

PS.標題是致敬《東京鐵塔:老媽和我,有時還有老爸》

本文同步發表於iT邦幫忙

Recent post