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.; } } //刷新頁面 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
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，同時也希望多多支持武林網！
新聞熱點
疑難解答
