成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初識DOM（文檔對象模型）

Elle / 1512人閱讀

摘要：什么是什么是什么叫做呢的全稱是文檔對象模型，定義了表示和修改文檔所需的對象這些對象的行為和屬性以及這些對象之間的關(guān)系。對象即為宿主對象，由瀏覽器廠商定義，用來操作的功能的一類對象和集合。簡單來說，就是用來操作和的，它是一系列對象的集合。

什么是DOM

什么叫做DOM呢？

? DOM的全稱是Document Object Model 文檔對象模型，DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關(guān)系。

? DOM對象即為宿主對象，由瀏覽器廠商定義，用來操作html的css功能的一類對象和集合。不過瀏覽器廠商之間大部分都遵循w3c標(biāo)準(zhǔn)。

? 簡單來說，DOM就是用來操作html和css的，它是一系列對象的集合。

DOM如何操作HTML

document代表整個文檔，它也是一個dom元素，我們dom對html的操作，即使對html的增刪改查。下面我就介紹一下dom都是如何增刪改查html的。

那么我們?nèi)绾尾榭丛毓?jié)點？

我們知道css中有id、class、標(biāo)簽等選擇器，同樣，我們的document對象上也定義了很多類似的方法來查看元素節(jié)點。

???getElementById

?

document.getElementById(‘id’);方法是通過元素的id來選擇出相對應(yīng)的元素的，因為id是唯一標(biāo)示，所以方法名中是Element。

?

值得注意的是，在ie8以下的瀏覽器中，不區(qū)分大小寫，而且標(biāo)簽的name屬性也可以被當(dāng)做id被選擇出來。

?

?

var div = document.getElementById(‘demo’);

?

這里同樣把這個div選擇出來了。

?

???getElementsByClassName

?

document.getElementsByClassName(‘class’); 獲取到的是一個類數(shù)組，因為很多元素都可以有一個類名。我們可以通過[]的方式來選擇到具體的哪一個元素。

?

?

?

var div = document.getElementsByClassName(‘div’)[1];

?

這樣我們就可以選擇到第二個div了。

?

不過如果我們碰到這種情況該怎么辦？

?

?

?

?

我們改如何選擇出來第二個div？

?

這里，我們的getElementsByClassName其實后面可以填寫多個類名。

?

var div = document.getElementsByClassName(‘demo demo1’)[0];

?

這樣，我們就可以選擇出來第二個div了。

?

但是值得注意的是，ie8及以下的版本中沒有這種方法。

?

???getElementsByTagName

?

document.getElementsByTagName(‘div’);這個方法是可以選擇出來具體某一種元素的集合，像前面這一段就可以選擇出全部的div集合，當(dāng)然也是一個類數(shù)組。

?

這個方法所有版本的瀏覽器都兼容。

?

???getElementsByName

?

document.getElementsByName();需要注意的是，只有部分標(biāo)簽的name可以生效，比如表單、表單元素、img、iframe等。

?

?

document.getElementsByName(‘123’)[0];

?

同樣是選擇出來一組，不過這個方法不是很常用。

?

?? 這里面我們我們最常用的是id和tag，因為全版本都支持。

?

???querySelector()

?

???querySelectorAll()

?

這兩個方法通常放在一起說。

?

我們知道選擇元素最強的是css，而這兩個里面寫的參數(shù)就是我們css選擇器的寫法。

?

document.querySelector(‘div p #demo .demo);

?

不過querySelector永遠選擇一組里面的第一個，所以返回的不是一個類數(shù)組而是一個具體的元素。

?

而我們?nèi)绻祷匾粋€類數(shù)組的集合的話，那么就用第二個querySelectorAll()方法。

?

不過這兩個方法的問題在于，他們返回的不像前面四個是一個實時改變的元素，而是一個副本。當(dāng)我們用這兩個方法選擇出來元素之后，我們把本身那個元素修改一下，會發(fā)現(xiàn)我們選擇出來的那個元素沒有變化。

?

111


222


333

?

var div = document.querySelectorAll(‘.content’);

var div1 = document.getElementsByClassName(‘content’)[0];

console.log(div);

div1.remove();

console.log(div);

?

我們發(fā)現(xiàn)兩次打印出來的都是[div.content, div.content, div.content]，也就是說我們實際刪除的那個元素對用querySelector選擇出來的那個副本沒有影響。

?

不過，在ie7及以下的版本沒有這兩個方法。

?

我們以后提到的jQuery里面的選擇器，雖然是基于Sizzle的，但是Sizzle是基于querySelector寫的。

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1520.html

相關(guān)文章

  • 初識DOM

    摘要：標(biāo)識，就是將頁面解析為一個文檔。標(biāo)識，就是中表示各個對象之間的關(guān)系。的標(biāo)準(zhǔn)由于的標(biāo)準(zhǔn)規(guī)范是由組織起草并定義的，所以對的定義是目前最權(quán)威的解釋。兄弟關(guān)系具有相同父級元素的兩個或幾個元素之間的兄弟關(guān)系。是返回值，表示定位元素的集合，是一個集合。 如何使用JavaScript script元素 元素 元素用于在HTML頁面中嵌入或引入JavaScript腳本代碼。該元素默認被定義在元素中。t...

    史占廣 評論0 收藏0

  • 初識DOM

    摘要：標(biāo)識，就是將頁面解析為一個文檔。標(biāo)識，就是中表示各個對象之間的關(guān)系。的標(biāo)準(zhǔn)由于的標(biāo)準(zhǔn)規(guī)范是由組織起草并定義的，所以對的定義是目前最權(quán)威的解釋。兄弟關(guān)系具有相同父級元素的兩個或幾個元素之間的兄弟關(guān)系。是返回值，表示定位元素的集合，是一個集合。 如何使用JavaScript script元素 元素 元素用于在HTML頁面中嵌入或引入JavaScript腳本代碼。該元素默認被定義在元素中。t...

    qpal 評論0 收藏0

  • 初識DOM

    摘要：標(biāo)識，就是將頁面解析為一個文檔。標(biāo)識，就是中表示各個對象之間的關(guān)系。的標(biāo)準(zhǔn)由于的標(biāo)準(zhǔn)規(guī)范是由組織起草并定義的，所以對的定義是目前最權(quán)威的解釋。兄弟關(guān)系具有相同父級元素的兩個或幾個元素之間的兄弟關(guān)系。是返回值，表示定位元素的集合，是一個集合。 如何使用JavaScript script元素 元素 元素用于在HTML頁面中嵌入或引入JavaScript腳本代碼。該元素默認被定義在元素中。t...

    Coding01 評論0 收藏0

  • 初識HTML和WEB標(biāo)準(zhǔn)

    摘要：開始標(biāo)簽和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽。網(wǎng)頁主要由三部分組成結(jié)構(gòu)表現(xiàn)和行為對應(yīng)標(biāo)準(zhǔn)也分三方面結(jié)構(gòu)化標(biāo)準(zhǔn)語言表現(xiàn)標(biāo)準(zhǔn)語言行為標(biāo)準(zhǔn)。表現(xiàn)標(biāo)準(zhǔn)語言主要是，用于對網(wǎng)頁進行美化。初識HTML和WEB標(biāo)準(zhǔn) 什么是 HTML？ HTML 超文本標(biāo)記語言的縮寫(Hyper Text Markup Language) HTML 并不是編程語言，而是一種標(biāo)記語言(markup language) 標(biāo)記...

    zombieda 評論0 收藏0

  • 【連載】前端個人文章整理-從基礎(chǔ)到入門

    摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...

    madthumb 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<