1、文檔：DOM中的“D”
"D"代表document(文檔)
2刻帚、對(duì)象：DOM中的“O”
“O”代表object(對(duì)象)
對(duì)象的分類(lèi)
- 用戶(hù)定義對(duì)象(user-defined object)
- 內(nèi)建對(duì)象(native object)
- 宿主對(duì)象(host object)
window對(duì)象
window對(duì)象對(duì)應(yīng)著瀏覽器窗口本身秋柄，這個(gè)對(duì)象的屬性和方法通常統(tǒng)稱(chēng)為BOM（瀏覽器對(duì)象模型）
BOM提供了window.open和window.blur等方法领铐。以至于被濫用于各種彈出窗口和下拉菜單
3栏饮、模型：DOM中的“M”
“M”代表“Model”（模型）
DOM把一份文檔表示為一棵樹(shù)（數(shù)學(xué)意義上的概念）
示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shoping List<title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don’t forget to buy this stuff.<p>
<ul id="purchases">
<li> A tin of beans<li>
<li class="sale">Cheese<li>
<li class="sale important">Milk<li>
</ul>
<body>
</html>
代碼中<html>相當(dāng)于樹(shù)根熄攘，即根元素。<head>和<body>屬于下一個(gè)分支孕蝉，位于同一層次且互不包含屡律，屬于兄弟關(guān)系。<head>元素有兩個(gè)子元素<meta>和<title>(屬于兄弟關(guān)系)<body>元素有三個(gè)子元素<p>降淮、<h1>超埋、<ul>(這三個(gè)屬于兄弟關(guān)系。<ul>也是一個(gè)父元素佳鳖，有三個(gè)子元素霍殴，他們都是<li>元素。
如果你能把一個(gè)文檔的各種元素想象成一棵家譜樹(shù)系吩，我們就可以用同樣的術(shù)語(yǔ)描述DOM来庭。但我覺(jué)得稱(chēng)為“節(jié)點(diǎn)樹(shù)”更準(zhǔn)確
4、節(jié)點(diǎn)
節(jié)點(diǎn)（node）屬于網(wǎng)絡(luò)術(shù)語(yǔ)穿挨，它表示網(wǎng)絡(luò)中的一個(gè)連接點(diǎn)月弛。一個(gè)網(wǎng)絡(luò)就是由一些節(jié)點(diǎn)構(gòu)成的集合。DOM也是同樣的情況科盛，文檔是由節(jié)點(diǎn)構(gòu)成的集合帽衙。
- 元素節(jié)點(diǎn)
- 文本節(jié)點(diǎn)
- 屬性節(jié)點(diǎn)
4、1元素節(jié)點(diǎn)
DOM的原子是元素節(jié)點(diǎn)（element node）諸如<body>贞绵、<p>厉萝、<ui>之類(lèi)的元素。標(biāo)簽的名字就是元素的名字榨崩。元素也可以包含其他的元素谴垫。沒(méi)有被包含在其他元素的唯一元素是<html>元素，它是我們的節(jié)點(diǎn)樹(shù)的根元素母蛛。
4翩剪、2文本節(jié)點(diǎn)
在上述例子中，<p>元素包含著文本“don't forget to buy this stuff.”它就是一個(gè)文本節(jié)點(diǎn)（text node）溯祸。
4肢专、3屬性節(jié)點(diǎn)
屬性節(jié)點(diǎn)是對(duì)元素做出更具體的描述。例如焦辅，幾乎所有的元素都有一個(gè)title屬性，我們可以利用這個(gè)屬性對(duì)包含在元素里的東西做出準(zhǔn)確的描述：
<p title="a gentle reminder">Don't forget to buy this stuff.<p>
在DOM中title="a gentle reminder"是一個(gè)屬性節(jié)點(diǎn)（attribute node）椿胯，在前面的例子中無(wú)序清單元素<ul>有個(gè)id屬性筷登。有些清單元素<li>有class屬性。
4哩盲、4 CSS
類(lèi)似javascript腳本前方，我們也可以將CSS樣式嵌在文檔<head>部分（style>標(biāo)簽之間）狈醉。也可以放在另外的一個(gè)文件里。**在HTML文件中引用CSS文件的格式：
<link type="text/css" href="file.css" rel="stylesheet">```
**繼承（inheritance)**是CSS技術(shù)中的一項(xiàng)強(qiáng)大功能惠险。
1)苗傅、 class屬性
```html
<p class="special">This pargraph has the special class<p>
<h2 class="special">So dose this headline</h2>```
在樣式表里可以為上面的代碼進(jìn)行定義
```css
special{
font-style: italic;
}```
還可以這樣定義
```css
h2.special{
text-transform: uppercase;
}```
2)、id屬性
id屬性的用途是給網(wǎng)頁(yè)里的某個(gè)元素加上一個(gè)獨(dú)一無(wú)二的標(biāo)識(shí)符：
```html
<ul id="purchases">```
樣式表定義
```css
#purchases{
border:1px solid white;
background-color：#333;
color：#ccc;
padding:1em;
}```
```css
#purchases li{
font-weight:bold;
}```
####4班巩、5獲取元素
> 有3種DOM方法可獲取元素節(jié)點(diǎn)渣慕，分別是通過(guò)元素ID、通過(guò)標(biāo)簽名和通過(guò)類(lèi)名字來(lái)獲取
- **getElementById**
- **getElementsByTagName**
- **getElementsByClassName**
###1)getElementById
此方法將返回一個(gè)與那個(gè)有著給定id屬性值的元素節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象抱慌，**在javascript里注意大小寫(xiě)**逊桦。它是document對(duì)象特有的函數(shù)，在腳本代碼里抑进，函數(shù)名的后面必須跟有**一對(duì)圓括號(hào)**强经，這對(duì)圓括號(hào)包含這**函數(shù)的參數(shù)。**`document.getElementById(id)`在getElementById方法中只有一個(gè)參數(shù)：**你想獲得的那個(gè)元素的id屬性的值寺渗，**這個(gè)id屬性必須放在單引號(hào)或雙引號(hào)里匿情。`docment.getElementById("purchases")`這個(gè)調(diào)用將返回一個(gè)對(duì)象，這個(gè)對(duì)象對(duì)應(yīng)著document對(duì)象里的一個(gè)獨(dú)一無(wú)二的元素信殊，那個(gè)元素的HTLM id屬性值是`purchases`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shoping List<title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don’t forget to buy this stuff.<p>
<ul id="purchases">
<li> A tin of beans<li>
<li class="sale">Cheese<li>
<li class="sale important">Milk<li>
</ul>
<script>
alert(typeof docment.getElementById("purchases"));
</script>
<body>
</html>
//利用`typeof`操作符進(jìn)行驗(yàn)證（typeof操作符可以告訴我們它的操作數(shù)是一個(gè)字母炬称、數(shù)值、函數(shù)鸡号、布爾值還是對(duì)象转砖。
驗(yàn)證可得是一個(gè)對(duì)象
2)getElementsByTagName
getElementsByTagName方法返回一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素鲸伴。它的參數(shù)是標(biāo)簽的名字：decument.getElementByTagName(tag)
alert(document.getElementsByTagName("li").length);//顯示文檔里的列表元素個(gè)數(shù)為：3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shoping List<title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don’t forget to buy this stuff.<p>
<ul id="purchases">
<li> A tin of beans<li>
<li class="sale">Cheese<li>
<li class="sale important">Milk<li>
</ul>
<script>
var items=document.getElementByTagName("li");
for (var i=0; i<items.length;i++){
alert(typeof items[i]);
}
</script>
<body>
</html>
//代碼運(yùn)行結(jié)果顯示三個(gè)alert對(duì)話框府蔗，顯示的消息都是“object”。
getElementsByTagName允許把一個(gè)通配符作為它的參數(shù)汞窗，通配符（*）必須放在引號(hào)里
alert(document.getElementsByTagName("*").length);//可以知道文檔里有多少個(gè)元素節(jié)點(diǎn)
var shopping=document.getElementById("purchases");
var items=shopping.getElementsByTagName("*");
//程序運(yùn)行結(jié)果姓赤，items數(shù)組將只包含id屬性值是purshase的元素清單的元素
3)getElementByClassName
這個(gè)方法讓我們能夠通過(guò)class屬性中的類(lèi)名來(lái)訪問(wèn)元素，getElementByClassName也只接受一個(gè)參數(shù)仲吏，就是類(lèi)名：
getElementByClassName(class)```
這個(gè)方法的返回值也與getElementsByTagName類(lèi)似不铆，都是一個(gè)具有相同類(lèi)名的元素的數(shù)組。
```javascript
document.getElementsByClassName("sale")```
利用這種方法還可有查找那些帶有多個(gè)類(lèi)名的元素裹唆。多個(gè)類(lèi)名之間用空格分開(kāi)即可
```javascript
alert(document.getElementsByClassName("important sale").length);
//對(duì)話框顯示1誓斥，表示只有一個(gè)元素匹配。類(lèi)名的順序不重要许帐，就算元素還帶有更多類(lèi)名也沒(méi)有關(guān)系劳坑。
也可以和getElementById組合使用
var shopping=document.getElementById("purchase");
var sales=shopping.getElementsByClassName("sale");
sales數(shù)組中包含的就只是位于“purchases”列表中的帶有“sale”類(lèi)的元素。
getElementByClassName方法非常有用成畦，但只有較新的瀏覽器才支持它距芬。所以涝开，需要使用已有的DOM方法來(lái)實(shí)現(xiàn)自己的getElementsByClassName。
function getElementsByClassName(node,classname){
if (node.getElementsByClassName){
//使用現(xiàn)有的方法
return node.getElementsByTagName("*");
for (var i=0; i<elems.length;i++){
if(elems[i].ClassName.indexof(classname)!= -1){
results[results.length]=elems[i];
}
}
return results框仔；
}
}```
####5 獲取和設(shè)置屬性
- **getAttribute方法**(獲取元素的屬性)
- **setAttribute方法**(更改屬性節(jié)點(diǎn)值)
#####5舀武、1getAttribute
getAttribute是一個(gè)函數(shù)，它只有一個(gè)參數(shù)(你所要查詢(xún)的屬性的名稱(chēng))
```html
object.getAttribute(attribute)```
getAttribute只能通過(guò)元素節(jié)點(diǎn)對(duì)象調(diào)用离斩。
例如银舱，可以與getElementByTagName方法合用獲取每個(gè)`<p>`元素的title屬性
```html
var paras = document.getElementByTagName("p");
for (var i=0; i<paras.length; i++){
alert(paras[i].getAttribute("title"));
}
代碼運(yùn)行后顯示著文本“a gentle reminder”的alterdui
