JS 瀏覽器BOM
阿新 • • 發佈：2020-09-11
BOM:Browser Object Model 瀏覽器物件模型
2.組成:
window :視窗物件
1.建立:
2.方法:
*與彈出框有關
1.alert(); 彈出警告框
2.confirm(); 顯示帶有一段訊息和確認按鈕的對話方塊
如果使用者點選確定按鈕則方法返回true,如果使用者點選取消按鈕,則方法返回false
1 //confirm練習 2 var flag = confirm("您確定要退出嗎?");3 if(flag){ 4 //退出操作 5 6 alert("歡迎再次光臨") 7 8 9 }else{ 10 //提示 11 alert("手抖了嗎"); 12 }
3.prompt(); 顯示可提示使用者輸入的對話方塊
返回值,用來回去使用者輸入的資訊
1 //prompt練習 輸入框 2
var result = prompt("請輸入使用者名稱");
3 alert(result);
*與開啟關閉有關的方法
1.close();關閉瀏覽器視窗
當前視窗,誰呼叫我,我關誰
2.open();開啟一個新的瀏覽器視窗
返回新的window 物件
1 //開啟一個新視窗 2 3 <input id="openBtn" type="button" value="開啟視窗"> 4 <input id="closeBtn" type="button" value="關閉視窗"> 5 var newWindow; 6 varopenBtn = document.getElementById("openBtn"); 7 openBtn.onclick=function(){ 8 //開啟視窗 9 newWindow= open("http://www.baidu.com"); 10 } 11 //關閉 12 var closeBtn = document.getElementById("closeBtn"); 13 closeBtn.onclick=function(){ 14 //關閉視窗 15 newWindow.close(); 16 }
*與定時器有關的
1.setTimeout(); 在指定的毫秒數後呼叫函式或計算表示式
clearTimeout();取消上述
引數:
1.js程式碼或方法物件
2.毫秒值
返回值:
唯一標號,用於取消定時器
2.setInterval();指定週期
clearInterval();取消
1 //一次性的定時器 2 var id = setTimeout("alert('boom~~~')",3000); 3 4 //取消 5 clearTimeout(id) 6 function fun(){ 7 8 alert('boom~~~~~'); 9 } 10 //迴圈定時器 11 setInterval(fun,2000); //每隔2秒出現彈框定時
3:屬性:
1.獲取BOM物件
history
location
Navigator
Screen
2.獲取Dom物件
document
4.特點:
不需要建立,直接使用window使用 window.方法名();
window引用可以省略.
Location : 位址列物件
方法:
* 1.reload 重新整理
* 2.href :跳轉
1 var btn = document.getElementById("btn"); 2 btn.onclick=function(){ 3 location.reload(); 4 5 } 6 7 8 var href = location.href; 9 var gotobaidu = document.getElementById("gotobaidu"); 10 gotobaidu.onclick=function(){ 11 12 location.href="https://www.baidu.com"; 13 14 }簡單的重新整理跳轉
Navigator :瀏覽器物件
Screen: 顯示器螢幕物件
History : 歷史記錄物件
屬性:
* length 返回當前視窗歷史列表中的url值.
1 var btn = document.getElementById("btn"); 2 btn.onclick =function(){ 3 4 var length = history.length; 5 alert(length) 6 7 }
document文件物件
1.建立
window.document
document
2.方法
1.獲取Element物件
1.getElementByIdById();根據id屬性直接獲取元素物件,id一般唯一
2.getElementsByTagName();根據元素名稱獲取元素名稱們,返回值是一個數組
3.getElementsByClassName();根據class屬性值獲取元素物件們
4.getElementsByName();根據name屬性獲取元素物件們
1 <div id="div1">div1</div> 2 <div id="div2">div2</div> 3 <div id="div3">div3</div> 4 5 <div class="cls1">div4</div> 6 <div class="cls1">div5</div> 7 8 <input type="text" name="username"> 9 <script> 10 //1. 11 //2. 12 var divs = document.getElementsByTagName("div"); 13 alert(divs.length); 14 15 //3 16 var cls1 = document.getElementsByClassName("cls1"); 17 alert(cls1.length); 18 19 //4. 20 var user = document.getElementsByName("username"); 21 alert(user.length); 22 23 24 </script>
2.建立其他DOM物件
createAttribute(name)
createComment()
createElement()
createTextNode()
3.屬性
. Element 元素物件
1.獲取/建立:通過document來獲取和建立
2.方法:
1.removeAttribute();:刪除屬性
2.setAttribute(): 設定屬性
Node:節點物件,其他的5個父物件
Element物件
1 <a>點我試一試</a> 2 <input type="button" id="btn_set" value="設定屬性"> 3 <input type="button" id="btn_remove" value="刪除屬性"> 4 <script> 5 //獲取btn 6 var btn_set = document.getElementById("btn_set"); 7 btn_set.onclick=function(){ 8 //獲取a標籤 9 var element = document.getElementsByTagName("a")[0]; 10 element.setAttribute("href","https://www.baidu.com"); 11 } 12 13 var btn_remove = document.getElementById("btn_remove"); 14 btn_remove.onclick=function(){ 15 //獲取a標籤 16 var element = document.getElementsByTagName("a")[0]; 17 element.removeAttribute("href"); 18 } 19 20 </script>
Node 節點物件
節點物件 :其他5個的父物件
特點:所有dom對可以認為是一個節點
方法:
CRUE dom 樹:
appendChild():向節點的子物件列表的節點新增位元組點
removeChild():刪除並返回當前節點的指定子節點
replaceChild():替換
1 <title>節點物件</title> 2 <style> 3 div{ 4 border: 1px solid red; 5 } 6 #div1{ 7 width: 200px; 8 height: 200px; 9 } 10 #div2{ 11 width: 100px; 12 height: 100px; 13 } 14 #div3{ 15 width: 120px; 16 height: 120px; 17 color: aqua; 18 } 19 20 21 </style> 22 </head> 23 <body> 24 <div id="div1"> 25 <div id="div2"></div> 26 div1 27 </div> 28 <a href="JavaScript:void(0)" id="del">刪除div的子節點</a> 29 <a href="JavaScript:void(0)" id="add">增加div的子節點</a> 30 <!--<button id="del">刪除子節點</button>--> 31 <script> 32 var element_a = document.getElementById("del"); 33 element_a.onclick=function () { 34 35 36 var div1 = document.getElementById("div1"); 37 var div2 = document.getElementById("div2"); 38 div1.removeChild(div3) 39 40 } 41 var element_add = document.getElementById("add"); 42 element_add.onclick=function () { 43 44 45 var div1 = document.getElementById("div1"); 46 var div2 = document.getElementById("div2"); 47 var div3 = document.createElement("div"); 48 div3.setAttribute("id","div3"); 49 div1.appendChild(div3); 50 51 } 52 </script>節點物件
事件物件系統學習
事件:操作
事件源:元件
監聽器:程式碼
註冊監聽:將事件,事件源,監聽器結合在一起
常見的事件:
1.點選事件
onclick:單擊事件
ondblclick:雙擊事件
2.焦點事件
onblur:失去焦點 一般用於表單校驗
onfocus:元素獲得焦點
3.載入事件
onload:一張頁面或一幅影象載入完成後實現
4.滑鼠事件
onmousedown:滑鼠按鈕被按下
*定義方法時,定義一個形參,結束event物件
*event物件的button屬性可以獲得滑鼠的哪個鍵被點選了
onmousemove:滑鼠被移動
onmouseout:滑鼠從某元素被移開
onmouseover:滑鼠移動到某元素上
onmouseup:滑鼠按鍵被鬆開
5.鍵盤事件
onkeydown:鍵盤某個按鍵被按下
onkeyup:鍵盤按鍵被鬆開
onkeypress:某個按下並鬆開
6.選擇和改變
onchange:域的內容被改變
onselect:文字被選中
7,表單事件
onsubmit:確認按鈕被點選,表單提交
可以阻止表單的提交,校驗表單
onreset:重置
//載入事件 window.onload=function(){ //失去焦點事件 document.getElementById("username").onblur=function(){ alert("失去焦點了"); } //滑鼠移到元素之上 document.getElementById("username").onmouseover=function(){ alert("滑鼠來了"); } //滑鼠點選事件 document.getElementById("username").onmousedown=function(event){ //alert("滑鼠點選了"); alert(event.button); } //鍵盤被點選事件 document.getElementById("username").onkeydown=function(event){ //alert("鍵盤按了"); if (alert(event.keyCode==13)){ alert("提交表單"); } } //改變了觸發 document.getElementById("username").onchange=function(event){ //alert("鍵盤按了"); alert("改變了..."); } document.getElementById("city").onchange=function(event){ //alert("鍵盤按了"); alert("改變了..."); } } //表單校驗 document.getElementById("from").onsubmit=function(){ // var flag=true; return flag; } </script>事件的簡單案例