DOM的全稱是Document Object Model 文檔對象模型，DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關係。 DOM對象即為宿主對象，由瀏覽器廠商定義，用來操作html的css功能的一類對象和集合。不過瀏覽器廠商之間大部分都遵循w3c標準。 簡單來說，D... ...
什麼是DOM
什麼叫做DOM呢？
• DOM的全稱是Document Object Model 文檔對象模型，DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關係。
• DOM對象即為宿主對象，由瀏覽器廠商定義，用來操作html的css功能的一類對象和集合。不過瀏覽器廠商之間大部分都遵循w3c標準。
• 簡單來說，DOM就是用來操作html和css的，它是一系列對象的集合。
DOM如何操作HTML
document代表整個文檔，它也是一個dom元素，我們dom對html的操作，即使對html的增刪改查。下麵我就介紹一下dom都是如何增刪改查html的。
那麼我們如何查看元素節點？
我們知道css中有id、class、標簽等選擇器，同樣，我們的document對象上也定義了很多類似的方法來查看元素節點。
document.getElementById(‘id’);方法是通過元素的id來選擇出相對應的元素的，因為id是唯一標示，所以方法名中是Element。
<div name=”demo”></div>
var div = document.getElementById(‘demo’);
這裡同樣把這個div選擇出來了。
document.getElementsByClassName(‘class’); 獲取到的是一個類數組，因為很多元素都可以有一個類名。我們可以通過[]的方式來選擇到具體的哪一個元素。
<div class=”demo”></div>
<div class=”demo”></div>
var div = document.getElementsByClassName(‘div’)[1];
這樣我們就可以選擇到第二個div了。
不過如果我們碰到這種情況該怎麼辦？
<div class=”demo”></div>
<div class=”demo demo1″></div>
<div class=”demo1″></div>
我們改如何選擇出來第二個div？
這裡，我們的getElementsByClassName其實後面可以填寫多個類名。
var div = document.getElementsByClassName(‘demo demo1’)[0];
這樣，我們就可以選擇出來第二個div了。
但是值得註意的是，ie8及以下的版本中沒有這種方法。
• getElementsByTagName
document.getElementsByTagName(‘div’);這個方法是可以選擇出來具體某一種元素的集合，像前面這一段就可以選擇出全部的div集合，當然也是一個類數組。
這個方法所有版本的瀏覽器都相容。
• getElementsByName
document.getElementsByName();需要註意的是，只有部分標簽的name可以生效，比如表單、表單元素、img、iframe等。
<input name=”123″/>
document.getElementsByName(‘123’)[0];
同樣是選擇出來一組，不過這個方法不是很常用。
• 這裡面我們我們最常用的是id和tag，因為全版本都支持。
• querySelector()
• querySelectorAll()
這兩個方法通常放在一起說。
我們知道選擇元素最強的是css，而這兩個裡面寫的參數就是我們css選擇器的寫法。
document.querySelector(‘div p #demo .demo);
不過querySelector永遠選擇一組裡面的第一個，所以返回的不是一個類數組而是一個具體的元素。
而我們如果要返回一個類數組的集合的話，那麼就用第二個querySelectorAll()方法。
不過這兩個方法的問題在於，他們返回的不像前面四個是一個實時改變的元素，而是一個副本。當我們用這兩個方法選擇出來元素之後，我們把本身那個元素修改一下，會發現我們選擇出來的那個元素沒有變化。
<div class=”content”>111</div>
<div class=”content”>222</div>
<div class=”content”>333</div>
var div = document.querySelectorAll(‘.content’);
var div1 = document.getElementsByClassName(‘content’)[0];
console.log(div);
div1.remove();
console.log(div);
我們發現兩次列印出來的都是[div.content, div.content, div.content]，也就是說我們實際刪除的那個元素對用querySelector選擇出來的那個副本沒有影響。
不過，在ie7及以下的版本沒有這兩個方法。
我們以後提到的jQuery裡面的選擇器，雖然是基於Sizzle的，但是Sizzle是基於querySelector寫的。
