JavaScript DOM 入門

概要

Paste_Image.png

DOM

The <a >Document Object Model (DOM)** </a>is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.

  • document:文檔
  • object:對象碳抄,包括用戶定義對象,內(nèi)建對象场绿,宿主對象剖效,而DOM主要是討論document對象
  • model:模型,類似家族樹

Node

  • element node(元素節(jié)點):如果把web上的文檔比作一座大廈焰盗,這些元素在文檔中的布局形成了文檔的結(jié)構(gòu)
  • text node(文本節(jié)點):文本節(jié)點總是被包含在元素節(jié)點的內(nèi)部璧尸,但并非所有的元素節(jié)點都包含有文本節(jié)點
  • attribute node(屬性節(jié)點):屬性節(jié)點用來對元素做出更具體的描述。例如熬拒,幾乎所有的元素都有一個title屬性爷光,而我們可以利用這個屬性對包含在元素里的東西做成準(zhǔn)確的描述
  • 每一個節(jié)點都是對象

Method

獲取元素
  • getElementById:這個調(diào)用將返回一個對象,這個對象對應(yīng)著document對象里的一個獨一無二的元素
  • getElementsByTagName:利用這個方法會返回一個對象數(shù)組澎粟,每個對象分別對應(yīng)著文檔里有著給定標(biāo)簽的一個元素
  • getElemenstByClassName:與getElementsByTagName方法類似蛀序,getElemen tsByClassName也只接受一個參數(shù),就是類名捌议,返回值是一個具有相同類名的元素的數(shù)組

getElementsByClassName方法非常有用哼拔,但只有較新的瀏覽器才支持引有,為了彌補不足瓣颅,可以用下面的DOM方法來實現(xiàn)自己的getElementByClassName。

獲取和設(shè)置屬性
  • getAttritube:getAttribute方法不屬于document對象譬正,所以不能通過document對象調(diào)用宫补。它只能通過元素節(jié)點對象調(diào)用
  • setAttribute:它允許我們隊屬性節(jié)點的值做出修改檬姥,同樣它也只能用于元素節(jié)點。它做出的修改不會反映在文檔本身的源代碼里
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末粉怕,一起剝皮案震驚了整個濱河市健民,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贫贝,老刑警劉巖秉犹,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異稚晚,居然都是意外死亡崇堵,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門客燕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鸳劳,“玉大人,你說我怎么就攤上這事也搓∩屠” “怎么了?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵傍妒,是天一觀的道長幔摸。 經(jīng)常有香客問我,道長颤练,這世上最難降的妖魔是什么抚太? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮昔案,結(jié)果婚禮上尿贫,老公的妹妹穿的比我還像新娘。我一直安慰自己踏揣,他們只是感情好庆亡,可當(dāng)我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著捞稿,像睡著了一般又谋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上娱局,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天彰亥,我揣著相機與錄音,去河邊找鬼衰齐。 笑死任斋,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的耻涛。 我是一名探鬼主播废酷,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼瘟檩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了澈蟆?” 一聲冷哼從身側(cè)響起墨辛,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎趴俘,沒想到半個月后睹簇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡寥闪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年带膀,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片橙垢。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡垛叨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出柜某,到底是詐尸還是另有隱情嗽元,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布喂击,位于F島的核電站剂癌,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏翰绊。R本人自食惡果不足惜佩谷,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望监嗜。 院中可真熱鬧谐檀,春花似錦、人聲如沸裁奇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽刽肠。三九已至溃肪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間音五,已是汗流浹背惫撰。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留躺涝,地道東北人厨钻。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親莉撇。 傳聞我的和親對象是個殘疾皇子呢蛤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 之前通過深入學(xué)習(xí)DOM的相關(guān)知識惶傻,看了慕課網(wǎng)DOM探索之基礎(chǔ)詳解篇這個視頻(在最近看第三遍的時候棍郎,準(zhǔn)備記錄一點東西...
    微醺歲月閱讀 4,488評論 2 62
  • 一、JS前言 (1)認(rèn)識JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu))银室,知道了CSS樣式(也稱為表示)涂佃,會使用HT...
    凜0_0閱讀 2,777評論 0 8
  • 郭芳芳很不爽。 下午她找出納辦事蜈敢,對方手上的戒指明晃晃的直戳她眼睛辜荠。她知道,這是出納男朋友給出納買的抓狭。出納在朋友圈...
    爾喬閱讀 216評論 0 0
  • 買了一套王小波文集伯病,吃飯的時候就捧一本讀,所以他的書很多時候讓我當(dāng)成了一盤下飯菜否过。也有時候把他當(dāng)成飯午笛,...
    玉露情歌閱讀 144評論 0 1
  • 輾轉(zhuǎn)輪回,又到樹葉飄零的季節(jié)苗桂,零落药磺、破碎,我的天空失去了顏色煤伟。大地枯萎癌佩,存在于我的世界的綠洲煎熬的支撐著,太多美好...
    那朵花的名字芽閱讀 579評論 0 0