Javascript的組成部分

一、DOM（Document Object Model）：文本對象模型

//通過標簽名獲取DOM對象。返回的是一個集合，需通過具體下標獲取某個具體的DOM對象。
var oDiv=document.getElementsByTagName("div");
//通過ID獲取DOM對象。
var oBox=document.getElementById("box");
//通過className來獲取DOM對象，返回的是一個集合，需通過具體下標獲取某個具體的DOM對象。
var oBox=document.getElementsClassName("box");

1.節點Node

• children：非標準屬性，返回指定元素的所有子元素，是一個HTＭLCollection。

  var o=oDiv.children;

• childNodes：標準屬性，返回指定元素的所有子元素和文本節點，是一個NodeList。（折行就有一個文本節點）

  var oo=oDiv.childNodes;//IE6,7,8會出現異常（無閉合，返回text；<a>返回路徑。）

• 節點屬性
  (1)節點類型nodeType：console.log(oo[0].nodeType);//返回值：元素節點--1；屬性節點--2；文本節點--3；
  (2)節點名稱nodeName：console.log(oo[0].nodeName);//即標簽名稱，文本節點為#text。
  (3)節點內容nodeValue：console.log(oo[0].nodeValue);//node實際上是指針，其本身無值，故該屬性的返回值始終為null。

• 獲取節點
  (1)獲取所有節點

  var allNode=document.getElementsByTagName("*");

  (2)獲取父元素

  oLi.parentNode.style.background="red";
  oDiv.offsetParent;//獲取定過位的父元素，若沒有則返回body。

  (3)獲取第一個孩子

  oUl.firstChild;//適用IE6,7,8
  oUl.firstElementChild;//適用標準瀏覽器，IE6,7,8不兼容。
  //兼容處理：
  var first=obj.firstChild ? obj.firstChild : obj.firstElementChild ;

  (4)獲取最后一個孩子

  oUl.lastChild;
  oUl.lastElementChild;
  //兼容性及兼容處理同上。

  (5)獲取兄弟節點

  oLi.nextSibling;
  oLi.nextElementSibling;
  oLi.previousSibling;
  oLi.previousElementSibling;

• 操作節點
  (1) 添加子節點 appendChild

  var li=document.createElement("li");//創建子節點
  oUl.appendChild(li);//往父元素追加子節點（同一節點只能添加一次）
  var text=document.createTextNode("xxx");//創建文本節點
  li.appendChild(text);//將文本節點追加到元素中。
  //li.innerHTML="xxx";
  //li.nodeValue;//錯誤。
  //li.childNodes[0].nodeValue;//正確，有返回值。
  li.childNode[0].nodeValue="<p></p>";//不能識別標簽，innerHTNML能夠識別標簽。

  (2) 插入節點 insertBefore

  父元素.insertBefore(newNode,someNode);//someNode表示插入節點的參考位置。
  如果插入一個已有的子元素，會先刪除自己原來的，然后插入到指定位置。（appendChild也一樣。）

  (3) 刪除節點 removeChild

  父元素.removeChild(要刪除的子節點);//返回被刪除的節點。

  (4) 替換節點 replaceChild

  父元素.replaceChild(newNode,被替換的節點);

  (5) 復制節點（克隆節點）cloneNode

  被克隆節點.cloneNode(false/true);//false:淺復制（只復制標簽）；true:深復制（整個結構都被復制，包括標簽里的內容）。

2.表格Table

tab.tBodies[0].rows[0].cells[0];
tab.tHead.rows[0].cells[0];
tab.tFood.rows[0].cells[0];

3.表單From

• 表單獲取元素
  name可以標識一個元素：from1.nameValue.屬性。

• 表單提交/重置事件

  from1.onsubmit/onreset=function(){
     //return true;//提交（默認值）
     //return false;//不提交
  }

• 表單改變事件

  from1.onchange=function(){}

• 表單獲取/失去焦點事件

  form1.text.onfocus/onblur=function(){}

• 表單方法

  from1.submit();
  from1.reset();

二、BOM（Browser Object Model）：瀏覽器對象模型

用于訪問瀏覽器對象，沒有規范。其核心是window（窗口）。

1.對話框與窗口

• 對話框

  alert("輸入錯誤");//提示對話框 
  confirm("是否關閉");//帶"確定"、"取消"按鈕的對話框 點擊"確認"返回true,點擊"取消"返回false。
  prompt("請輸入一個數字",0);//帶輸入框的對話框，返回輸入的數據。

• print();//打印（快捷鍵：ctrl+P）

  <button onclick="print()">打印</button>

• find(str);//查找（快捷鍵：ctrl+F）//按回車鍵繼續查找下一個

  <button onclick="find('abc')">查找</button>
  <p>abcdefghijklmn</p>

  btn.onclick=function(){
     var p=prompt("請輸入要查找的內容");
     find(p);
  }

• 打開窗口
  open(打開窗口URL，打開方式，打開窗口的樣式，新窗口是否取代瀏覽器記錄中當前加載的頁面);打開方式默認值為_blank。

  window.open ("http://www.baidu.com","_blank/_self", "width:100px;height:100px;",true/false);//window.可去掉，但在行間就不能去掉。如：
  <button onclick="window.open('http://www.baidu.com')">
  
  var iNew=window.open("about:blank","_blank");//打開一個空白的頁面
  iNew.document.write("abc");
  
  open("1.rar");//如果不能以窗口方式打開的會運行下載。

• 關閉窗口 close();

• window.location; //當前窗口的路徑（讀）
  window.location="http://www.baidu.com";//（寫）可利用為刷新。

2.相關屬性

document.body.scrollTop;//滾動條滑動的距離。
document.body.scrollLeft;//火狐、IE不兼容,取值都為0。

document.documentElement.scrollTop;
document.documentElement.scrollLeft;//火狐、IE適用，但谷歌不兼容。

//兼容處理：
var sTop=document.body.scrollTop==0？document.documentElement.scrollTop:document.body.scrollTop;

box[0].scrollHeight;//滾動條可滑動的高度，即元素的可視高，包括padding，不包括margin、border;
box[0].scrollWidth;//滾動條可滑動的寬度，即元素的可視高，包括padding，不包括margin、border;

oDiv.offsetWidth;//div的占位寬，包括padding，border。
oDiv.offsetHeight;
oDiv.offsetTop;//距頁面頂部的距離，若父元素定位，則是與父元素的距離。
oDiv.offsetLeft;

oDiv.clientWidth;//div的可視寬，包括padding。
oDiv.clientHeight;
oDiv.clientTop;//div的上邊寬border-top。
oDiv.clientLeft;//div的左邊寬border-left。

window.onscroll=function(){};
window.onresize=function(){};

document.documentElement.clientHeight;//窗口可視高