JavaScript—Element元素對象

聲明:本欄目所使用的素材都是凱哥學堂VIP學員所寫,學員有權(quán)匿名,對文章有最終解釋權(quán);凱哥學堂旨在促進VIP學員互相學習的基礎上公開筆記。

Element元素

上一篇介紹了Element對象,Element對象表示HTML里的元素。Element 對象可以擁有類型為元素節(jié)點、文本節(jié)點、注釋節(jié)點的子節(jié)點,所謂的節(jié)點就是一個個的標簽元素,Document 對象可以得到Element 對象,可通過 document .Element 對其進行訪問。

然后也介紹了相關的屬性和方法,常見的屬性和方法,思維導圖:

對元素標記操作一類:

對屬性操作一類:

然后拿其中幾個示例一下:

1.getElementById和className,getElementById可以通過元素的id值來獲取元素對象,className可以返回元素對象的類樣式選擇器的名稱或給元素對象設置一個類樣式選擇器。

順便介紹一下onload事件,這個事件能夠先加載完標簽中的內(nèi)容,再去執(zhí)行腳本代碼,例如我在< body >種寫上這個事件,那么< script >標簽就可以寫在< body >標簽上面了,不用擔心加載順序的問題,因為寫上這個事件后,會先加載完< body >標簽里的內(nèi)容,再去執(zhí)行< script >標簽里的腳本。

代碼示例:

運行結(jié)果:

2.createElement創(chuàng)建一個元素對象,setAttribute設置元素屬性的值,getAttribute得到元素屬性的值,removeAttribute刪除元素的屬性,appendChild添加一個子標記,這個標記會添加到最后面,作為最后一個子節(jié)點,innerText設置標簽內(nèi)文本的內(nèi)容。

代碼示例:

運行結(jié)果:

設置的title屬性:

點擊后title屬性就會被刪除掉,就不會顯示這個內(nèi)容了:

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

運行結(jié)果:

3.innerHTML 設置或返回元素的年內(nèi)容,可以用來往頁面中添加標簽。

代碼示例:

innerHTML是直接添加的整個標簽,而appendChild則添加的是一個創(chuàng)建好的元素對象。

運行結(jié)果:

以上是Element 對象中的幾個常用屬性和方法示例。

下面介紹一下location、screen和history對象的一些屬性:

1.location:之前也介紹過,這個對象包含有關當前URL地址欄的信息。

代碼示例:

2.screen:對象包含有關客戶端顯示屏幕信息。

代碼示例:

3.history:對象包含用戶在瀏覽器窗口中訪問過的URL,也就是歷史記錄。

代碼示例:

接下來介紹幾個JavaScript 里的對象:

1.String是JavaScript中的字符串對象。

代碼示例:

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

3.Date對象用于處理日期和時間。

運行結(jié)果:

4.Math對象用于執(zhí)行數(shù)學任務。

運行結(jié)果:

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

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

運行結(jié)果:

使用JavaScript進行表單提交的驗證:

在這里需要用到一個事件:onsubmit,這個事件會在表單中的確認按鈕被點擊時觸發(fā),然后會根據(jù)函數(shù)的返回值來決定提不提交表單。函數(shù)的返回值為true提交表單,false則不提交表單。

代碼示例:

運行結(jié)果:

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

如果兩次密碼輸入一致就會返回true,并提交表單:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,207評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,724評論 19 139
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock閱讀 3,498評論 2 36
  • 在我記憶中,在自己很小的時候。抱著爸爸媽媽的腿,然后喊爸爸媽媽。那個時候的自己還沒有上幼兒園。在我印象里面清晰的記...
    泅海閱讀 502評論 0 0
  • 我提燈還家,告訴你 群山腳下成批白馬 倒在血泊 牧羊人拉著馬車,像一片紅色楓葉 今晚是最后一夜 兩種如果 在巖石上...
    蘇蘇諾閱讀 266評論 5 5

友情鏈接更多精彩內(nèi)容