成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

初識DOM（文檔對象模型）

Elle / 1563人閱讀

摘要：什么是什么是什么叫做呢的全稱是文檔對象模型，定義了表示和修改文檔所需的對象這些對象的行為和屬性以及這些對象之間的關(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代表整個(gè)文檔，它也是一個(gè)dom元素，我們dom對html的操作，即使對html的增刪改查。下面我就介紹一下dom都是如何增刪改查html的。

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

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

???getElementById

?

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

?

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

?

?

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

?

這里同樣把這個(gè)div選擇出來了。

?

???getElementsByClassName

?

document.getElementsByClassName(‘class’); 獲取到的是一個(gè)類數(shù)組，因?yàn)楹芏嘣囟伎梢杂幸粋€(gè)類名。我們可以通過[]的方式來選擇到具體的哪一個(gè)元素。

?

?

?

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

?

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

?

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

?

?

?

?

我們改如何選擇出來第二個(gè)div？

?

這里，我們的getElementsByClassName其實(shí)后面可以填寫多個(gè)類名。

?

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

?

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

?

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

?

???getElementsByTagName

?

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

?

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

?

???getElementsByName

?

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

?

?

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

?

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

?

?? 這里面我們我們最常用的是id和tag，因?yàn)槿姹径贾С帧?

?

???querySelector()

?

???querySelectorAll()

?

這兩個(gè)方法通常放在一起說。

?

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

?

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

?

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

?

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

?

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

?

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]，也就是說我們實(shí)際刪除的那個(gè)元素對用querySelector選擇出來的那個(gè)副本沒有影響。

?

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

?

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

?

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

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

相關(guān)文章

  • 初識DOM

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

    史占廣 評論0 收藏0

  • 初識DOM

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

    qpal 評論0 收藏0

  • 初識DOM

    摘要：標(biāo)識，就是將頁面解析為一個(gè)文檔。標(biāo)識，就是中表示各個(gè)對象之間的關(guān)系。的標(biāo)準(zhǔn)由于的標(biāo)準(zhǔn)規(guī)范是由組織起草并定義的，所以對的定義是目前最權(quán)威的解釋。兄弟關(guān)系具有相同父級元素的兩個(gè)或幾個(gè)元素之間的兄弟關(guān)系。是返回值，表示定位元素的集合，是一個(gè)集合。 如何使用JavaScript script元素 元素 元素用于在HTML頁面中嵌入或引入JavaScript腳本代碼。該元素默認(rèn)被定義在元素中。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)頁進(jìn)行美化。初識HTML和WEB標(biāo)準(zhǔn) 什么是 HTML？ HTML 超文本標(biāo)記語言的縮寫(Hyper Text Markup Language) HTML 并不是編程語言，而是一種標(biāo)記語言(markup language) 標(biāo)記...

    zombieda 評論0 收藏0

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

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

    madthumb 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<