HTML DOM基礎知識
? DOM（Document Object Model）是一個標準，W3C（World Wide Web）指定的，它定義了一個訪問文檔（如：XML、HTML）的標準。HTML DOM是HTML的標準對象模型、編程接口，它包含如下內容：
1、 HTML元素都是對象
2、 包含了HTML元素的所有屬性
3、 訪問HTML元素的方法
4、 HTML元素的事件
? 頁面加載完，瀏覽器就生成一個樹形DOM。回憶一下，數據結構與算法的書籍里學習的樹形結構，如：無序樹、二叉樹、完全二叉樹、霍夫曼樹、B樹、B+樹。節點之間的關系有很多種，比如：根節點、子節點、兄弟節點、父節點、祖先節點。HTML的模型同樣的有這樣的節點關系，它的根節點是：<html>、它的一個子節點是<body>。
? 就是依靠這個模型，我們的JavaScript可以：
改變HTML元素
改變HTML元素的屬性
移除HTML元素
移除HTML元素的屬性
添加HTML元素
添加HTML元素的屬性
改變CSS
移除CSS
響應HTML事件
創建HTML事件
關于HTML DOM的常用函數
? 當我們需要修改一個HTML元素的時候，我們需要先找到它，然后修改它的內容、它的屬性、它的CSS。
查找HTML元素及其子節點
- 通過ID查找
document.getElementById("car");
? 獲取到一個id為car的元素，找到了返回的是一個對象，沒有找到的話，返回null。document是對象，getElementById("car")是方法。
- 通過元素名獲取
var CarColor=document.getElementsByTagName("span");
? 返回所有的span元素。一個頁面里可能有很多個span元素，這個函數返回的是一個集合，也可以在一定程度上理解為數組，但，它不是數組。你可以這樣去訪問這個集合的元素：
CarColor[0];
? 你也可以這樣得到這個集合有多少元素
CarColor.length;
- 通過元素的class獲取
var CarColor=document.getElementsByClassName("color");
? 一個頁面里可能有很多個元素的類名是color，這個函數返回的是一個集合，也可以在一定程度上理解為數組，但，它不是數組。你可以這樣去訪問這個集合的元素：
CarColor[0];
? 你也可以這樣得到這個集合有多少元素
CarColor.length;
- 函數querySelectorAll()
document.querySelectorAll("span.color");
? 查找span元素里class為"color"的元素
- 復雜的例子，組合使用以上幾個函數
5.1 查找id為"car"的元素下面所有的<li>元素
var car = document.getElementById("car");
var carList = car.getElementsByTagName("li");
- 查找第一個子節點
document.getElementById("demo").firstChild;
- 獲取第一個子節點的值（innerHTML）
document.getElementById("demo").firstChild.nodeValue;
也可以這樣
document.getElementById("demo").childNodes[0].nodeValue;
修改HTML元素及其屬性
- 修改一個元素的內容
document.getElementById("car").innerHTML="BMW";
document是對象，getElementById()是方法，innerHTML是getElementById()方法返回的元素對象的屬性。
- 修改元素的屬性
document.getElementById("birdImage").src = "parrot.jpg";
把img元素的src屬性修改為：parrot.jpg。
添加HTML元素、移除HTML元素
- 添加HTML元素
var note=document.createElement("span");//創建元素
var content=document.createTextNode("The British Broadcasting Corporation is a British
public service broadcaster. ");//添加內容
note.appendChild(note);
如果是插入到id為brief的元素后面
var DivElement=document.getElementById("brief");
DivElement.appendChild(note);
如果是插入到id為brief的元素前面
var DivElement=document.getElementById("brief");
DivElement.insertBefore(note);
- 移除一個元素
var parent = document.getElementById("");
var child = document.getElementById("");
parent.removeChild(child);
修改CSS、移除CSS
- 修改CSS
函數原型
document.getElementById(id).style.property=;
這個函數的property就是在CSS里能設置的屬性。如：字體大小、顏色、邊框、補白、背景圖片等等。
例如：改變p1元素的字體大小
document.getElementById("p1").style.font-size=18px;
- 移除CSS
這個比較難了，需要自己寫函數，沒有現成的可以調用。
