JavaScript 與html的元素產生關聯

Xu_Cat發表於2016-06-25
JavaScriptHTML

前情摘要

一個需求。
存在一個長寬為50畫素的淡灰色div塊，想讓它在被點選後，文字變成“White”，背景顏色變成深沉的黑。如何使用JavaScript來實現呢？

效果

點選前
點選前
點選後
點選後

關鍵字

  • getElementById
    • 通過id獲取網頁中的元素
  • getElementsByClassName
    • 通過類名獲取網頁中的元素，會獲得一個陣列
  • getElementsByTagName
    • 通過標籤獲取網頁中的元素，會獲得一個陣列

Example

getElementById

首先，在html檔案中準備一個div備用

<!--樣式-->
#div_text {
    width:50px;
    height:50px;
    background-color:#CCC;
}
<!--待會要用到的div-->
<div id="div_text" onclick="changeColorAndFont()">Black</div>

參考解釋：

- 定義了一個id為“div_text”的div標籤

- onclick="changeColorAndFont()"表示當這個div被單擊時，執行changeColorAndFont()函式

接著，我們要寫出changeColorAndFont這個函式，實現我們的需求，更換文字、文字的顏色和背景顏色

function changeColorAndFont() {
    var divText = document.getElementById("div_text");
    divText.style.backgroundColor = "#333";
    divText.style.color = "#FFF";
    divText.firstChild.nodeValue = "White";
}

參考解釋：

var divText = document.getElementById("div_text");

利用document.getElementById，引數是字串，獲取id為”div_text”的元素，並將該元素賦給divText。

divText.style.backgroundColor = "#333";
divText.style.color = "#FFF";

通過.style獲取該元素的CSS屬性，其實看名字也可以看出來backgroundColor是背景顏色，color是字型顏色。

divText.firstChild.nodeValue = "White";

這裡的firstChild可能一開始比較難理解

<body>
<h1></h1>
<div>Black</div>
</body>

在html中，有節點這麼一個概念，比如上面的程式碼，劃分一下，就是

  • body
    • h1
    • div
      • Black

像族譜一樣，body的子節點(child)有兩個，分別是h1和div。

然而值得注意的是，Black這個文字內容，也算是div的一個子節點(文字節點)。

所以divText.firstChild.value的意思就是其後代文字節點的值，如果在改變其的值之前使用

alert(divText.firstChild.value);

輸出，那麼將會輸出”Black”。

divText.firstChild.nodeValue = "White";

而這句的意思就很清楚了，將其第一個後代的節點值改變為White。

完整程式碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getElementById</title>
<style type="text/css">
#div_text {
    width:50px;
    height:50px;
    background-color:#CCC;
}
</style>
<script type="text/javascript">
function changeColorAndFont() {
    var divText = document.getElementById("div_text");
    //alert(divText.firstChild.nodeValue);
    divText.style.backgroundColor = "#333";
    divText.style.color = "#FFF";
    divText.firstChild.nodeValue = "White";
}
</script>
</head>
<body>
    <div id="div_text" onclick="changeColorAndFont()">Black</div>
</body>
</html>

getElementsByTagName

用法和getElementById的很相似，不過其多出的字母s，道出了兩個方法的差異。

假設html程式碼中存在2個div

<body>
    <div id="div_text1"  onclick="changeColorAndFont()">Black</div>
    <div id="div_text2"  onclick="changeColorAndFont()">White</div>
</body>

通過getElementsByTagName的獲取

var divTexts = document.getElementsByTagName("div");

參考解釋：
獲取html中所有的div元素
那麼divTexts將是一個陣列，利用item是獲取其子節點。

alert("第一個div是:" + divTexts.item(0).firstChild.nodeValue + "\n第二個div是:" + divTexts.item(1).firstChild.nodeValue);

參考解釋：

divTexts.item(0).firstChild.nodeValue表示第一個div的第一個子節點的文字值，即Black。
item(1)自然就是表示獲取到第二個div標籤了。

結果

結果

完整程式碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getElementById</title>
<script type="text/javascript">
function changeColorAndFont() {
    var divTexts = document.getElementsByTagName("div");
    alert("第一個div是:" + divTexts.item(0).firstChild.nodeValue + "\n第二個div是:" + divTexts.item(1).firstChild.nodeValue);
}
</script>
</head>

<body>
    <div onclick="changeColorAndFont()">Black</div>
    <div onclick="changeColorAndFont()">White</div>
</body>
</html>

getElementsByClassName

通過class的值來獲取元素，備用div

    <div class="div_text" onclick="changeColorAndFont()">Black</div>
    <div class="div_text" onclick="changeColorAndFont()">White</div>

獲取元素

var divTexts = document.getElementsByClassName("div_text");

參考解釋：
divTexts同樣是一個陣列，通過item訪問元素

alert("第一個div是:" + divTexts.item(0).firstChild.nodeValue + "\n第二個div是:" + divTexts.item(1).firstChild.nodeValue);

可以看到，甚至程式碼都不用換。

結果

結果

完整程式碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getElementById</title>
<style type="text/css">
.div_text {
    width:50px;
    height:50px;
    background-color:#CCC;
}
</style>
<script type="text/javascript">
function changeColorAndFont() {
    var divTexts = document.getElementsByClassName("div_text");
    alert("第一個div是:" + divTexts.item(0).firstChild.nodeValue + "\n第二個div是:" + divTexts.item(1).firstChild.nodeValue);
}
</script>
</head>

<body>
    <div class="div_text" onclick="changeColorAndFont()">Black</div>
    <div class="div_text" onclick="changeColorAndFont()">White</div>
</body>
</html>

再看一遍關鍵字有什麼關係呢？

關鍵字

  • getElementById
    • 通過id獲取網頁中的元素
  • getElementsByClassName
    • 通過類名獲取網頁中的元素，會獲得一個陣列
  • getElementsByTagName
    • 通過標籤獲取網頁中的元素，會獲得一個陣列

END

相關文章