javascript object 轉換int_每日一課 | JavaScript基礎

阿新 • • 發佈：2020-12-22

1.8.1 JavaScript的BOM

 1"window.location=''">跳轉</button> 21.window物件 3常用的屬性： 4*document ：對 Document 物件的只讀引用 5*history ：對 History 物件的只讀引用。 6*location：用於視窗或框架的 Location 物件 7 Navigator：對 Navigator 物件的只讀引用 8*parent：返回父視窗。 9 length:設定或返回視窗中的框架數量。10Screen:對Screen物件的只讀引用11 status:設定視窗狀態列的文字。12 top:返回最頂層的先輩視窗。1314常用方法：15 alert()顯示帶有一段訊息和一個確認按鈕的警告框。16 confirm()顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。17 prompt()顯示可提示使用者輸入的對話方塊。1819 close()關閉瀏覽器視窗。20 open()開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。21 scrollTo()把內容滾動到指定的座標。2223 setTimeout()在指定的毫秒數後呼叫函式或計算表示式。24 clearTimeout()取消由 setTimeout()方法設定的 timeout。25 setInterval()按照指定的週期(以毫秒計)來呼叫函式或計算表示式。26 clearInterval()取消由 setInterval()設定的 timeout。27282.Navigator物件29 Navigator 物件包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進行平臺專用的配置。30常用屬性：31with(document){32 write ("你的瀏覽器資訊：

");33 write ("程式碼："+navigator.appCodeName+"li>");34write("名稱："+navigator.appName+"</li>");35 write ("版本："+navigator.appVersion+"li>");36write("語言："+navigator.language+"</li>");37 write ("編譯平臺："+navigator.platform+"li>");38write("使用者表頭："+navigator.userAgent+"</li>");39write("l>");40}4142433. Screen 物件包含有關客戶端顯示螢幕的資訊。4445常用屬性：46document.write("螢幕寬度："+screen.width+"px");47document.write("螢幕高度："+screen.height+"px");48document.write("螢幕可用寬度："+screen.availWidth+"px");49document.write("螢幕可用高度："+screen.availHeight+"px");5051參考瞭解其他屬性資訊獲取方式52網頁可見區域寬：document.body.clientWidth53網頁可見區域高：document.body.clientHeight54網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)55網頁可見區域高：document.body.offsetHeight (包括邊線的高)56網頁正文全文寬：document.body.scrollWidth57網頁正文全文高：document.body.scrollHeight58網頁被捲去的高：document.body.scrollTop59網頁被捲去的左：document.body.scrollLeft60網頁正文部分上：window.screenTop61網頁正文部分左：window.screenLeft62螢幕解析度的高：window.screen.height63螢幕解析度的寬：window.screen.width64螢幕可用工作區高度：window.screen.availHeight65螢幕可用工作區寬度：window.screen.availWidth66674. History 物件包含使用者(在瀏覽器視窗中)訪問過的 URL。6869705. Location 物件包含有關當前 URL 的資訊。717273//獲取頁面中第二form表單中，一個username輸入框的值(7種方式)74//alert(document.forms[1].username.value);75alert(document.myform.username.value);76//alert(document.forms.myform.username.value);77//alert(document.forms.item(1).username.value);78//alert(document.forms['myform'].username.value);79//alert(document['myform'].username.value);80//alert(document.forms.item('myform').username.value);//火狐不相容

1.8.2 講解HTML DOM

(1)基本概念

 1HTML DOM 定義了訪問和操作HTML文件的標準方法。
 2HTML DOM 把 HTML 文件呈現為帶有元素、屬性和文字的樹結構(節點樹)。
 3DOM 被分為不同的部分：
 41.CoreDOM
 5定義了一套標準的針對任何結構化文件的物件
 62.XMLDOM
 7定義了一套標準的針對XML文件的物件
 83.HTMLDOM
 9定義了一套標準的針對 HTML 文件的物件。
10
11節點：根據 DOM，HTML 文件中的每個成分都是一個節點。
12 DOM 是這樣規定的：
13>整個文件是一個文件節點
14>每個HTML標籤是一個元素節點
15>包含在HTML元素中的文字是文字節點
 
16>每一個HTML屬性是一個屬性節點
17>註釋屬於註釋節點
18
19節點彼此間都存在關係。
20>除文件節點之外的每個節點都有父節點。
21>大部分元素節點都有子節點。
22>當節點分享同一個父節點時，它們就是同輩(同級節點)。
23>節點也可以擁有後代，後代指某個節點的所有子節點，或者這些子節點的子節點
24>節點也可以擁有先輩。先輩是某個節點的父節點，或者父節點的父節點
25
26查詢並訪問節點
27你可通過若干種方法來查詢您希望操作的元素：
28>通過使用getElementById()和getElementsByTagName()方法
29>通過使用一個元素節點的parentNode、firstChild以及lastChildchildNodes屬性
30> nextSibling返回節點之後緊跟的同級節點。/ previousSibling返回節點之前緊跟的同級節點。
31
32節點資訊
33每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是：
34nodeName(節點名稱)
35nodeValue(節點值)
36nodeType(節點型別)
37
38nodeName 屬性含有某個節點的名稱。
39元素節點的nodeName是標籤名稱
40屬性節點的nodeName是屬性名稱
41文字節點的nodeName永遠是#text
42文件節點的nodeName永遠是#document

(2)HTML DOM 物件參考

 1Document:代表整個HTML文件，可被用來訪問頁面中的所有元素
 2常用集合屬性：forms
 3Anchor:代表元素 4Area:代表影象對映中的元素 5Base:代表元素 6Body:代表元素 7Button:代表元素 8Event:代表某個事件的狀態 9Form:代表元素10Frame:代表元素11Frameset:代表元素12Iframe:代表