HTML DOM基礎(chǔ)知識
? DOM（Document Object Model）是一個標準，W3C（World Wide Web）指定的睬澡，它定義了一個訪問文檔（如：XML、HTML）的標準秩彤。HTML DOM是HTML的標準對象模型杨凑、編程接口，它包含如下內(nèi)容：
1哀蘑、 HTML元素都是對象
2、 包含了HTML元素的所有屬性
3葵第、 訪問HTML元素的方法
4绘迁、 HTML元素的事件
? 頁面加載完，瀏覽器就生成一個樹形DOM卒密∽禾ǎ回憶一下，數(shù)據(jù)結(jié)構(gòu)與算法的書籍里學(xué)習(xí)的樹形結(jié)構(gòu)哮奇，如：無序樹膛腐、二叉樹睛约、完全二叉樹、霍夫曼樹依疼、B樹痰腮、B+樹。節(jié)點之間的關(guān)系有很多種律罢，比如：根節(jié)點膀值、子節(jié)點、兄弟節(jié)點误辑、父節(jié)點沧踏、祖先節(jié)點。HTML的模型同樣的有這樣的節(jié)點關(guān)系巾钉，它的根節(jié)點是：<html>翘狱、它的一個子節(jié)點是<body>。
? 就是依靠這個模型砰苍，我們的JavaScript可以：
改變HTML元素
改變HTML元素的屬性
移除HTML元素
移除HTML元素的屬性
添加HTML元素
添加HTML元素的屬性
改變CSS
移除CSS
響應(yīng)HTML事件
創(chuàng)建HTML事件
關(guān)于HTML DOM的常用函數(shù)
? 當(dāng)我們需要修改一個HTML元素的時候潦匈，我們需要先找到它，然后修改它的內(nèi)容赚导、它的屬性茬缩、它的CSS。
查找HTML元素及其子節(jié)點
- 通過ID查找
document.getElementById("car");
? 獲取到一個id為car的元素吼旧，找到了返回的是一個對象凰锡，沒有找到的話，返回null圈暗。document是對象掂为，getElementById("car")是方法。
- 通過元素名獲取
var CarColor=document.getElementsByTagName("span");
? 返回所有的span元素员串。一個頁面里可能有很多個span元素勇哗，這個函數(shù)返回的是一個集合，也可以在一定程度上理解為數(shù)組寸齐，但欲诺，它不是數(shù)組。你可以這樣去訪問這個集合的元素：
CarColor[0];
? 你也可以這樣得到這個集合有多少元素
CarColor.length;
- 通過元素的class獲取
var CarColor=document.getElementsByClassName("color");
? 一個頁面里可能有很多個元素的類名是color访忿，這個函數(shù)返回的是一個集合，也可以在一定程度上理解為數(shù)組斯稳，但海铆，它不是數(shù)組。你可以這樣去訪問這個集合的元素：
CarColor[0];
? 你也可以這樣得到這個集合有多少元素
CarColor.length;
- 函數(shù)querySelectorAll()
document.querySelectorAll("span.color");
? 查找span元素里class為"color"的元素
- 復(fù)雜的例子挣惰，組合使用以上幾個函數(shù)
5.1 查找id為"car"的元素下面所有的<li>元素
var car = document.getElementById("car");
var carList = car.getElementsByTagName("li");
- 查找第一個子節(jié)點
document.getElementById("demo").firstChild;
- 獲取第一個子節(jié)點的值（innerHTML）
document.getElementById("demo").firstChild.nodeValue;
也可以這樣
document.getElementById("demo").childNodes[0].nodeValue;
修改HTML元素及其屬性
- 修改一個元素的內(nèi)容
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");//創(chuàng)建元素
var content=document.createTextNode("The British Broadcasting Corporation is a British
public service broadcaster. ");//添加內(nèi)容
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
函數(shù)原型
document.getElementById(id).style.property=;
這個函數(shù)的property就是在CSS里能設(shè)置的屬性板乙。如：字體大小是偷、顏色、邊框募逞、補白蛋铆、背景圖片等等。
例如：改變p1元素的字體大小
document.getElementById("p1").style.font-size=18px;
- 移除CSS
這個比較難了放接，需要自己寫函數(shù)刺啦，沒有現(xiàn)成的可以調(diào)用。
