Js_Dom(1)__Dom基礎

在學習Dom之前我們先了解一個概念,文檔樹~~~

文檔樹

節點

HTML DOM將 HTML 文檔視作樹結構。這種結構被稱爲節點樹

HTML 文檔中的所有內容都是節點

1.整個文檔是一個文檔節點

2.每個 HTML 元素是元素節點

3.HTML 元素內的文本是文本節點

4.每個 HTML 屬性是屬性節點

5.註釋是註釋節點

 

節點樹中的節點彼此擁有層級關係。

父（parent）、子（child）和同胞（sibling）等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱爲根（root）

每個節點都有父節點、除了根（它沒有父節點）

一個節點可擁有任意數量的子

同胞是擁有相同父節點的節點

DOM對象

文檔對象模型（Document Object Model，簡稱DOM),是W3C組織推薦的處理可擴展標誌語言的標準編程接口。HTML DOM 定義了所有

 HTML 元素的對象和屬性，以及訪問它們的方法,也就是說HTML DOM 是一套標準規則:關於如何獲取、修改、添加或刪除

 HTML 元的,Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問,DOM獨立於具體的編程語言,可以用於

任何語言，xml，js，vbs，c，java，php等等,DOM對象是瀏覽器大戰的產物,面試時不能直接就說它是JS的對象(雖然我們接

下來學的,你可以認爲它就是JS的對象:當瀏覽器支持js的dom接口(api)時)

如果你實在忘了怎麼描述這樣說:DOM操作就是增刪改查換element,text,attribute,comment(元素,文本,屬性,註釋)

在JS中文檔對象用關鍵字document表示

document的屬性

lastModified    返回文檔被最後修改的日期和時間。

 

referrer    返回載入當前文檔的文檔的URL,如果當前文檔不是通過超鏈接訪問的，則爲空.(例:來到A頁面的方法:直接在地址欄中輸入A的地址,從B頁面左擊A的鏈接，跳轉至A頁面,從B頁面右擊點擊A的鏈接，在新窗口中打開,從B頁面右擊點擊A的鏈接，在新標籤頁中打開,拖動A的鏈接至地址欄,拖動A的鏈接至標籤欄,使用瀏覽器的前進、後退按鈕)// 拓展:這個屬性包含在消息報頭裏發送到服務器,可以用作判斷流量來源.

 

title  返回當前文檔的標題。

 

URL  返回當前文檔的 URL。

 

body 返回body節點對象

 

domain     可返回下載當前文檔的服務器域

 

cookie       設置或返回與當前文檔有關的所有緩存。

//document.cookie=”username=karen;age=47”谷歌瀏覽器本地文檔直接打開設置不了,要從服務器發過來纔行
//值:expires爲有效時間(GMT格式):document.cookie=”username=karen;age=47;expires=Thu, 01-Jan-70 00:00:01 GMT”


設計幾個函數:
//1.設置cookie   
//cookie的名稱,存儲的Cookie值,Cookie過期的時間   
function setCookie(NameOfCookie, value, expiredays)   
{   
   
//把天數轉換爲合法的日期    
var ExpireDate = new Date ();   
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));   
    
//日期通過toGMTstring()函數被轉換成了GMT時間。通過expires設置,value值用函數escape轉編碼(防止亂碼,解碼用escape函數) 
document.cookie = NameOfCookie + "=" + escape(value) +   
  ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());   
}   
  
//2.獲取cookie值   
function getCookie(NameOfCookie)   
{   
  
// 檢查下cookie是否存在,如果不存在則document.cookie的長度爲0   
if (document.cookie.length > 0)   
{   
      
 var arrCookie=document.cookie.split(";")
 for(i in arrCookie){
if(arrCookie[i].split("=")[0]==NameOfCookie){return arrCookie[i].split("=")[1]}
}
}
// cookie不存在(1.長度大於0但是沒有 2.長度爲0)返回null  
return null;  
    
}   
  
///3.刪除cookie(時間設置爲過期的時間就ok了)   
function delCookie (NameOfCookie)   
{   
// 檢查下cookie是否設置，如果設置了則將過期時間調到過去的時間;      
if (getCookie(NameOfCookie)) {
var Time=new Date()
var expiresTime=Time.setTime(Time.getTime()-1000).toGMTString()   
document.cookie = NameOfCookie + "=iWillGoDie;" + " expires="+expiresTime+";"   
}