Window物件與DOM
目前,前端外掛數不勝數,比如有移動端滑動特效外掛Swiper,下拉重新整理的iScroll,彈出框外掛layer,還有我們經常使用的JQuery,jquery.mobile等,這些外掛能夠滿足我們日常的基本開發,我們只需呼叫相應的介面就能實現很炫酷的方法,萬變不離其宗,原始操作HTML文件的還是window物件或者DOM,下面是它們之間的關係及用法!
文件物件模型(DOM)
在DOM中，HTML文件的層次結構被表示為一個樹形結構。樹的根節點是一個表示當前HTML文件的Document物件，樹的每個子節點表示HTML文件中的不同內容,dom就像一個模型,它由代表文件的眾多物件組成
每個載入瀏覽器的 HTML 文件都會成為 Document 物件,Dom是一組物件的集合,這些物件代表了html文件裡的各個元素,每個元素就是一個js物件,Document 物件使我們可以從指令碼中對
模型裡的每個物件都有若干屬性和方法(如document物件的getElementsById方法),當你用他們來修改物件的狀態時,瀏覽器會讓這些改動反映到對應的html元素上,並更新你的文件,Document是探索DOM的入口,利用全域性變數document可以訪問Document物件,可以使用document.A 來判斷document物件是否定義了一個名為A的方法,
Document與Window物件的關係
從上圖可以看出：
（1）開啟網頁後，首先看到的是瀏覽器視窗，即頂層的window物件。
（2）其次，看到的是網頁文件的內容，即document文件。
（3）定位物件：
window.document.myform.text1
或
document.myform.text1
因為window視窗物件是所有頁面的根物件，所以常常省略。
真正的大牛不是你懂多少,而是能夠快速的查閱相應的API文件
Window物件
注:頁面上元素name屬性以及JavaScript引用的名稱必須一致包括大小寫
否則會提示你1個錯誤資訊 "引用的元素為空或者不是物件"
物件屬性(window.屬性)
window //窗戶自身, window=window.self 可使用全域性屬性 window訪問 Window物件
document 對 Document 物件的只讀引用。請參閱 Document 物件。
history 對 History 物件的只讀引用。請引數 History 物件。
location 用於視窗或框架的 Location 物件。請參閱 Location 物件。
screen 對 Screen 物件的只讀引用。請引數 Screen 物件。
navigator 對 Navigator 物件的只讀引用。請引數 Navigator 物件。
defaultStatus 設定或返回視窗狀態列中的預設文字。
innerheight 返回視窗的文件顯示區的高度。
innerwidth 返回視窗的文件顯示區的寬度。
outerheight 返回視窗的外部高度。
outerwidth 返回視窗的外部寬度。
pageXOffset 設定或返回當前頁面相對於視窗顯示區左上角的 X 位置。
pageYOffset 設定或返回當前頁面相對於視窗顯示區左上角的 Y 位置。
name 設定或返回視窗的名稱。
parent 返回父視窗。
top 返回最頂層的先輩視窗。
status 設定視窗狀態列的文字。
window.location //URL地址，配備佈置這個屬性可以開啟新的頁面
物件方法(window.方法)
alert() 顯示帶有一段訊息和一個確認按鈕的警告框。
blur() 把鍵盤焦點從頂層視窗移開。
clearInterval() 取消由 setInterval() 設定的 timeout。
clearTimeout() 取消由 setTimeout() 方法設定的 timeout。
close() 關閉瀏覽器視窗。
confirm() 顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。
createPopup() 建立一個 pop-up 視窗。
focus() 把鍵盤焦點給予一個視窗。
moveBy() 可相對視窗的當前座標把它移動指定的畫素。
moveTo() 把視窗的左上角移動到一個指定的座標。
open() 開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。
print() 列印當前視窗的內容。
prompt() 顯示可提示使用者輸入的對話方塊。
resizeBy() 按照指定的畫素調整視窗的大小。
resizeTo() 把視窗的大小調整到指定的寬度和高度。
scrollBy() 按照指定的畫素值來滾動內容。
scrollTo() 把內容滾動到指定的座標。
setInterval() 按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
setTimeout(方法,秒數) 在指定的毫秒數後呼叫函式或計算表示式。
定時器傳引數
timeOutEvent = setTimeout("longPress('" + obj + "')",1500);
成員物件
window.event
window.document //見document物件詳解
window.history
window.screen
window.navigator
window.external
window.history物件
window.history.length //瀏覽過的頁面數
history.back() //在瀏覽歷史裡後退一步
history.forward() //在瀏覽歷史裡前進一步
history.go(i) //到汗青詳細登記單的第i位//i>0進步,i<0撤退退卻
window.screen物件
window.screen.width //螢幕寬度
window.screen.height //螢幕高度
window.screen.colorDepth //螢幕顏色深度
window.screen.availWidth //可用寬度(除去工作列的高度)
window.screen.availHeight //可用高度(除去工作列的高度)
window.external物件
window.external.AddFavorite("地址","標題" ) //把網站新增到保藏夾
window.navigator物件
window.navigator.appCodeName //瀏覽器程式碼名
window.navigator.appName //瀏覽器步伐名
window.navigator.appMinorVersion //瀏覽器補釘版本
window.navigator.cpuClass //cpu型別 x86
window.navigator.platform //操作體系型別 win32
window.navigator.plugins
window.navigator.opsProfile
window.navigator.userProfile
window.navigator.systemLanguage //客戶體系語言 zh-cn簡體中文
window.navigator.userLanguage //使用者語言,同上
window.navigator.appVersion //瀏覽器版本(包括 體系版本)
window.navigator.userAgent
window.navigator.onLine //使用者否線上
window.navigator.cookieEnabled //瀏覽器是否撐持cookie
window.navigator.mimeTypes
Document物件
注:頁面上元素name屬性和JavaScript引用的名稱必須一致包括大小寫
否則會提示你一個錯誤資訊 “引用的元素為空或者不是物件”
利用全域性變數document可以訪問Document物件
物件集合
all[] 提供對文件中所有 HTML 元素的訪問。
anchors[] 返回對文件中所有 Anchor 物件的引用。
applets 返回對文件中所有 Applet 物件的引用。
forms[] 返回對文件中所有 Form 物件引用。
images[] 返回對文件中所有 Image 物件引用。
links[] 返回對文件中所有 Area 和 Link 物件引用。
物件屬性
document.body//提供對 <body> 元素的直接訪問。對於定義了框架集的文件，該屬性引用最外層的 <frameset>。
document.cookie 返回與當前文件有關的所有 cookie。
document.title //返回文件標題等價於HTML的title標籤
document.domain 返回當前文件的域名。
document.bgColor //返回頁面背景色
document.fgColor //返回前景色(文字顏色)
document.linkColor //未點選過的連結顏色
document.alinkColor //啟用連結(焦點在此連結上)的顏色
document.vlinkColor //已點選過的連結顏色
document.URL //設定URL屬性從而在同一視窗開啟另一網頁
document.fileCreatedDate //檔案建立日期，只讀屬性
document.fileModifiedDate //檔案修改日期，只讀屬性
document.lastModified 返回文件被最後修改的日期和時間。
document.fileSize //檔案大小，只讀屬性
document.cookie //設定和讀出cookie
document.charset //返回字符集 簡體中文:gb2312
document.URL 返回當前文件的 URL。
document.referrer 返回載入當前文件的文件的 URL。
document.styleSheets 返回樣式表的集合,返回值CSSStyleSheet[]
document.styleSheets[0].cssRules.style.paddingTop=”10px”設定樣式,樣式名去掉連字元,
常用物件方法
document.write() //動態向頁面寫入內容
document.writeln() 等同於 write() 方法，不同的是在每個表示式之後寫一個換行符。
document.createElement(<Tag>) //用指定標籤型別建立一個新的element物件)
document.getElementById(ID) //獲得指定ID值的物件
document.getElementsByName(Name) //獲得指定Name值的物件
getElementsByTagName() 返回帶有指定標籤名的物件集合。
document.body.appendChild(oTag)
body-主體子物件
document.body //指定文件主體的開始和結束等價於body>/body>
document.body.bgColor //設定或獲取物件後面的背景顏色
document.body.link //未點選過的連結顏色
document.body.alink //啟用連結(焦點在此連結上)的顏色
document.body.vlink //已點選過的連結顏色
document.body.text //文字色
document.body.innerText //設定body>…/body>之間的文字
document.body.innerHTML //設定body>…/body>之間的HTML程式碼
document.body.topMargin //頁面上邊距
document.body.leftMargin //頁面左邊距
document.body.rightMargin //頁面右邊距
document.body.bottomMargin //頁面下邊距
document.body.background //背景圖片
document.body.appendChild(oTag) //動態生成一個HTML物件
常用物件事件
document.body.onclick=”func()” //滑鼠指標單擊物件是觸發
document.body.onmouseover=”func()” //滑鼠指標移到物件時觸發
document.body.onmouseout=”func()” //滑鼠指標移出物件時觸發
location-位置子物件
與window.location返回物件相同
document.location.hash // #號後的部分
document.location.host // 域名+埠號
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分
document.location.port // 埠號
document.location.protocol // 網路協議(http:)
document.location.search // ?號後的部分
documeny.location.reload() //重新整理網頁
document.location.reload(URL) //開啟新的網頁
document.location.assign(URL) //開啟新的網頁
document.location.replace(URL) //開啟新的網頁
selection-選區子物件
document.selection
images集合(頁面中的圖象)
a)通過集合引用
document.images //對應頁面上的img標籤
document.images.length //對應頁面上img標籤的個數
document.images[0] //第1個img標籤
document.images[i] //第i-1個img標籤
b)通過nane屬性直接引用
<img name=”oImage”/>
document.images.oImage //document.images.name屬性
c)引用圖片的src屬性
document.images.oImage.src //document.images.name屬性.src
d)建立一個圖象
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同時在頁面上建立一個img /標籤與之對應就可以顯示
forms集合(頁面中的表單)
a)通過集合引用
document.forms //對應頁面上的form標籤
document.forms.length //對應頁面上/formform標籤的個數
document.forms[0] //第1個/formform標籤
document.forms[i] //第i-1個/formform標籤
document.forms[i].length //第i-1個/formform中的控制元件數
document.forms[i].elements[j] //第i-1個/formform中第j-1個控制元件
b)通過標籤name屬性直接引用
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表單名.控制元件名
c)訪問表單的屬性
document.forms[i].name //對應form name>屬性
document.forms[i].action //對應/formform action>屬性
document.forms[i].encoding //對應/formform enctype>屬性
document.forms[i].target //對應/formform target>屬性
document.forms[i].appendChild(oTag) //動態插入一個控制元件
document.all.oDiv //引用圖層oDiv
document.all.oDiv.style.display=” //圖層設定為可視
document.all.oDiv.style.display=”none” //圖層設定為隱藏
document.getElementId(”oDiv”) //通過getElementId引用物件
document.getElementId(”oDiv”).style=”
document.getElementId(”oDiv”).display=”none”
/*document.all表示document中所有物件的集合
只有ie支援此屬性，因此也用來判斷瀏覽器的種類*/
圖層物件的4個屬性
document.getElementById(”ID”).innerText //動態輸出文字
document.getElementById(”ID”).innerHTML //動態輸出HTML
document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML
HTMLElement物件
HTML DOM 節點
在 HTML DOM （文件物件模型）中，每個部分都是節點：
1.文件本身是文件節點
2.所有 HTML 元素是元素節點
3.所有 HTML 屬性是屬性節點
4.HTML 元素內的文字是文字節點
5.註釋是註釋節點
Element 物件
在 HTML DOM 中，Element 物件表示 HTML 元素。
Element 物件可以擁有型別為元素節點、文字節點、註釋節點的子節點。
NodeList 物件表示節點列表，比如 HTML 元素的子節點集合。
元素也可以擁有屬性。屬性是屬性節點
獲取
document.getElementById(ID) //獲得指定ID值的物件
document.getElementsByName(Name) //獲得指定Name值的物件
getElementsByTagName() 返回帶有指定標籤名的物件集合。
屬性和方法
方法裡有a,b的引數僅僅是為了加深說明,其他元素沒有a,b不代表是無參方法
Element.add(<class>)給元素新增指定的類
element.accessKey 設定或返回元素的快捷鍵。
element.appendChild() 向元素新增新的子節點，作為最後一個子節點。
element.attributes 返回元素屬性的集合。
element.childNodes 返回元素子節點的 NodeList。
element.className 設定或返回元素的 class 屬性。
element.clientHeight 返回元素的可見高度。
element.clientWidth 返回元素的可見寬度。
element.cloneNode() 克隆元素。
element.compareDocumentPosition() 比較兩個元素的文件位置。
element.contentEditable 設定或返回元素的文字方向。
element.dir 設定或返回元素的文字方向。
element.firstChild 返回元素的首個子。
element.getAttribute() 返回元素節點的指定屬性值。
element.getAttributeNode() 返回指定的屬性節點。
element.getElementsByTagName() 返回擁有指定標籤名的所有子元素的集合。
element.getFeature() 返回實現了指定特性的 API 的某個物件。
element.getUserData() 返回關聯元素上鍵的物件。
Element.hidden獲取或設定hidden屬性的存在狀態
element.hasAttribute() 如果元素擁有指定屬性，則返回true，否則返回 false。
element.hasAttributes() 如果元素擁有屬性，則返回 true，否則返回 false。
element.hasChildNodes() 如果元素擁有子節點，則返回 true，否則 false。
element.id 設定或返回元素的 id。
element.innerHTML 設定或返回元素的內容。
element.insertBefore(<a>,<b>) 在指定的已有的子節點之前插入新節點。A插到b前
element.isContentEditable 設定或返回元素的內容。
element.isDefaultNamespace() 如果指定的 namespaceURI 是預設的，則返回 true，否則返回 false。
element.isEqualNode(<a>) 檢查a元素是否與當前元素相等。
element.isSameNode(a) 檢查指定元素是否就是當前元素.
element.isSupported() 如果元素支援指定特性，則返回 true。
element.lang 設定或返回元素的語言程式碼。
element.lastChild 返回元素的最後一個子元素。
element.namespaceURI 返回元素的 namespace URI。
element.nextSibling 返回當前元素之後的兄弟元素
element.nodeName 返回元素的名稱。
element.nodeType 返回元素的節點型別。
element.nodeValue 設定或返回元素值。
element.normalize() 合併元素中相鄰的文字節點，並移除空的文字節點。
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的寬度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。
element.ownerDocument 返回元素的根元素（文件物件）。
element.parentNode 返回元素的父節點。
element.previousSibling 返回當前元素之前的兄弟元素
Element.remove(<class>) 從元素移除指定的類
element.removeAttribute() 從元素中移除指定屬性。
element.removeAttributeNode() 移除指定的屬性節點，並返回被移除的節點。
element.removeChild(a) 從元素中移除子節點。
element.replaceChild(a,b) 替換元素中的子節點。
element.scrollHeight 返回元素的整體高度。
element.scrollLeft 返回元素左邊緣與檢視之間的距離。
element.scrollTop 返回元素上邊緣與檢視之間的距離。
element.scrollWidth 返回元素的整體寬度。
element.setAttribute() 把指定屬性設定或更改為指定值。
element.setAttributeNode() 設定或更改指定屬性節點。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData() 把物件關聯到元素上的鍵。
element.style 設定或返回元素的 style 屬性。
Element.toggle(<class>)如果類不存在就新增它存在就移除它
element.tabIndex 設定或返回元素的 tab 鍵控制次序。
element.tagName 返回元素的標籤名。
element.textContent 設定或返回節點及其後代的文字內容。
element.title 設定或返回元素的 title 屬性。
element.toString() 把元素轉換為字串。
nodelist.item() 返回 NodeList 中位於指定下標的節點。
nodelist.length 返回 NodeList 中的節點數。