Window對象與DOM
目前,前端插件數不勝數,好比有移動端滑動特效插件Swiper,下拉刷新的iScroll,彈出框插件layer,還有咱們常用的JQuery,jquery.mobile等,這些插件可以知足咱們平常的基本開發,咱們只需調用相應的接口就能實現很炫酷的方法,萬變不離其宗,原始操做HTML文檔的仍是window對象或者DOM,下面是它們之間的關係及用法!javascript
文檔對象模型(DOM)
在DOM中，HTML文檔的層次結構被表示爲一個樹形結構。樹的根節點是一個表示當前HTML文檔的Document對象，樹的每一個子節點表示HTML文檔中的不一樣內容,dom就像一個模型,它由表明文檔的衆多對象組成(如document)Dom把javascript與HTML文檔的內容聯繫起來,是javascript與HTML之間的橋樑,經過使用dom對象(如document對象)能夠添加,刪除,和操做各類元素(如div),還可使用事件來響應用戶的交互操做,以及徹底控制css在顯示文檔的過程當中,瀏覽器會解析HTML並建立一個模型,這個模型保存了各個html元素之間的層級關係,每一個元素都由一個javascript對象表示,css
每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象,Dom是一組對象的集合,這些對象表明了html文檔裏的各個元素,每一個元素就是一個js對象,Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。好比var obj=document.getElementById(id);obj.style.background="url(products/images/duihao.png) ";html
模型裏的每一個對象都有若干屬性和方法(如document對象的getElementsById方法),當你用他們來修改對象的狀態時,瀏覽器會讓這些改動反映到對應的html元素上,並更新你的文檔,Document是探索DOM的入口,利用全局變量document能夠訪問Document對象,可使用document.A 來判斷document對象是否認義了一個名爲A的方法,返回true,這說明瀏覽器是支持這一個功能的前端
Document與Window對象的關係
從上圖能夠看出：java
（1）打開網頁後，首先看到的是瀏覽器窗口，即頂層的window對象。node
（2）其次，看到的是網頁文檔的內容，即document文檔。jquery
（3）定位對象：瀏覽器
window.document.myform.text1cookie
或網絡
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 中的節點數。
若有解釋不妥的地方,請多多留言指出!
- 1. Window對象與DOM
- 2. jQuery對象與DOM對象
- 3. JQuery對象與DOM對象
- 4. python Web：JavaScript --window對象、DOM（document對象）、定時器、history對象
- 5. Javascript中DOM，window對象,history對象，location對象，document對象，內置對象
- 6. 【使用 DOM】使用 Window 對象
- 7. 關於jquery對象與DOM對象
- 8. DOM對象與jquery對象的區別
- 9. jQuery對象與DOM對象的互轉
- 10. Dom對象與jQuery對象的轉換
- 更多相關文章...
- • XML DOM - CDATASection 對象 - XML DOM 教程
- • XML DOM - Comment 對象 - XML DOM 教程
- • Composer 安裝與使用
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。