聲明:本欄目所使用的素材都是凱哥學(xué)堂VIP學(xué)員所寫,學(xué)員有權(quán)匿名榴鼎,對(duì)文章有最終解釋權(quán)输吏;凱哥學(xué)堂旨在促進(jìn)VIP學(xué)員互相學(xué)習(xí)的基礎(chǔ)上公開(kāi)筆記。
上一篇介紹了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赊堪,并提交表單: