Web基礎之JavaScript（二）

window對象
+ DHTML
1) 操作HTML以創造各種動態視覺效果，是一種瀏覽器端的動態網頁技術。
2) DHTML的功能：
—> 動態改變頁面元素。
—> 事件響應機制製作動態摺疊的樹形結構和菜單。
—> 與用戶進行交互等。
1) 對象模型：

window

表示瀏覽器中打開的窗口。也是父對象。
1）常用屬性：
①name：窗口名稱。
②opener：打開當前窗口的window對象（引用）。
③status：窗口底部狀態欄信息。
2）常用子對象：
①document：代表給定瀏覽器窗口中的HTML文檔。
②history：包含了用戶瀏覽過的URL信息。
③location：包含關於當前URL的信息。
④navigator：包含Web瀏覽器的信息。
⑤screen：包含關於客戶屏幕和渲染能力的信息。
⑥event：代表事件狀態。
3）方法：
—> alert(str) : 提示對話框，顯示str字符串的內容。
—> confirm(str) ：確認對話框，按確定返回true，其他操作返回false;
—> prompt(str,value)：輸入對話框。採用文本框輸入信息，str爲提示信息，value爲初始值，按“確定”返回輸入值，其他操作返回undefine，value可省。
//使用：var msg = confirm(str); if(msg==true){…}
【注意：window.prompt(“請輸入ID：”);//因爲不能控制它，所以很少用】
—> window.open(url)：重複打開。
—> window.open(url,windowName)：採取命名方式，避免重複打開
—> window.open(url,windowName,config)：config設置新窗口外觀如高和寬。
windowName: _blank:在新窗口中打開；_self：當前窗口中打開；_top：當前網頁上部窗口中打開
config: top/left：窗口離屏幕頂部/左邊距離； width/height：窗口寬高；
menubar/toolbar/scrollbar/status：yes,no窗口有沒有菜單/工具條/滾動條/狀態欄
—> window.close()：關閉窗口。

function Wopen(){
      var win = window.open("http://www.imooc.com","_blank","width=300,height=200,
      menubar=no,toolbar=no,status=no”);
}

週期性定時器
—>window.setInterval(exp,time)：週期性觸發代碼exp，返回已經啓動的定時器。exp：執行語句，time：時間週期，單位爲毫秒;
【注意：調用：setInterval(“clock()”,1000)或setInterval(clock,1000)】
—> window.clearInterval(tObj)：停止啓動的定時器。tObj：啓動的定時器對象。
一次性定時器
—>window.setTimeout(exp,time)：一次性觸發代碼exp，返回已經啓動的定時器。exp：執行語句，time：時間週期，單位爲毫秒。
【注意：調用自身可無限次循環】
—> window.clearTimeout(tObj)：停止啓動的定時器。tObj：啓動的定時器對象。
—> print()：打印當前窗口內容
—> focus()：把鍵盤焦點給予一個窗口
—> blur()：把鍵盤焦點從頂層窗口移開
—> moveBy()：可相對窗口的當前座標把它移動指定的像素
—> moveTo()：把窗口的左上角移動到一個指定的座標
—> resizeBy()：按照指定的像素調整窗口的大小
—> resizeTo()：把窗口大小調整到指定的寬高
—> scrollBy()：按照指定的像素來滾動內容
—> scrollTo()：把內容滾動到指定座標

Document對象與DOM
+ 概念：
1）每個載入瀏覽器的HTML文檔都會成爲Document對象。
①通過使用Document對象，可以從腳本中對HTML頁面中的所有元素進行訪問（操作文檔中的任何內容，都通過Document）。
②Document對象是window對象的一部分，可通過window.document方式對其進行訪問。
2）DOM：Document Object Model，文檔對象模型，HTML文檔中的所有節點組成了一個文檔樹（或節點樹）。
①樹起始於文檔節點，Document對象是一顆文檔樹的根。
②HTML文檔中的每個元素、屬性、文本等都代表這樹中的一個節點。
++ write(“str”) 直接向HTML輸出流寫內容；是eval的一種形式。eval要儘量避免，是出於安全考慮，因爲eval過於強大，把可string串當作代碼執行。若使用不好可千萬安全漏洞。

