新手自學筆記 day3 Javascript HTML DOM

HTML DOM 是什麼？

• 根據HTML標籤建立的物件結構
• 每個HTML標籤在Javascript中都有對應的標籤物件
• 把HTML標籤物件串接在一起, 成為物件結構, 就稱之為HTML DOM
• HTML DOM (Document Object Model)

操作Document 物件：

• Document 物件是 Window 物件的一個屬性

window.document, 可簡寫為 document

• Document 物件包含有用的屬性

document.body
document.title

• Document 物件包含有用的方法

document.querySelector ("#Css選擇器") // S要大寫

實例：

• 更改網頁標題

<script>
　　document.title="新的標題";
</script>

• 更改網頁內容 (body 標籤內的內文)

<script>
　　document.body.innerHTML="Hello HTML DOM";
</script>

取得其他標籤：

• 除了body 標籤以外的標籤
• 操作步驟

1. 取得物件標籤
2. 操作物件標籤

取得物件實例：

// 第一步: 在想操作的HTML標籤上設定一個ID
<div id="content">這是一段字</div>
<span id="keyword">這是一段字</span>
// 第二步: 利用document.querySelector() 取得物件標籤
let divElement=document.querySelector("#content");
let spanElement=document.querySelector("#keyword");

操作物件的HTML跟CSS實例：

<div id="content">這是一段字</div>
<script>
　　let divElement=document.querySelector("#content");
　　divElement.innerHTML="這是一段新的內容";
　　divElement.className="welcome"; // 給標籤一個Class屬性(選擇器)
　　divElement.style.fontSize="30px"; // 字體大小
　　divElement.style.color="pink";  // 注意屬性的大小寫　　
</script>

配合使用者點擊實例：

<div id="content">這是一段文字</div>
<button onclick=change();>點我</button>
　　function change(){
　　　　let divElem=document.querySelector("#content")
　　　　　　divElem=document.innerHTML="這是一段新的內容"
　　　　　　divElem=document.style.fontSize="30px"
　　　　　　divElem=document.style.color="pink"
　　}