初識DOM（文檔對象模型）

Elle 發布于2019-04-23 13:10 / 1508人閱讀

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

什么是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對象上也定義了很多類似的方法來查看元素節點。

???getElementById

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

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

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

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

???getElementsByClassName

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

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

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

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

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

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

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

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

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

???getElementsByTagName

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

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

???getElementsByName

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

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

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

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

???querySelector()

???querySelectorAll()

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

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

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

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

而我們如果要返回一個類數組的集合的話，那么就用第二個querySelectorAll()方法。

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

111

222

333

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寫的。

GPU云服務器云服務器 DOM文檔 mongodb文檔數據模型刪除dom對象 dom對象操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1520.html

初識DOM

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

史占廣 2019-08-29 16:31 評論0 收藏0
初識DOM

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

qpal 2019-08-02 16:31 評論0 收藏0
初識DOM

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

Coding01 2019-08-23 11:31 評論0 收藏0
初識HTML和WEB標準

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

zombieda 2019-04-23 13:42 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

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

madthumb 2019-08-23 14:15 評論0 收藏0