JavaScript核心技術學習筆記（1）——DOM基礎
DOM基礎
一、DOM是什麽
Document object Model，文檔對象模型，是由W3C定義的一個標準。簡單來說，DOM裏面有很多方法，我們通過它提供的方法來操作一個頁面中的某個元素，例如改變這個元素的顏色、點擊這個元素實現某些效果、直接把這個元素刪除等。
一句話總結：DOM操作，可以簡單理解成“元素操作”。
為方便理解，我們可以這樣思考：每一個元素就是一個節點，而每一個節點就是一個對象。也就是說，我們在操作元素時，其實就是把這個元素看成一個對象，然後使用這個對象的屬性和方法來進行相關操作（這句話非常重要）。
二、節點類型
在JS中，節點也是分為很多類型的。DOM節點共有12中類型，不過常見的只有3種，分別是：
? 元素節點
? 屬性節點
? 文本節點
如下面這段代碼：
<div id="wrapper">xff賊帥</div>
元素節點是整段話，屬性節點是id="wrapper"，文本節點是xff賊帥。
三、獲取元素
獲取元素，準確來說，就是獲取元素節點（註意不是屬性節點或文本節點）。對於一個頁面，我們想要對某個元素進行操作，就必須通過一定的方式來獲取該元素，只有獲取到了才能對其進行相應的操作。
在JS中，我們可以通過以下六種方式來獲取指定元素：
? getElementById()
? getElementsByTagName()
? getElementsByClassName()
? querySelector()和querySelectorAll()
? getElementByName()
? document.title和document.body
1. getElementById()
此方式為通過id來選中元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
window.onload = function()
{
var oDiv = document.getElementById("div1");
oDiv.style.color = "red";
}
</script>
</head>
<body>
<div id="div1">xff賊帥</div>
</body>
</html>
註：我們都知道，瀏覽器是從上到下解析一個頁面的。這個例子的JS代碼在HTML代碼的上面，如果沒有window.onload，瀏覽器解析到document.getElementById(“div1”)就會報錯，因為它不知道div1究竟是誰，所以我們必須使用window.onload，等到瀏覽器把整個頁面解析完了再去解析window.onload內部的代碼，這樣就不會報錯了。
2. getElementsByTagName()
此方式為通過標簽名來選中元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
window.onload = function()
{
document.body.innerHTML = "<input type=‘button‘ value=‘按鈕‘/><input type=‘button‘ value=‘按鈕‘/><input type=‘button‘ value=‘按鈕‘/>"
var oBtn = document.getElementsByTagName("input");
oBtn[0].onclick = function()
{
alert("表單元素共有："+oBtn.length+"個");
}
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
window.onload = function()
{
document.body.innerHTML = "<input id=‘btn‘ type=‘button‘ value=‘按鈕‘/><input type=‘button‘ value=‘按鈕‘/><input type=‘button‘ value=‘按鈕‘/>"
var oBtn = document.getElementById("btn");
oBtn.onclick = function()
{
alert("表單元素共有："+oBtn.length+"個");
}
}
</script>
</head>
<body>
</body>
</html>
註：對比以上1.2.兩種方式可以發現，1.無法實現操作動態創建的DOM元素，而2.可以操作動態創建的DOM元素。
JavaScript核心技術學習筆記（1）——DOM基礎