JS學習四（BOM DOM）

標籤：使用方法   arch   element   log   輸入   語句   win   btn   jre   

　　　　BOM               

 

 

Screen對象

console.log(window.width);//螢幕寬度
console.log(window.height);//螢幕高度
console.log(window.availWidth);//螢幕可用寬度
console.log(window.availHeight);//螢幕可用寬度


★  location對象

取到瀏覽器的URL地址資訊：
完整的URL路徑：
協議名：//主機名稱(IP地址):連接埠號碼/檔案所在路徑?傳遞參數(name1=value1&name2=value2)#錨點
例如：
http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top

console.log(location.href);    //返回當前完整路徑
console.log(location.protocol);    //返回協議名
console.log(location.host);    //返回主機名稱+連接埠號碼
console.log(location.hostname);    //返回主機名稱
console.log(location.port);    //返回連接埠號碼
console.log(location.pathname);    //返迴文件路徑
console.log(location.port);    //返回連接埠號碼
console.log(location.search);    //返回開頭的參數列表
console.log(location.hash);   //返回#開頭的錨點

 使用JS跳轉頁面:
location = "http://www.baidu.com"; 

其他使用location提供的方法跳轉頁面的方式
location.assign("http://www.baidu.com");
location.replace("http://www.baidu.com");
location.reload("http://www.baidu.com");

function assign(){
//載入新的文檔，載入以後，可以回退
location.assign("http://www.baidu.com");
}

function replace(){
//使用新文檔替換當前文檔，替換以後，不能回退
location.replace("http://www.baidu.com");
}

function reload(){
重新載入當前文檔，重新整理頁面
reload():在本地重新整理當前頁面，相當於F5
reload():強制重新整理，從伺服器端重新載入頁面，相當於ctrl+F5強制重新整理頁面
location.reload();
}

/*
history 瀏覽曆史
1、
console.log(history);
console.log(history.length);   //表示瀏覽曆史個數

function back(){
history.back();  後退按鈕
}
function forward(){
history.forward();  前進按鈕
}
function go(){
跳轉到瀏覽曆史的任意一個頁面：
0表示當前頁面，-1表示後一頁(back)，1表示前一頁(forward)
}

navigator 瞭解即可
包含瀏覽器的各種系統資訊。

console.log(navigator);

檢測瀏覽器安裝的各種外掛程式。

console.log(navigator.plugins);

 

Window對象的常用方法
在window對象中的所有方法和屬性，均可以省略window關鍵字。
window.alert(); 》彈窗
1.alert():彈出一個警告提示框；
2.prompt():彈出接受使用者的輸入；
3.confirm():彈出帶有“確定”“取消”按鈕的對話方塊，點擊按鈕返回
4.close():關閉當前瀏覽器視窗。在個別瀏覽器中，只能關閉再當前指令碼新開啟的頁面
(使用超連結、window.open()等方式開啟)
5.open():開啟一個新視窗。
參數一：新視窗的地址；
參數二：新視窗的名字，並沒什麼用；
參數三：新視窗的各種屬性設定，"屬性=值1，屬性2=值2，屬性3=值3"
6.setTimeout: 設定延時執行，只會執行一次；
setInterval: 設定定時器，每隔n毫秒執行一次。
接受兩個參數：需要執行的function、毫秒數。
7.clearTimeout:清除延時器
clearInterval:清楚定時器
使用方法：設定延時器或者定時器時。可以使用變數接受定時器ID；
var id =setInterval；
調用clearInterval時，將id傳入，即可清除對應的定時器；
clearInterval(id);

　　　　DOM               

 

【DOM樹節點】
DOM樹節點分為三大類：元素節點、屬性節點、文本節點:
文本節點、屬性節點屬於元素節點的子節點，操作時，均需要先取到元素節點，在操作子節點。
可以使用getElement系列方法，取到元素節點。

【查看元素節點】

getElementById：通過Id取到唯一節點。如果Id重名，只能取第一個。
getElementsByName() ：通過name屬性
getElementsByTagName() ：通過標籤名
getElementsByClassName() ：通過class名

擷取元素節點時，一定要注意：擷取節點的語句，必須在DOM渲染完成之後執行，可以有兩種方式實現：
① 將js代碼寫在body之後；② 將js代碼寫在window.onload函數中。
後面三個getElements，取到的是數組格式，不能直接添加各種屬性，而應該取出數組的每一個單獨操作。
例如：getElementsByName("name1")[0].onclick=function


【查看/設定屬性節點】
1.查看屬性節點：getAttribute("屬性名稱");
2.設定屬性節點：setAttribute("屬性名稱"，"新屬性值");
查看和設定屬性節點，必須先取到元素節點，才能使用。

eg：

var btn1=document.getElementById("btn1");
btn1.onclick=function(){
　　alert(btn1);
}

var input1=document.getElementByname("input");

JS學習四（BOM DOM）