javascript之DOM

DOM文檔對(duì)象模型

DOM文檔對(duì)象模型是基于HTML樹的api歌殃,這里可以把HTML結(jié)構(gòu)看成是一顆樹形結(jié)構(gòu)素邪,使用DOM可以操作樹中的節(jié)點(diǎn)揭朝,即操作(增刪改查)HTML標(biāo)簽庐舟。

上圖是一個(gè)簡單的DOM樹形結(jié)構(gòu)圖欣除,可以使用document對(duì)象獲取DOM,這個(gè)對(duì)象是window對(duì)象下的挪略,在使用時(shí)历帚,可以省略window伟端。

可以把一個(gè)HTML標(biāo)簽看做是一個(gè)對(duì)象政敢,標(biāo)簽中的屬性對(duì)應(yīng)的就是對(duì)象中的屬性,DOM提供了訪問他們的方法彤悔。

getElementById

????getElementById根據(jù)html標(biāo)簽的id來獲取標(biāo)簽對(duì)象

getElementsByName

????getElementsByName根據(jù)html標(biāo)簽的name來獲取一個(gè)數(shù)組對(duì)象摊求,在html標(biāo)簽中name值是可以重復(fù)的禽拔,所以該方法會(huì)返回一個(gè)數(shù)組對(duì)象

getElementsByTagName

????getElementsByTagName根據(jù)標(biāo)簽的名字來獲取數(shù)組對(duì)象

hasChildNodes

????hasChildNodes判斷當(dāng)前html標(biāo)簽對(duì)象下是否包含子節(jié)點(diǎn)。

nodeName室叉、nodeType和nodeValue

????在文檔中每個(gè)節(jié)點(diǎn)都有這三個(gè)屬性:

????nodeName睹栖,獲取節(jié)點(diǎn)名字

????????????如果節(jié)點(diǎn)是元素節(jié)點(diǎn),nodeName返回這個(gè)元素的名稱

????????????如果是屬性節(jié)點(diǎn)太惠,nodeName返回這個(gè)屬性的名稱

????????????如果是文本節(jié)點(diǎn)磨淌,返回一個(gè)內(nèi)容為#text的字符串

????nodeType疲憋,返回一個(gè)整數(shù)凿渊,數(shù)值表示節(jié)點(diǎn)的類型,常用的有下面三個(gè):

????????????元素節(jié)點(diǎn)缚柳,返回1

????????????屬性節(jié)點(diǎn)埃脏,返回2

????????????文本節(jié)點(diǎn),返回3

????nodeValue秋忙,獲取節(jié)點(diǎn)的當(dāng)前值

????????????元素節(jié)點(diǎn)彩掐,null

????????????屬性節(jié)點(diǎn),當(dāng)前屬性的值

????????????文本節(jié)點(diǎn)灰追,返回文本內(nèi)容

replaceNode

????????replaceNode替換節(jié)點(diǎn)

getAttribute

????????getAttribute獲取標(biāo)簽中的屬性堵幽,除了使用對(duì)象名.屬性名的方式來獲取屬性之外還可以使用getAttribute()方法來獲取指定的屬性值

setAttribute

????????setAttribute給對(duì)象添加屬性

createElement

????????createElement可以創(chuàng)建一個(gè)標(biāo)簽,createTextNode向標(biāo)簽中添加文本

insertBefore

????????insertBefore在指定位置之前插入標(biāo)簽弹澎。

removeChild

????????removeChild刪除指定元素朴下。

innerHTML

????????大部分瀏覽器中都支持innerHTML,但是他不是DOM標(biāo)準(zhǔn)的組成部分苦蒿∨闺剩可以使用innerHTML獲取對(duì)象的內(nèi)容。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市团滥,隨后出現(xiàn)的幾起案子竿屹,更是在濱河造成了極大的恐慌,老刑警劉巖灸姊,帶你破解...
    沈念sama閱讀 212,884評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拱燃,死亡現(xiàn)場離奇詭異,居然都是意外死亡厨钻,警方通過查閱死者的電腦和手機(jī)扼雏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來夯膀,“玉大人诗充,你說我怎么就攤上這事∮战ǎ” “怎么了蝴蜓?”我有些...
    開封第一講書人閱讀 158,369評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長俺猿。 經(jīng)常有香客問我茎匠,道長,這世上最難降的妖魔是什么押袍? 我笑而不...
    開封第一講書人閱讀 56,799評(píng)論 1 285
  • 正文 為了忘掉前任诵冒,我火速辦了婚禮,結(jié)果婚禮上谊惭,老公的妹妹穿的比我還像新娘汽馋。我一直安慰自己,他們只是感情好圈盔,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評(píng)論 6 386
  • 文/花漫 我一把揭開白布豹芯。 她就那樣靜靜地躺著,像睡著了一般驱敲。 火紅的嫁衣襯著肌膚如雪铁蹈。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,096評(píng)論 1 291
  • 那天众眨,我揣著相機(jī)與錄音握牧,去河邊找鬼。 笑死娩梨,一個(gè)胖子當(dāng)著我的面吹牛沿腰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播姚建,決...
    沈念sama閱讀 39,159評(píng)論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼矫俺,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起厘托,我...
    開封第一講書人閱讀 37,917評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤友雳,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后铅匹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體押赊,經(jīng)...
    沈念sama閱讀 44,360評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評(píng)論 2 327
  • 正文 我和宋清朗相戀三年包斑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了流礁。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,814評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡罗丰,死狀恐怖神帅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情萌抵,我是刑警寧澤找御,帶...
    沈念sama閱讀 34,509評(píng)論 4 334
  • 正文 年R本政府宣布,位于F島的核電站绍填,受9級(jí)特大地震影響霎桅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜讨永,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評(píng)論 3 317
  • 文/蒙蒙 一滔驶、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧卿闹,春花似錦揭糕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杠巡。三九已至量窘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間氢拥,已是汗流浹背蚌铜。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評(píng)論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嫩海,地道東北人冬殃。 一個(gè)月前我還...
    沈念sama閱讀 46,641評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像叁怪,于是被迫代替她去往敵國和親审葬。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評(píng)論 2 351

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

  • ??DOM(文檔對(duì)象模型)是針對(duì) HTML 和 XML 文檔的一個(gè) API(應(yīng)用程序編程接口)痴荐。 ??DOM 描繪...
    霜天曉閱讀 3,623評(píng)論 0 7
  • 【問題】If some one handed me 一個(gè)對(duì)象,那我有沒有得到這個(gè)對(duì)象中包含的所有的屬性辦法官册?【回答...
    隱藏的記號(hào)閱讀 479評(píng)論 0 1
  • DOM 概念 DOM:Document Object Model 文檔對(duì)象模型生兆。 DOM作用:操作頁面中的元素。 ...
    鋒享前端閱讀 220評(píng)論 0 1
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,108評(píng)論 0 21
  • DOM 文檔對(duì)象模型 (DOM) 是HTML和XML文檔的編程接口膝宁。它給文檔(結(jié)構(gòu)樹)提供了一個(gè)結(jié)構(gòu)化的表述并且定...
    匿名用戶404閱讀 432評(píng)論 1 8