轉載自品略圖書館 http://www.pinlue.com/article/2020/07/0704/5110983500959.html
剛開始接觸JavaScript的時候，心中就一直有一個疑問：
後臺程式語言之間互相爭論不斷，爲何一提到前端基本都會想到JS？
因爲纔剛開始學js，所以很多話不敢說的太絕對，就加上了「基本，大概，可能」這樣的形容詞。
畢竟話說的太絕對容易被吐槽，誰知道竟然還是被吐槽了：
納尼？js連程式語言都不算了？
我只是儘可能不把話說的太絕對，可能js並不是前端公認的語言，但沒想到連程式語言都不算了？
這是我萬萬沒有想到的。
在這一刻我的內心產生了動搖，我突然想到了那張程式語言排行榜的圖片。
前段時間c語言排名超過Java，導致經常性地能看到，我明明在這張表中看到了JavaScript。
莫非這不能算是程式語言排行榜？
於是我又網上查了下，查詢到的結果都是說js是一門程式語言。
現在結果就顯而易見了，說js不是程式語言就好比說前端不是程式設計師一樣，帶有很濃的個人主義色彩，當個笑話即可。
嘛，不管如何，js還是很重要的，話不多說，繼續學習：今天是劉小愛自學Java的第83天：
昨天學習了BOM程式設計，今天學DOM程式設計。
DOM，全稱Document Object Model，即文件物件模型，具體什麼意思呢？
還是一樣的學習方法，先學習其對應的知識點，再理解其概念。
一、DOM程式設計
1根據標籤名獲取元素
①頁面載入事件
因爲script標籤在body標籤前面，而頁面載入又是從上到下的。
如果在script標籤想獲取body標籤中的內容，需要先觸發頁面載入事件。
②點選事件
要達到的效果爲，點選按鈕會給a便籤新增相應的地址。
這裏使用的的匿名函數註冊方式觸發點選事件。
③getElementsByTagName()
根據標籤名獲取元素，因爲頁面中a標籤有3個，所以使用該方法獲取的是一個數組。
再將陣列遍歷，逐一給href屬性賦值。
注意：如果相同標籤的數量有多個，其返回值爲陣列，一開始完全就給忽視了。
程式碼寫完，做一個測試：
點一下按鈕，觸發點選上事件，a標籤新增了一個超鏈接，顏色從黑變成了紫，
再點下，會跳轉超鏈接對應的頁面
2根據name獲取元素
標籤基本都會有一個name屬性，根據name屬性獲取對應的元素：
有三個div標籤，但是name爲"myDiv"的只有兩個，我們只需要對應name的標籤。
所以不能getElementsByTagName()方法，而是getElementsByName()；
這樣的話第三個div標籤就不會對它有影響，
做一個測試：
可以通過name屬性給對應的標籤賦值。
3根據類名獲取元素
getElementsByClassName()，這個方法的思路就跟name是一樣的。
只不過一個是標籤裡的name屬性，一個是標籤裡的class屬性。
二、如何理解DOM？
上述的3中方法便是對DOM程式設計的一個初步說明，當然肯定不會就只有這3種。
但這幾種比較常見，並且很具有代表性。
先看一個HTML，其具體內容不用細看：
上述程式碼也就是一個文件，DOM模型是使用一個DOM樹來表示文件的。
DOM樹的根節點爲html標籤。
html標籤有兩個子標籤(子節點)：head標籤，body標籤。
body標籤也有兩個子標籤(子節點)：a標籤，table標籤。
子節點又有子節點，這樣就形成了一個樹形結構。
其中每個節點都包含着物件(objects)。
樹形結構圖如下：
當然圖我並沒有畫完全，但大致就是這麼一個樹形的結構。
並且我舉這個例子中文件內容也比較簡單，一共也就那麼幾行程式碼，實際情況肯定要複雜的多。
而DOM程式設計就是可以用特定方式操作這個樹，從而可以改變文件的結構、樣式或者內容。
其中就包括最先說明的那三種方法：根據標籤名，根據id名，根據類名……等等。
三、js操作CSS
CSS可以設定標籤的樣式，是怎麼操作的？
①CSS設定樣式
這裏使用的是id選擇器，可以設定對應id的標籤樣式。
顏色color：紅。
字型font-family：微軟雅黑。
字型大小font-size：50px。
除了這種設定標籤的樣式外，現在還可以通過js程式碼去動態修改標籤的樣式。
程式碼編寫如下：
②js設定樣式
根據id獲取對應的元素。
在html中每一個標籤都會有一個屬性叫style，所以設定其style即可。
值得注意的是：fontFamily相當於CSS中的font-family，採用的是小駝峯命名規則。
其中如果用css和js同時操作同一標籤，會以js設定的爲主。
這也好理解，css相當於給標籤格式初始化，而js就相當於修改標籤格式。
當然這還不能看出js的使用特殊之處，我們再看一個案例：
①CSS設定格式
CSS根據類選擇器設定樣式，類爲myClass。
但是要注意，HTML中本身並沒有myClass類的標籤。
②js操作CSS
js厲害的地方在於它可以設定和修改標籤的類名。根據需求，js可以讓同一標籤：
設定類名爲a時，對應一種CSS樣式。
設定類名爲b時，又對應另一種CSS樣式
從而達到同一標籤樣式可以根據需求不停地切換。