JavaScript—Element元素對(duì)象

聲明:本欄目所使用的素材都是凱哥學(xué)堂VIP學(xué)員所寫,學(xué)員有權(quán)匿名榴鼎,對(duì)文章有最終解釋權(quán)输吏;凱哥學(xué)堂旨在促進(jìn)VIP學(xué)員互相學(xué)習(xí)的基礎(chǔ)上公開(kāi)筆記。

Element元素

上一篇介紹了Element對(duì)象江锨,Element對(duì)象表示HTML里的元素。Element 對(duì)象可以擁有類型為元素節(jié)點(diǎn)糕篇、文本節(jié)點(diǎn)啄育、注釋節(jié)點(diǎn)的子節(jié)點(diǎn),所謂的節(jié)點(diǎn)就是一個(gè)個(gè)的標(biāo)簽元素娩缰,Document 對(duì)象可以得到Element 對(duì)象灸撰,可通過(guò) document .Element 對(duì)其進(jìn)行訪問(wèn)谒府。

然后也介紹了相關(guān)的屬性和方法拼坎,常見(jiàn)的屬性和方法,思維導(dǎo)圖:

對(duì)元素標(biāo)記操作一類:

對(duì)屬性操作一類:

然后拿其中幾個(gè)示例一下:

1.getElementById和className完疫,getElementById可以通過(guò)元素的id值來(lái)獲取元素對(duì)象泰鸡,className可以返回元素對(duì)象的類樣式選擇器的名稱或給元素對(duì)象設(shè)置一個(gè)類樣式選擇器。

順便介紹一下onload事件壳鹤,這個(gè)事件能夠先加載完標(biāo)簽中的內(nèi)容盛龄,再去執(zhí)行腳本代碼,例如我在< body >種寫上這個(gè)事件芳誓,那么< script >標(biāo)簽就可以寫在< body >標(biāo)簽上面了余舶,不用擔(dān)心加載順序的問(wèn)題,因?yàn)閷懮线@個(gè)事件后锹淌,會(huì)先加載完< body >標(biāo)簽里的內(nèi)容匿值,再去執(zhí)行< script >標(biāo)簽里的腳本。

代碼示例:

運(yùn)行結(jié)果:

2.createElement創(chuàng)建一個(gè)元素對(duì)象赂摆,setAttribute設(shè)置元素屬性的值挟憔,getAttribute得到元素屬性的值钟些,removeAttribute刪除元素的屬性,appendChild添加一個(gè)子標(biāo)記绊谭,這個(gè)標(biāo)記會(huì)添加到最后面政恍,作為最后一個(gè)子節(jié)點(diǎn),innerText設(shè)置標(biāo)簽內(nèi)文本的內(nèi)容达传。

代碼示例:

運(yùn)行結(jié)果:

設(shè)置的title屬性:

點(diǎn)擊后title屬性就會(huì)被刪除掉篙耗,就不會(huì)顯示這個(gè)內(nèi)容了:

removeChild可以刪除添加的子節(jié)點(diǎn):

運(yùn)行結(jié)果:

3.innerHTML 設(shè)置或返回元素的年內(nèi)容,可以用來(lái)往頁(yè)面中添加標(biāo)簽宪赶。

代碼示例:

innerHTML是直接添加的整個(gè)標(biāo)簽鹤树,而appendChild則添加的是一個(gè)創(chuàng)建好的元素對(duì)象。

運(yùn)行結(jié)果:

以上是Element 對(duì)象中的幾個(gè)常用屬性和方法示例逊朽。

下面介紹一下location罕伯、screen和history對(duì)象的一些屬性:

1.location:之前也介紹過(guò),這個(gè)對(duì)象包含有關(guān)當(dāng)前URL地址欄的信息叽讳。

代碼示例:

2.screen:對(duì)象包含有關(guān)客戶端顯示屏幕信息追他。

代碼示例:

3.history:對(duì)象包含用戶在瀏覽器窗口中訪問(wèn)過(guò)的URL,也就是歷史記錄岛蚤。

代碼示例:

接下來(lái)介紹幾個(gè)JavaScript 里的對(duì)象:

1.String是JavaScript中的字符串對(duì)象邑狸。

代碼示例:

2.Number是JavaScript中的原始數(shù)值包裝對(duì)象。 代碼示例:

3.Date對(duì)象用于處理日期和時(shí)間涤妒。

運(yùn)行結(jié)果:

