一、瀏覽器對象
1、window對象:指當前的瀏覽器窗口
方法:
2、定時器:可設定一個時間之後,再來運行
var timer=setInterval( function(){ ...//做的事情 } , 'slow' ); ----每隔指定時間之後執行,會一直執行
clearInterval( timer) ; ---結束指定的計時器,參數就是計時器對象
var timer=setTimeout(); 運行一次後就自動結束
clearTimeout(timer); ---清除計時器
var num=0; var i; function startCount(){ //計時器實現計數功能 clearTimeout(i); document.getElementById('count').value=num; num=num+1; i=setTimeout("startCount()",1000); } function stopCount(){ clearTimeout(i); };
3、History對象:記錄了用戶曾經瀏覽過的頁面(URL),並可以實現瀏覽器前進與後退相似導航的功能
window.history.[屬性|方法]
History對象屬性:
length---返回瀏覽器歷史列表中的URL數量
History對象方法:
back()/forward()---加載history列表中的上/下一個URL 【back()=go(-1) forward()=go(1)】
go()---加載history列表中的某個具體的頁面
1 ---前一個,相當於forward(1)
0 ---當前頁面
1 ---後一個,相當於back(-1)
其它數值---要訪問的URL在History的URL列表中的相對位置
【從窗口被打開的那一刻開始記錄,每個瀏覽器窗口、每個標籤頁乃至每個框架,都有自己的history對象與特定的window對象關聯。】
4、Location對象:用於獲取或設置窗體的URL,並且可以用於解析URL
location.[屬性|方法]
屬性:
hash---設置或返回從#開始的URL(錨)
host---主機名和當前URL的端口號
hostname---當前URL的主機名
href---完整的URL
pathname---當前URL的路徑部分
port---當前URL的端口號
protocol---當前URL的協議
search---從?開始的URL(查詢部分)
方法:--- [參數的URL是會將原來的url+上]
assign()---加載新的文檔
reload()---重新加載當前文檔
replace()--用新的文檔替換當期文檔
5、Navigator對象---包含有關瀏覽器的信息,通常用於檢測瀏覽器與操作系統的版本。
var browser=navigator.appName;
appCodeName---瀏覽器代碼名的字符串表示
appName---返回瀏覽器的名稱
appVersion---瀏覽器的平臺和版本信息
platform---運行瀏覽器的操作系統平臺
userAgent---由客戶機發送服務器的user-agent頭部的值 示例:例子
6、screen對象---獲取用戶屏幕的信息
window.screen.屬性
availHeight/availWidth---窗口可以使用的屏幕高/寬度【減去界面特性,比如任務欄】
colorDepth---用戶瀏覽器表示的顏色位數
pixelDepth---用戶瀏覽器表示的顏色位數(ie不支持)
height/width---屏幕的高/寬度
7、注意事項:
1)將<script>放在<head>標籤裏,會先加在<script>,若想先將佈局加載,得用window.onload
2)若佈局中有(如onclick="methodName()" )先要用到<script>,則得先讓<script>加載
3)同樣的,如果<script>在前面,但有獲取佈局中的對象(如getElementById()),則得先讓佈局加載
二、DOM---文本對象模型
1、DOM結點
1. 元素節點:上圖中<html>、<body>、<p>等都是元素節點,即標籤。
2. 文本節點:向用戶展示的內容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節點:元素屬性,如<a>標籤的鏈接屬性href="http://www.imooc.com"。
結點屬性:
nodeName---返回一個字符串,其內容是給定結點的名字
nodeType---返回一個整數,這個數組代表給定結點的類型
nodeValue---返回給定結點的當前值
遍歷結點樹:
childNodes--返回一個數組,這個數組由給定元素結點的子節點構成 示例
2、document.getElementsByName("name") ---通過name屬性值,返回帶有指定名稱的節點對象的集合
3、document.getElementsByTagName(" li" ) ---通過標籤名,返回指定標籤的節點對象的集合
4、elementNode.getAttribute(name); ---通過元素節點的屬性名稱獲取屬性的值。
5、elementNode.setAttribute(name,value); ---增加一個指定名稱和值的新屬性,或把一個現有的屬性設定爲指定的值
6、結點屬性:
1) nodeName : 節點的名稱 ·元素節點的 nodeName 與標籤名相同 ·屬性節點的 nodeName 是屬性的名稱 ·文本節點的 nodeName 永遠是 #text · 文檔節點的 nodeName 永遠是 #document
2) nodeValue :節點的值 ·元素節點的 nodeValue 是 undefined 或 null ·文本節點的 nodeValue 是文本自身 ·屬性節點的 nodeValue 是屬性的值
3) nodeType :節點的類型 元素類型 節點類型
元素 1
屬性 2
文本 3
註釋 8
文檔 9
7、elementNode.childNodes; ---訪問選定元素節點下的所有子節點的列表,返回的值是一個數組(僞)
8、node.firstChild/lastChild; ---屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點,則該屬性返回 null 【空格chrome、firefox等瀏覽器標籤之間的空白也算是一個文本節點也會算進去】
9、elementNode.parentNode; ---獲取指定結點的父節點
10、 nodeObject.nextSibling/ previousSibling ; ---獲取指定結點的下一個/上一個兄弟結點
function get_nextSibling(n){ //封裝獲取下一個兄弟結點 n--指定的結點元素
var x=n.nextSibling;
while (x && x.nodeType!=1){ //如果不是元素結點,則繼續往下查找
x=x.nextSibling;
}
return x;
}
11、.appendChild(newNode); ---向指定元素結點插入一個子節點,放在最後
12、 parentNode.insertBefore(newNode ,childNode); ---向指定元素結點插入一個子節點,放在指定的子節點的前面
13、nodeObject.removeChild(node); ---刪除子節點,若 刪除成功,可返回被刪除的結點[node],否則null ---刪除所有子節點示例
14、node.replaceChild(newNode,oldNode); ---實現子節點(對象)的替換。返回被替換對象的引用
15、document.createElement( 'tagName'); ---創建一個元素結點
16、document.createTextNode( 'data'); ---創建一個文本結點,返回新創建的Text結點 ---示例
17、獲取瀏覽器窗口可視區域的大小(瀏覽器的視口,不包括工具欄和滾動條)【仍不理解,待完善】
var width= window.innerWidth || document.documentElement.clientWidth; ---考慮兼容性
window.innerWidth ---IE9+、Chrome、Firefox、Opera 以及 Safar(瀏覽器)
document.documentElement.clientWidth ---IE 5~8
document.body.clientWidth ---IE 5~8
18、scrollHeight ---獲取網頁內容的大小 【仍不理解,待完善】
var h= document.body.scrollHeight||document.documentElement.scrollHeight; ---兼容性
19、offsetHeight = clientHeight + 滾動條 + 邊框 ---網頁尺寸 【仍不理解,待完善】
Offset屬性
獲取一個標籤的寬度,因爲用 div.style.width只能得到行內的數值,而我們通常使用的是內嵌式,外鏈式
var h= document.documentElement.offsetHeight || document.body.offsetHeight; ---
offsetWidth = width + border + padding 不包含margin //獲取 對象 的寬度