學(xué)習(xí)dom(文檔對象模型)就是window對象,里面的document對象提供的屬性有哪些,怎么用.
- Window里面分兩種對象,JavaScript標(biāo)準(zhǔn)的,和瀏覽器私自提供的,dom就是瀏覽器提供的.
- 一個頁面里面的html節(jié)點都對應(yīng)瀏覽器里面的document的對象.
在前面的章節(jié)學(xué)習(xí)中,我們知道別人提供的可以用的工具代碼都是APi
dom就是文檔對象模型,這種文檔指的是xml文檔,
開始了
- 程序員的工作主要是操作內(nèi)存,html文檔就是一個樹形數(shù)據(jù)結(jié)構(gòu),這棵樹是如何存在于內(nèi)存中的呢? 把文檔變成對象這種模型,這就是dom; 就像木偶一樣,一根根不同的線對應(yīng)著不同的木偶,這樣就可以通過線去操作木偶.操作木偶的手指就是JavaScript的對象,所以叫對象模型/
那么dom的標(biāo)準(zhǔn)是什么呢?
- html標(biāo)簽由document構(gòu)造函數(shù)來造
- 元素由element構(gòu)造函數(shù)來造
- 文本由text標(biāo)簽來造.......還有很多對象,所有對象的頂端就是Node對象
這種樹形的對象原型鏈,和之前學(xué)習(xí)的對象原型鏈的結(jié)構(gòu)形式是一模一樣的.只是名字不同了
一句話說完,Dom是操作頁面的接口,Dom就是把頁面中的節(jié)點,通過構(gòu)造函數(shù)生成對應(yīng)的對象,這就是Dom的主要功能. 然后通過JavaScript這個膠水語言,操作這些對象.
- Node相當(dāng)于Object的地位,但是Node畢竟還是對象,原型鏈最終也是指向Object.
注意這句話:一個對象有屬性+方法//本質(zhì)來說方法也是屬性,只不過是函數(shù)屬性,所以叫方法不叫屬性了.
以下是實際屬性的筆記
- 在dom中有個小坑,回車是屬于text對象的.
- 注意child和childNode的區(qū)別,多用才知道dom之間的實際區(qū)別,雖然靠英文就可以知道大概的用法.
構(gòu)造函數(shù)就是一個返回對象的函數(shù),這句話很重要//
DOM的最小組成單位叫做節(jié)點（node）。文檔的樹形結(jié)構(gòu)（DOM樹）,就是由各種不同類型的節(jié)點組成。每個節(jié)點可以看作是文檔樹的一片葉子。
- 節(jié)點有七種類型,
Document：整個文檔樹的頂層節(jié)點,他代表了整個文檔,文檔里面最高一層的HTML標(biāo)簽，一般是<html>//也就是說,也可以是其他標(biāo)簽
DocumentType：doctype標(biāo)簽（比如<!DOCTYPE html>）
Element：網(wǎng)頁的各種HTML標(biāo)簽（比如<body>、<a>等）
Attribute：網(wǎng)頁元素的屬性（比如class="right"）
Text：標(biāo)簽之間或標(biāo)簽包含的文本
Comment：注釋
DocumentFragment：文檔的片段 - 這七種節(jié)點都屬于瀏覽器原生提供的節(jié)點對象的派生對象，具有一些共同的屬性和方法。也就是說elment 對象,text對象.......的原型鏈指向node對象(node的原型也最終指向Object//所以說數(shù)據(jù)結(jié)構(gòu)很重要)
- 所有節(jié)點對象都是瀏覽器內(nèi)置的Node對象的實例，繼承了Node屬性和方法。這是所有節(jié)點的共同特征。
- 除了根節(jié)點以外，其他節(jié)點對于周圍的節(jié)點都存在三種關(guān)系。父-子-同級
- nodeName屬性返回節(jié)點的名稱，nodeType屬性返回節(jié)點類型的常數(shù)值。具體的返回值，可查閱下方的表格。
類型 nodeName nodeType
ELEMENT_NODE 大寫的HTML元素名 1
ATTRIBUTE_NODE 等同于Attr.name 2
TEXT_NODE #text 3
COMMENT_NODE #comment 8
DOCUMENT_NODE #document 9
DOCUMENT_FRAGMENT_NODE #document-fragment 11
DOCUMENT_TYPE_NODE 等同于DocumentType.name 10
