Hi，大家好，我是Tony，是一個對於JavaScript有一點點概念的新手。
挑戰第17天開始！
今天的練習內容是：JavaScript HTML DOM 網頁畫面操作演練
學習內容來自
彭彭老師JavaScript HTML DOM 網頁畫面操作演練
https://www.youtube.com/watch?v=5UEoFHYD3RU&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=23昨天的學習內容：[Day 16] JavaScript HTML DOM 核心概念
https://ithelp.ithome.com.tw/articles/10345922
昨天學操作HML DOM之後，已經初步開始跟使用者有接觸了，
之前的學習都靠console.log印出來，才知道自己的程式在幹麻。
網頁畫面，就是操作document物件底下的標籤物件群。(document物件在window物件底下)
所以接下來就來學習，標籤物件群要如何操作。
body物件是document物件的一個屬性
body物件本身就代表body標籤。
語法：document.body
body物件包含的有用屬性
document.body.innerHTML
document.body.className
document.body.id
因為除了body以外，還有其他的標籤物件會用到。
操作步驟主要有兩個：
其他的HTML標籤物件，並不是每一個都用的到，
所以我們要在想操作的HTML標籤上加上id屬性
<div id="content">這是一段文字</div>
<span id="keyword">這是一段文字<span>
let divElement=document.querySelector("#content")
let spanElement=document.querySelector("#keyword")
結合起來，取得標籤物件的操作如下：
<div id="content">這是一段文字</div>
<script>
let divElement=document.querySelector("#content")
</script>
操作標籤物件，就是在JavaScript程式去做在靜態頁面中HTML、CSS的設定。
不寫死在HTML與CSS內，改成用程式碼去做事。
主要是操作HTML屬性和CSS設定。
透過前面的取得標籤物件，接著就能運用指定變數資料的方式去更改資料。
範例如下：
<div id="content">這是一段文字</div>
<script>
let divElement=document.querySelector("#content")
// 以上是取得物件標籤
//下面是操作物件的HTML和CSS
//HTML屬性
divElement.innerHTML="這是新的字";
divElement.className="welcome";
//CSS設定
divElement.style.fontSize="30px";
divElement.style.color="blue";
</script>
用一個例子來說明，
我們想讓使用者點擊一個按鈕，來對div有一些操作。
案例操作步驟：
1.做一個按鈕button onclick
2.讓按鈕做函式呼叫
3.函式運作，讓字改變、並換成藍色的。
語法如下：
<div id="content">這是一段文字</div>
<button onclick="change();">點我</button>
<script>
function change(){
let divElm=document.querySelector("#content")
divElm.innerHTML="這是新的字";
divElm.style.color="blue"; //變成藍色
}
</script>
下方練習我們再來看結果。
<body>
<h3>HTML DOM 畫面操作</h3>
<div>練習網頁畫面操作</div>
<button>點我</button>
<script>
console.log(document.body)
</script>
</body>
網頁結果1
目前按鈕按下去還沒有任何操作
接著我們在JavaScript程式裡，
抓出body標籤，並更改資料成文字"新的內容"
document.body.innerHTML，指的是body裡面全部的內容。
<body>
<h3>HTML DOM 畫面操作</h3>
<div>練習網頁畫面操作</div>
<button>點我</button>
<script>
console.log(document.body)
document.body.innerHTML="新的內容"; //抓出body標籤，更新資料。
</script>
</body>
網頁結果2
結果能夠看到body內容全部改成"新的內容"
程式立刻執行，所以馬上就全部更新了。
但是這樣並沒有跟使用者互動到，
所以接下來把更新資料的這段程式，
放進函式，去讓按鈕執行。
先在按鈕上寫onclick，呼叫函式，讓使用者點擊按鈕後去執行函式。
再將更新資料程式放入函式。
document.body.innerHTML，指的是body裡面全部的內容。
(不用再console.log去印出body了，從Element裡的body去看變化。)
**Tips：**onclick語法寫在哪裡，就是使用者要按哪裡才有反應！
這次練習我們是寫在按鈕裡，所以按了按鈕才有動作。
如果改成寫在div裡，就變成使用者要按div那塊文字，才有動作。
語法：
<body>
<h3>HTML DOM 畫面操作</h3>
<div>練習網頁畫面操作</div>
<button onclick="change();">點我</button> <!--函式寫入按鈕-->
<script>
function change(){
document.body.innerHTML="新的內容";
}
</script>
</body>
網頁結果3 (點擊Youtube影片看結果)
但由於改變整個頁面(body)比較奇怪，不太會這樣使用，
通常都是指改變某些標籤物件而已，例如：文字變成藍色。
就要使用今天學習的內容：取得標籤物件、操作標籤物件。
點擊按鈕，要改變的內容：
以下是語法：
<head>
<style>
.text{text-decoration:underline;font-weight:bold;} 備註：CSS語法-畫底線、粗體
</style>
</head>
<body>
<h3>HTML DOM 畫面操作</h3>
<div id="content">練習網頁畫面操作</div> <!--標籤加上id屬性-->
<button onclick="change();">點我</button>
<script>
function change(){
//取得物件標籤
let elem=document.querySelector("#content");
// 操作物件標籤
elem.innerHTML="對特定標籤做操作";
elem.className="text";
elem.style.fontSize="30px"; //在CCS中，font-size:30px
elem.style.color="red";
}
</script>
</body>
網頁結果4 (點擊Youtube影片看結果)
雖然已經完成物件標籤資料更新，但我並沒有看到Styles裡顯示.text有被套用...
之後再來找出原因，或是有大神路過可以解答，真的非常感謝！
以上就是今天的學習內容，
東西真的超級多又複雜...
但今天有壓線完成很不錯，
累到沒有力氣開心了呵呵...
一樣謝謝大家，明天見。
iThome鐵人賽
看影片追技術