JavaScript—Element元素對象

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

Element元素

上一篇介紹了Element對象,Element對象表示HTML裏的元素。Element 對象能夠擁有類型爲元素節點、文本節點、註釋節點的子節點,所謂的節點就是一個個的標籤元素,Document 對象能夠獲得Element 對象,可經過 document .Element 對其進行訪問。
而後也介紹了相關的屬性和方法,常見的屬性和方法,思惟導圖:數組

image

對元素標記操做一類:瀏覽器

image

對屬性操做一類:app

image

而後拿其中幾個示例一下:
1.getElementById和className,getElementById能夠經過元素的id值來獲取元素對象,className能夠返回元素對象的類樣式選擇器的名稱或給元素對象設置一個類樣式選擇器。
順便介紹一下onload事件,這個事件可以先加載完標籤中的內容,再去執行腳本代碼,例如我在< body >種寫上這個事件,那麼< script >標籤就能夠寫在< body >標籤上面了,不用擔憂加載順序的問題,由於寫上這個事件後,會先加載完< body >標籤裏的內容,再去執行< script >標籤裏的腳本。
代碼示例:函數

image

運行結果:工具

image

image

2.createElement建立一個元素對象,setAttribute設置元素屬性的值,getAttribute獲得元素屬性的值,removeAttribute刪除元素的屬性,appendChild添加一個子標記,這個標記會添加到最後面,做爲最後一個子節點,innerText設置標籤內文本的內容。
代碼示例:學習

image

運行結果:spa

image

設置的title屬性:對象

image

點擊後title屬性就會被刪除掉,就不會顯示這個內容了:事件

image

removeChild能夠刪除添加的子節點:

image

運行結果:

image

3.innerHTML 設置或返回元素的年內容,能夠用來往頁面中添加標籤。
代碼示例:

image

innerHTML是直接添加的整個標籤,而appendChild則添加的是一個建立好的元素對象。

運行結果:

image

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

下面介紹一下location、screen和history對象的一些屬性:
1.location:以前也介紹過,這個對象包含有關當前URL地址欄的信息。
代碼示例:

image

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

image

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

image

接下來介紹幾個JavaScript 裏的對象:
1.String是JavaScript中的字符串對象。
代碼示例:

image

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

image

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

image

運行結果:

image

4.Math對象用於執行數學任務。

image

運行結果:

image

5.Array是JavaScript中的數組對象,以前已經介紹過了。

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

image

運行結果:

image

使用JavaScript進行表單提交的驗證:
在這裏須要用到一個事件:onsubmit,這個事件會在表單中的確認按鈕被點擊時觸發,而後會根據函數的返回值來決定提不提交表單。函數的返回值爲true提交表單,false則不提交表單。

代碼示例:

image

運行結果:
若是兩次密碼輸入不同就會返回false,表單不會提交:

image

image

若是兩次密碼輸入一致就會返回true,並提交表單:

image

image

相關文章
相關標籤/搜索