JS設定標籤的內容和樣式
上一期堡堡給大家分享了操作符與資料型別轉換。掌握JS操作符的目的是為了能夠靈活的操作變數，以便完成JS的各種邏輯處理；掌握資料型別轉換可以讓我們避免一些不該發生的問題，能夠讓我們更好的完成JS的各種功能。如果想具體瞭解操作符與資料型別轉換，可以檢視：操作符與資料型別轉換。而今天我們主要講解JS邏輯和DOM的結合 - JS設定標籤的內容和樣式。
Tips：由於上一期的文章篇幅過長，微信的文章有字數要求，所以小編把部分的內容（操作符）放到這一期進行講解。
繼上一期的內容 - 操作符
賦值操作符：=(賦值) +=(加/賦值) -=(減/賦值) *=(乘/賦值) /=(除/賦值) %=(取餘/賦值)
如果在賦值操作符（=）前面再新增上加、減、乘、除、取餘的操作符就可以完成複合賦值操作，能更為簡便的完成賦值和計算操作（複合賦值操作中間不能含有空格，例如：+ =是錯誤的書寫，正確的書寫是+=）。
例如：var a = 10; a += 5;是 a = a + 5;的簡寫，其意思是把變數a加上5得出的結果再重新賦值給a，其它操作符同理。
例項：
<script type="text/javascript"> // 例項中的命名只是為了大家方便理解，請勿模仿 var a = 1; var b = 2; var c = 3; var d = 4; var e = 5; // 利用複合賦值操作 a += 2; // 等價於a = a + 2; b -= 2; // 等價於b = b - 2; c *= 2; // 等價於c = c * 2; d /= 2; // 等價於d = d / 2; e %= 2; // 等價於e = e % 2; // 輸出 console.log(a); console.log(b); console.log(c); console.log(d); console.log(e); </script>
輸出結果：3 0 6 2 1
一元操作符：--(遞減) ++(遞增)
只能操作一個值的操作符叫做一元操作符；遞增和遞減操作符是借鑑自C語言，而且各有兩個版本：前置型和後置型；
前置型：操作符位於要操作的變數之前，例如：++a;表示的是a的值加1；
例項：
<script type="text/javascript">
var age = 20;
var result = ++age;
console.log(result);
</script>輸出結果：21
程式碼分析：先給age加1，再賦值給result，所以最終結果為21；
後置型：操作符位於要操作的變數之後；例如：a++;表示的是先執行再給a的值加1；
例項：
<script type="text/javascript">
var age = 20;
var result = age--;
console.log(result);
console.log(age);
</script>輸出結果：20 19
程式碼分析：age先賦值給result，age本身再減1，所以最終結果result為20，age為19；
到這邊為止，JS基礎算是告一段落了，希望大家能把JS基礎打紮實，它直接影響著後期JS的學習。接下來，我們要給大家講解的是邏輯與DOM的相結合了。
本文內容概要：
1 獲取標籤
2 設定樣式
3 獲取/設定標籤的內容
4 課程小結
5 課後練習
1 獲取標籤
在講解獲取標籤之前，我們需要來理解一個概念，什麼是物件（Object）？舉一個生活中的例子，咱們可以把“汽車”看作是物件，汽車它能在路上跑、有鳴笛等功能，汽車它具有型號、型別、顏色等屬性。從這可以得出結論，物件是具有屬性和功能。
在學CSS的時候，我們是如何選擇到對應的標籤進行樣式的控制？利用了CSS選擇器。那麼JS如何在網頁中找到相應的標籤進行相關的操作？在HTML5當中，網頁其實就是一個物件 —— document（文件）物件，該物件裡面已經存在著獲取標籤的方法 - getElementById()，我們只需要負責呼叫該方法就能獲取到相應的標籤。那麼問題來了，如何呼叫getElementById()方法？接著往下看吧。
上面提到了物件是具有屬性和功能，那我們如何使用物件的屬性或功能呢？具體可以通過物件.屬性或物件.方法（功能就是方法）的形式來進行呼叫，如：document.getElementById('id名')。
程式碼例項：
<!-- 結構 -->
<div class="wrap">
<h2>HTML5學堂小編 - 堡堡</h2>
<p id="des">陳能堡 - 夢幻雪冰</p>
<p id="intro">HTML5學堂 - 原來技術可以通俗易懂</p>
</div>
<!-- JavaScript -->
<script type="text/javascript">
// 通過getElementById()方法獲取標籤
var desEle = document.getElementById('des');
var introEle = document.getElementById('intro');
// 輸出獲取到的結果
console.log(desEle);
console.log(introEle);
// 檢測資料型別
console.log(typeof(desEle));
console.log(typeof(introEle));
</script>輸出結果：
程式碼分析：
- 將getElementById()方法拆開來理解，get意思是獲取，element是標籤，by是通過，id是標籤的id名，結合起來的意思是通過id名獲取標籤，另外JS的識別符號命名推薦中，使用的是小駝峰命名法，所以結合起來就是getElementById()；
- 網頁是一個document物件，通過物件.方法的形式來呼叫getElementById()方法獲取標籤，如：document.getElementById('intro');
- 獲取到的標籤其實也是物件，可以通過物件.方法或物件.屬性的形式來操作標籤；具體如何操作標籤，接著看下面的內容。
2 設定樣式
現在要對獲取到的標籤進行設定樣式的操作，回顧之前學的HTML與CSS，給標籤設定樣式有幾種方式？我們是不是使用CSS選擇器、標籤內聯來控制標籤的樣式。那在JS中，它到底是如何控制標籤的樣式？
1 通過標籤/元素.style.屬性 = "屬性值" 進行樣式的控制
標籤也是物件，可以使用物件.屬性的形式來使用style物件；因為style也是物件，所以它也可以通過物件.屬性來控制標籤的樣式。
注意：元素.style.屬性中，“屬性”只能接受把CSS屬性（由一個以上單片語成，用“-”中劃線連線的CSS屬性）轉成小駝峰命名的形式，如：font-size——>fontSize；
例如：eleObj.style.fontSize = '30px';
2 通過控制類名進行樣式的控制
標籤也是物件，使用標籤的className屬性給標籤新增類名；
注意：因為class是JS的保留字，不符合命名規範，所以類名屬性是className而不是class；
例如：eleObj.className = 'intro-ele';
程式碼例項：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - HTML5學堂</title>
<link rel="stylesheet" href="reset.css">
<style>
.intro-ele {
background-color: skyblue;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 結構 -->
<div class="wrap">
<h2>HTML5學堂小編 - 堡堡</h2>
<p id="des">劉國利 - 獨行冰海</p>
<p id="intro">HTML5學堂 - 原來技術可以通俗易懂</p>
</div>
<!-- JavaScript -->
<script type="text/javascript">
// 通過getElementById()方法獲取標籤
var desEle = document.getElementById('des');
var introEle = document.getElementById('intro');
// 通過style物件控制標籤樣式
desEle.style.backgroundColor = 'pink';
// 通過className屬性控制標籤樣式
introEle.className = 'intro-ele';
</script>
</body>
</html>執行效果：
程式碼分析：
- 程式碼desEle.style.backgroundColor中，因為style物件的屬性只能接受小駝峰命名，所以需要把background-color——>backgroundColor；
- 利用style物件給標籤設定樣式，CSS樣式是出現在標籤內裡面；
- 程式碼introEle.className = 'intro-ele';中，intro-ele是我們預先定義好的類名選擇器（在例子中，我們在頭部定義好了類名選擇器）。
- 利用className屬性給標籤設定樣式，CSS樣式沒有出現在標籤內，只是給標籤新增類名而已；
3 獲取/設定標籤的內容
現在可以利用JS來控制標籤的樣式，能否利用JS控制標籤的內容？當然可以，我們可以使用innerHTML屬性實現修改或獲取標籤中的內容。把innerHTML屬性拆開來理解，inner的意思是裡面、內部的，HTML是開始和結束標籤之間的 HTML，包括了標籤和文字；合起來的意思是標籤裡面的內容（標籤和文字）；
例如：eleObj.innerHTML = 'HTML5學堂 - 堡堡';
程式碼例項：
<!-- 結構 -->
<div class="wrap">
<h2>HTML5學堂小編 - 堡堡</h2>
<p id="des">劉國利 - 獨行冰海</p>
<p id="intro">HTML5學堂 - 原來技術可以通俗易懂</p>
</div>
<!-- JavaScript -->
<script type="text/javascript">
// 通過getElementById()方法獲取標籤
var desEle = document.getElementById('des');
var introEle = document.getElementById('intro');
// 通過innerHTML屬性獲取標籤內容
console.log(desEle.innerHTML);
// 通過innerHTML屬性設定標籤內容
desEle.innerHTML = '陳能堡 - 夢幻雪冰';
// 輸出修改後的標籤內容
console.log(desEle.innerHTML);
// 利用innerHTML屬性新增標籤
introEle.innerHTML += '<span>這是我新新增的標籤</span>';
// 輸出修改後的標籤內容
console.log(introEle.innerHTML);
</script>輸出結果：
劉國利 - 獨行冰海
陳能堡 - 夢幻雪冰
HTML5學堂 - 原來技術可以通俗易懂<span>這是我新新增的標籤</span>
結構變化：
程式碼分析：
- 獲取到的標籤是物件，通過物件.屬性的形式來呼叫innerHTML屬性，實現修改或獲取標籤的內容；
- innerHTML屬性不僅僅可以新增文字內容，還可以新增HTML標籤，如：introEle.innerHTML += '<span>這是我新新增的標籤</span>';
4 課程小結
掌握獲取標籤的目的是能夠利用JS選擇到相應的標籤，便於對其進行相應的操作；
掌握設定樣式的目的是能夠利用JS實現對標籤樣式的控制，為實現動態的互動效果打下一定的基礎；
掌握操作標籤的內容目的在於能夠靈活的操作標籤的內容，能夠更好的輔助頁面互動效果的實現。
5 課後練習
1 id名為h5Course的div標籤 <div class="wrap" id="h5Course">HTML5學堂</div>，JS程式碼如下：
// 注意檢視id的大小寫
var con = document.getElementById("h5course");
alert(con.innerHTML);在IE、谷歌瀏覽器下測試，哪幾個瀏覽器會正常顯示？從顯示結果中可以得出什麼結論？
2 有兩個物件，var o = {num: 1};var p = {num: 2};要求書寫一段程式碼，使得o + p===3為true。
3 利用下方提供的結構程式碼（注意，提供的結構不能變化，但是可以用JS新增），完成下方的最終效果；
結構程式碼：
<!-- 結構 -->
<div class="wrap" id="outer">
</div>最終效果：
HTML5學堂 - 堡堡 耗時7h