Window 浏覽器：
- location：地址 - history：歷史 - Document：文檔 - screen：窗口 - navigator：幫助
> 1.外部對象就是浏覽器提供的API -- **BOM**
> 2.這些對象由w3c規定，由浏覽器開發者設計並開發
> 3.這些對象分為2部分，其中BOM包含了DOM
> 4.我們可以通過js訪問這些對象
# 外部對象
> BOM (Browser Object Model)
浏覽器對象模型，用來訪問和操縱浏覽器窗口，是JavaScript有能力與浏覽器對話。
> DOM (Document Object Model)
文檔對象模型，用來操作文檔。
##1.對話框
- alert(str)
- 提示對話框，顯示str字符串的內容
- confirm(str)
- 確認對話框，顯示str字符串的內容
- 按"確定"按鈕返回true，其他操作返回false
>案例
//調用window對象的屬性或方法，可以省略"window."
//1.彈出框
//1)彈出框
function f1(){
alert("你好，小俊子");
}
//2)確認框
function f2(){
var v = confirm("你吃了嗎？");
//點擊確定返回true,否則返回false
console.log(v);
}
//3)輸入框
function f3(){
var p = prompt("你吃的什麼？");
//點擊取消返回null
console.log(p);
}
## 2. 定時器
- 多用於網頁動態時鐘，制作倒計時，跑馬燈效果
- 周期性時鐘
- 以一定的間隔執行代碼，循環往復
- setInterval(exp,time);
- 返回已經啟動的定時器對象
- 停止啟動的定時器
- clearInterval(tID)
- tID:啟動的定時器對象
- 一次性時鐘
- 在一個設定的時間間隔之後來執行代碼，而不是在函數被調用後執行
- setTimeout(exp,time);
- 停止啟動的定時器
- clearTimeout(tID)
- tID:啟動的定時器對象
> 案例
1)周期性定時器
//每隔N毫秒執行一次函數，反復執行，直到達到停止條件位置。
function f4(){
var n = 5;
//啟動定時器，返回定時器的ID，用來停止定時器
var id = setInterval(function(){
console.log(n);
switch(n%4){
case 0: btn1();break;
case 3: btn2();break;
case 2: btn3();break;
case 1: btn4();break;
default: ;
}
n++;
},100);
//啟動定時器就相當於啟動了一個支線程，當前方法f4相當於主線程。
//2個線程並發執行，不互相等待，
//因此主線程在啟動完支線程後立刻向下執行，而支線程卻需要在1秒後才執行
console.log("蹦");
}
2)一次性定時器
//推遲N毫秒執行一次函數，執行完之後，自動停止，
//也可以在未執行前手動停止
var id;
function f5(){
//啟動定時器,若想在未執行定時器前就將它停止，需要使用id
id = setTimeout(function(){
console.log("叮叮叮");
f4();
},3000);
}
function f6(){
//若定時器已經執行，則取消無效; 若定時器還未執行，則可以取消
clearTimeout(id);
console.log("已停止！");
}
## 3. 常用屬性
- screen 對象
- 包含有關客戶端顯示屏幕的信息
- 常用於獲取屏幕的分辨率和色彩
- 常用屬性：
- width height
- availWidth availHeight
- history對象
- 包含用戶訪問過的URL
- length屬性：浏覽器歷史列表中的URL數量
- 方法：
- back();
- forwird();
- location對象
- 包含有關當前URL的信息
- 常用於獲取和改變當前浏覽的網址
- href屬性：當前窗口正在浏覽的網址地址
- 方法
- reload():重新載入當前網址，相當於刷新
- navigator 對象
- 包含有關浏覽器的信息
- 常用於獲取客戶端浏覽器和操作系統的信息
> 案例
//Location對象
function f1(){
var b = confirm("你真的要離開我嗎？");
if(b){
location.href = "http://www.tmooc.cn";
}
}
//刷新頁面
function f2(){
location.reload();
}
//screen 對象： 獲取屏幕寬高
function f3(){
console.log(screen.width);
console.log(screen.height);
console.log(screen.availWidth);
console.log(screen.availHeight);
}
//history對象
function f4(){
history.forward();
}
//navigator對象
function f5(){
console.log(navigator.userAgent);
}
## DOM
### DOM操作
- 查找節點
- 讀取節點信息
- 修改節點信息
- 創建節點信息
- 刪除節點
### 讀取、修改
- 節點信息
- nodeName:節點名稱
- nodeType:節點類型
- (1) 讀取節點
- 讀取節點的名稱，類型
<p id="p1">1.<b>讀寫</b>節點</p>
<p id="p2">2.<b>查詢</b>節點</p>
<p id="p3">3.<b>增刪</b>節點</p>
var p1 = document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);
- 讀寫節點的內容
- 雙標簽中間的文本叫內容，任何雙標簽都有內容
- innerHTML：包括子標簽信息
- innerText：忽略子標簽
console.log(p1.innerHTML);
p1.innerHTML="1.<i>讀寫</i>節點";
console.log(p1.innerText);
- 讀寫節點的值
- 表單控件中的數據叫值，只有如下表單控件才有值：
- input
- select
- textarea
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，同時也希望多多支持！