4.Math對(duì)象用于執(zhí)行數(shù)學(xué)任務(wù)单雾。

運(yùn)行結(jié)果:

5.Array是JavaScript中的數(shù)組對(duì)象,之前已經(jīng)介紹過(guò)了她紫。

6.RegExp對(duì)象用于表示正則表達(dá)式硅堆,它是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。

運(yùn)行結(jié)果:

使用JavaScript進(jìn)行表單提交的驗(yàn)證:

在這里需要用到一個(gè)事件:onsubmit贿讹,這個(gè)事件會(huì)在表單中的確認(rèn)按鈕被點(diǎn)擊時(shí)觸發(fā)渐逃,然后會(huì)根據(jù)函數(shù)的返回值來(lái)決定提不提交表單。函數(shù)的返回值為true提交表單民褂,false則不提交表單茄菊。

代碼示例:

運(yùn)行結(jié)果:

如果兩次密碼輸入不一樣就會(huì)返回false,表單不會(huì)提交:

如果兩次密碼輸入一致就會(huì)返回true赊堪,并提交表單:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末面殖,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子哭廉,更是在濱河造成了極大的恐慌脊僚,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,651評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件群叶,死亡現(xiàn)場(chǎng)離奇詭異吃挑,居然都是意外死亡钝荡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門舶衬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)埠通,“玉大人,你說(shuō)我怎么就攤上這事逛犹《巳瑁” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,931評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵虽画,是天一觀的道長(zhǎng)舞蔽。 經(jīng)常有香客問(wèn)我,道長(zhǎng)码撰,這世上最難降的妖魔是什么渗柿? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,218評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮脖岛,結(jié)果婚禮上朵栖,老公的妹妹穿的比我還像新娘。我一直安慰自己柴梆,他們只是感情好陨溅,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著绍在,像睡著了一般门扇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上偿渡,一...
    開(kāi)封第一講書(shū)人閱讀 51,198評(píng)論 1 299
  • 那天臼寄,我揣著相機(jī)與錄音,去河邊找鬼卸察。 笑死脯厨,一個(gè)胖子當(dāng)著我的面吹牛铅祸,可吹牛的內(nèi)容都是我干的坑质。 我是一名探鬼主播,決...
    沈念sama閱讀 40,084評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼临梗,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼涡扼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起盟庞,我...
    開(kāi)封第一講書(shū)人閱讀 38,926評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤吃沪,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后什猖,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體票彪,經(jīng)...
    沈念sama閱讀 45,341評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡红淡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了降铸。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片在旱。...
    茶點(diǎn)故事閱讀 39,731評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖推掸,靈堂內(nèi)的尸體忽然破棺而出桶蝎,到底是詐尸還是另有隱情,我是刑警寧澤谅畅,帶...
    沈念sama閱讀 35,430評(píng)論 5 343
  • 正文 年R本政府宣布登渣,位于F島的核電站,受9級(jí)特大地震影響毡泻,放射性物質(zhì)發(fā)生泄漏胜茧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評(píng)論 3 326
  • 文/蒙蒙 一仇味、第九天 我趴在偏房一處隱蔽的房頂上張望竹揍。 院中可真熱鬧,春花似錦邪铲、人聲如沸芬位。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,676評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)昧碉。三九已至,卻和暖如春揽惹,著一層夾襖步出監(jiān)牢的瞬間被饿,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,829評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工搪搏, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狭握,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,743評(píng)論 2 368
  • 正文 我出身青樓疯溺,卻偏偏與公主長(zhǎng)得像论颅,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子囱嫩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評(píng)論 2 354

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案恃疯? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評(píng)論 1 92
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)墨闲,斷路器今妄,智...
    卡卡羅2017閱讀 134,652評(píng)論 18 139
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock閱讀 3,371評(píng)論 2 36
  • 在我記憶中,在自己很小的時(shí)候。抱著爸爸媽媽的腿盾鳞,然后喊爸爸媽媽犬性。那個(gè)時(shí)候的自己還沒(méi)有上幼兒園。在我印象里面清晰的記...
    泅海閱讀 422評(píng)論 0 0
  • 我提燈還家腾仅,告訴你 群山腳下成批白馬 倒在血泊 牧羊人拉著馬車仔夺,像一片紅色楓葉 今晚是最后一夜 兩種如果 在巖石上...
    蘇蘇諾閱讀 229評(píng)論 5 5