document 對象

 

一.    document 對象

1. 屬性的設置
title : 頁面標題的設置
alert(document.title); 輸出頁面的標題;
document.title = "test1"; 設置頁面標題爲"test1"

URL : 返回當前文檔的URL (URL大寫)
alert( document.URL); 輸出頁面的url

bgColor : 設置當前頁面的背景色
document.bgColor = "red"; (顏色名稱用字符串顯示)

fgColor : 設置字體顏色
document. fgColor = "black"; (顏色名稱用字符串顯示)

2. 方法
1. getElementById("id名"); 經過id獲取頁面的元素

2. getElementsByTagName("標籤名");
經過標籤名獲取元素的對象,其返回值爲標籤對象的集合,能夠把它當成數組來應用,但其不是數組

3. getElementsByName("name的屬性值");
經過標籤的name屬性的值來獲取頁面元素對象;
name不是div的標準屬性;
在IE中,只有當 getElementsByName 針對的是form表單,這個方法纔有效,不然無效.

4. getElementsByClassName("類的屬性值");
經過標籤的class屬性的值來獲取頁面元素對象;
在IE中,不存在這個方法,能夠用function封裝一個方法來解決其兼容性.(解決兼容性時,注意: 每個對象裏都有一個className的屬性值)

3. 對象的集合
document.all : 返回頁面上全部元素對象 (只有IE中才有這個方法);
alert(document.all.length); 輸出頁面中全部元素的個數
alert(document.forms.length); 輸出頁面中form表單的個數

 

 

 

二.  history + location

1. history : 記錄訪問的歷史頁面

var a = history.length; 返回的是歷史訪問的頁面數

history有三個方法:
1. go (number): 表示向前進一頁
number爲正數,表明向前進number個頁面;
number爲負數,表明向後退number個頁面;
number爲零,表明刷新;
例如: history.go(1) ; history.go(-1) ; history.go(0) ;

2. forward (): 調用後表明向前進一頁
history.forward(); 表示向前進一頁;

3. back(): 調用後表明向後退一頁
history.back(); 表示向後退一頁;

4. load(): 調用後表明刷新
history.load(); 表示刷新

2. location : 包含當前URL的相關信息
1. var a = location.href; 返回當前頁面的路徑(URL)
location.href = "http://www.baidu.com"; 表示導航到新的頁面(例如這裏寫的百度)

2. search : 返回url的查詢數據
解釋: 在頁面一設置 a 標籤跳轉到頁面二, a.href = "頁面二.html?username=zhang&password=123";在頁面二里調用alert(location.search),當點擊頁面一里的跳轉後,進入頁面二,這時彈出窗口,輸出"?username=zhang&password=123"

3. assign : 頁面跳轉(有歷史記錄)
location.assign("url"); 表明跳轉到"url"這個頁面

4. replace : 頁面跳轉(只是無歷史記錄)
location.replace("url"); 表明跳轉到"url"這個頁面,無歷史記錄

5. reload : 刷新頁面
location.reload(true); 表明從服務器載入,刷新本頁面
location.reload(false); 表明從緩存載入,刷新本頁面

 

三.    操做元素的內容

1. innerHTML : 設置或獲取標籤中的內容
div2.innerHTML = div1.innerHTML;
表示: 把div1的內容賦給div2,其中的內容的是帶標籤賦值(也就是說包括樣式也會複製過去)

2. innerText : 設置或獲取標籤中文本的內容(支持IE 和 chrom)
div2.innerText = div1.innerText;
表示: 把div1的內容賦給div2,不帶標籤(樣式)的複製,純粹只複製文子

3. 兼容性問題:
textContent : 功能跟innerText的同樣,只是不支持IE,只支持 FF 和 chrom

 

四.    屬性操做

1. 直接操做 : 對象 . 屬性 = 值 (設置\獲取\添加)
a.href = "test.html"; 設置a 標籤跳轉的路徑
alert(a.id); 獲取a 標籤 id 的屬性值
a.className = "a-1"; 添加a標籤的class屬性,並設值

2. 方法
1. getAttribute("屬性"); 獲取該屬性的值
1. setAttribute("屬性","值"); 設置某屬性的值

 

五.    樣式操做(首先找到對象,再操做其樣式)

1. 行內樣式 : 對象. style. 屬性
例: div.style.color = "black"; 注意""的位置
div.style.width = "100px";

批量修改樣式:
div. className = "div2";
解釋: 每個對象都有一個className的屬性值,上面的div2是定義好的一個類名(在style中定義的".div2"),
把div2賦給div.className,這樣該div就有一個跟".div2"同樣的樣式了;
如果多個div同時設置樣式,能夠經過數組來作.

2. a.onmouseover = function(){ }; 設置鼠標移上去的樣式
a.onmouseout = function(){ }; 設置鼠標移出的樣式

3. styleSheets
document.stySheets[index],rules[index],style.屬性 (查找到某個對象,爲其設置樣式)
例如: document.stySheets[0],rules[0],style.width;
解釋: 找到第一個style塊, 在這個塊裏,找到第一個對象,設置其寬度;

rules 支持IE,chrom
CSSRules : 支持FF,chrome

4. screen 對象
avaiHeight : 返回顯示屏幕的高度(是屏幕,不是瀏覽器,且不含任務欄)
avaiWidth : 返回顯示屏幕的寬度(是屏幕,不是瀏覽器,且不含任務欄)

height : 屏幕高度(包含任務欄) width : 屏幕寬度(包含任務欄)