前天剛開始接觸JavaScript的時候，心中就一直有一個疑問：

后臺編程語言之間互相爭論不斷，為何一提到前端基本都會想到JS？

因為才剛開始學js，所以很多話不敢說的太絕對，就加上了“基本，大概，可能”這樣的形容詞。

畢竟話說的太絕對容易被吐槽，誰知道竟然還是被吐槽了：

納尼？js連編程語言都不算了？

我只是盡可能不把話說的太絕對，可能js并不是前端公認的語言，但沒想到連編程語言都不算了？

這是我萬萬沒有想到的。

在這一刻我的內(nèi)心產(chǎn)生了動搖，我突然想到了那張編程語言排行榜的圖片。

前段時間c語言排名超過Java，導致經(jīng)常性地能看到，我明明在這張表中看到了JavaScript。

莫非這不能算是編程語言排行榜？

于是我又網(wǎng)上查了下，查詢到的結(jié)果都是說js是一門編程語言。

現(xiàn)在結(jié)果就顯而易見了，說js不是編程語言就好比說前端不是程序員一樣，帶有很濃的個人主義色彩，當個笑話即可。

嘛，不管如何，js還是很重要的，話不多說，繼續(xù)學習：今天是劉小愛自學Java的第83天：

昨天學習了BOM編程，今天學DOM編程。

DOM，全稱Document Object Model，即文檔對象模型，具體什么意思呢？

還是一樣的學習方法，先學習其對應(yīng)的知識點，再理解其概念。

一、DOM編程

1根據(jù)標簽名獲取元素

①頁面加載事件

因為script標簽在body標簽前面，而頁面加載又是從上到下的。

如果在script標簽想獲取body標簽中的內(nèi)容，需要先觸發(fā)頁面加載事件。

②點擊事件

要達到的效果為，點擊按鈕會給a便簽添加相應(yīng)的地址。

這里使用的的匿名函數(shù)注冊方式觸發(fā)點擊事件。

③getElementsByTagName()

根據(jù)標簽名獲取元素，因為頁面中a標簽有3個，所以使用該方法獲取的是一個數(shù)組。

再將數(shù)組遍歷，逐一給href屬性賦值。

注意：如果相同標簽的數(shù)量有多個，其返回值為數(shù)組，一開始完全就給忽視了。

代碼寫完，做一個測試：

點一下按鈕，觸發(fā)點擊上事件，a標簽添加了一個超鏈接，顏色從黑變成了紫，

再點下，會跳轉(zhuǎn)超鏈接對應(yīng)的頁面

2根據(jù)name獲取元素

標簽基本都會有一個name屬性，根據(jù)name屬性獲取對應(yīng)的元素：

有三個div標簽，但是name為"myDiv"的只有兩個，我們只需要對應(yīng)name的標簽。

所以不能getElementsByTagName()方法，而是getElementsByName()；

這樣的話第三個div標簽就不會對它有影響，

做一個測試：

可以通過name屬性給對應(yīng)的標簽賦值。

3根據(jù)類名獲取元素

getElementsByClassName()，這個方法的思路就跟name是一樣的。

只不過一個是標簽里的name屬性，一個是標簽里的class屬性。

二、如何理解DOM？

上述的3中方法便是對DOM編程的一個初步說明，當然肯定不會就只有這3種。

但這幾種比較常見，并且很具有代表性。

先看一個HTML，其具體內(nèi)容不用細看：

上述代碼也就是一個文檔，DOM模型是使用一個DOM樹來表示文檔的。

• DOM樹的根節(jié)點為html標簽。
• html標簽有兩個子標簽(子節(jié)點)：head標簽，body標簽。
• body標簽也有兩個子標簽(子節(jié)點)：a標簽，table標簽。
• 子節(jié)點又有子節(jié)點，這樣就形成了一個樹形結(jié)構(gòu)。
• 其中每個節(jié)點都包含著對象(objects)。

樹形結(jié)構(gòu)圖如下：

當然圖我并沒有畫完全，但大致就是這么一個樹形的結(jié)構(gòu)。

并且我舉這個例子中文檔內(nèi)容也比較簡單，一共也就那么幾行代碼，實際情況肯定要復雜的多。

而DOM編程就是可以用特定方式操作這個樹，從而可以改變文檔的結(jié)構(gòu)、樣式或者內(nèi)容。

其中就包括最先說明的那三種方法：根據(jù)標簽名，根據(jù)id名，根據(jù)類名……等等。

三、js操作CSS

CSS可以設(shè)定標簽的樣式，是怎么操作的？

①CSS設(shè)定樣式

這里使用的是id選擇器，可以設(shè)定對應(yīng)id的標簽樣式。

顏色color：紅。

字體font-family：微軟雅黑。

字體大小font-size：50px。

除了這種設(shè)定標簽的樣式外，現(xiàn)在還可以通過js代碼去動態(tài)修改標簽的樣式。

代碼編寫如下：

②js設(shè)定樣式

根據(jù)id獲取對應(yīng)的元素。

在html中每一個標簽都會有一個屬性叫style，所以設(shè)置其style即可。

值得注意的是：fontFamily相當于CSS中的font-family，采用的是小駝峰命名規(guī)則。

其中如果用css和js同時操作同一標簽，會以js設(shè)定的為主。

這也好理解，css相當于給標簽格式初始化，而js就相當于修改標簽格式。

當然這還不能看出js的使用特殊之處，我們再看一個案例：

①CSS設(shè)定格式

CSS根據(jù)類選擇器設(shè)定樣式，類為myClass。

但是要注意，HTML中本身并沒有myClass類的標簽。

②js操作CSS

js厲害的地方在于它可以設(shè)定和修改標簽的類名。根據(jù)需求，js可以讓同一標簽：

• 設(shè)定類名為a時，對應(yīng)一種CSS樣式。
• 設(shè)定類名為b時，又對應(yīng)另一種CSS樣式

從而達到同一標簽樣式可以根據(jù)需求不停地切換。

最后

謝謝你的觀看。

如果可以的話，麻煩幫忙點個贊，謝謝你。