公有屬性：
—> nodeName：給定節點的名字(字符串，只讀);
—> nodeType：給定節點的類型(整數，只讀；元素 1 ；屬性 2；文本 3；註釋 8；文檔 9)
—> nodeValue：給定節點的當前值（元素的爲underfine或null；文本的是文本自身；屬性節點是屬性的值）
+ 根據元素ID查找節點
1）方法：document.getElementById(idValue)
2）忽略文檔的結構，通過指定的ID來返回元素節點。
3）可以查找整個HTML文檔中的任何HTML元素。
【注意：如果ID值錯誤，則返回null。】
+ 根據層次查找節點
1）遵循文檔的層次結構，查找單個節點：parentNode、firstChild、lastChild、parentNode、nestSibling(下一個子節點)、previousSibling(給定節點上一個子節點)
2）遵循文檔的層次結構，查找多個節點：
childNodes：以s結尾的都是數組，則有length屬性。
【注意：節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7】

如： var sObj=document.getElementById("sell");
        alert(sObj.childNodes.length);  sObj.firstChild;

• 根據標籤名稱查找節點

  1）getElementsByTagName(“namestr”)：在某個節點的所有後代裏查找某種類型的元素（根據指定的標籤名），並返回所有的元素（返回一個節點列表）。
  ①忽略文檔的結構，查找整個HTML文檔中的所有元素。
  ②如果標籤名錯誤，則返回長度爲0的節點列表。
  【注意：方法名爲getElements，故返回的是一個數組】
  2）length屬性：返回的是一個節點列表，是個數組，因此可用length屬性獲取元素個數。使用[index]可定位具體的元素。
  getElementsByName(“name”)：通過元素的name中的內容來查找 ，返回一個數組；

• 讀取節點信息
  1）規則一：將HTML標籤對象化，操作前先明確被對象化的標籤都有什麼屬性。
  如：aObj代表一個元素，有aObj.href屬性，但沒有aObj.value和aObj.src
  2）規則二：innerHTML：設置或獲取位於對象起始和結束標籤內的內容。
  如：aObj.innerHTML可修改元素標籤中的“元素”兩字
  【注意：單標籤無法用innerHTML修改內容。】
  3）規則三：nodeName：得到某個元素節點和屬性節點（即可得到標籤或屬性名稱）及其類型位置。xxx.nodeName：當未知節點類型時，使用該屬性獲得節點的名稱，全大寫方式。
  如：if(xxx.nodeName == “IMG”) xxx.src = “http://…”;
  4）節點屬性：getAttribute(“attrName”)方法：根據屬性名稱獲取屬性的值。
  用於將HTML標籤、屬性、CSS樣式都對象化。
  setAttribute(name,value):設置屬性值；若不存在具有指定名稱的屬性，該方法將創建一個新屬性。
• 修改節點信息
  1）style屬性：語法：node.style.color; node.style.fontSize
  【注意：CSS樣式中屬性名內有“-”的，這裏省略，並把後面單詞首字母大寫！
  ;屬性值要加上引號】
  2）className屬性：語法：var Obj=document.getElementById(“p1”);
  如：Obj.classname=”樣式類名稱”;//可用於設置不同的樣式。
• 查找並修改節點信息
  1）使用getElementById()方法找到元素節點。
  2）修改元素內容：innerHTML
  3）修改樣式：style屬性或className屬性
  4）修改屬性：html屬性
• 增加新節點
  1）步驟：
  ① 創建一個新元素，document.createElement(“elementName”);比如：元素名可爲a/input/option等；返回新創建的節點。
  ② 爲新元素設置相關的數據。如：

var newNode=document.createElement("input");
newNode.type="text"; newNode.value="mary";
newNode.style.color="red";

③ 把新節點加入樹上（新元素加入文檔），作爲樹上某個節點的子節點存在。

xxx.appendChild(newNode);//追加
xxx.insertBefore(newNode,oldNode);//新節點放在舊節點之前

• 刪除節點
  1）語法：parentNode.removeChild(childNode);
  【注意：一定是從父節點刪除子節點，不能直接刪除子節點。】
  其他：
  createTextNode()：創建一個包含給定文本的新文本節點
  replaceChild()：把一個給定父元素的一個子節點替換爲另一個節點

博客地址：Web基礎之JavaScript（二）