Javascript的組成部分

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

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

1.節(jié)點(diǎn)Node

• children：非標(biāo)準(zhǔn)屬性，返回指定元素的所有子元素，是一個(gè)HTＭLCollection。

  var o=oDiv.children;

• childNodes：標(biāo)準(zhǔn)屬性，返回指定元素的所有子元素和文本節(jié)點(diǎn)，是一個(gè)NodeList。（折行就有一個(gè)文本節(jié)點(diǎn)）

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

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

• 獲取節(jié)點(diǎn)
  (1)獲取所有節(jié)點(diǎn)

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

  (2)獲取父元素

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

  (3)獲取第一個(gè)孩子

  oUl.firstChild;//適用IE6,7,8
  oUl.firstElementChild;//適用標(biāo)準(zhǔn)瀏覽器，IE6,7,8不兼容。
  //兼容處理：
  var first=obj.firstChild ? obj.firstChild : obj.firstElementChild ;

  (4)獲取最后一個(gè)孩子

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

  (5)獲取兄弟節(jié)點(diǎn)

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

• 操作節(jié)點(diǎn)
  (1) 添加子節(jié)點(diǎn) appendChild

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

  (2) 插入節(jié)點(diǎn) insertBefore

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

  (3) 刪除節(jié)點(diǎn) removeChild

  父元素.removeChild(要?jiǎng)h除的子節(jié)點(diǎn));//返回被刪除的節(jié)點(diǎn)。

  (4) 替換節(jié)點(diǎn) replaceChild

  父元素.replaceChild(newNode,被替換的節(jié)點(diǎn));

  (5) 復(fù)制節(jié)點(diǎn)（克隆節(jié)點(diǎn)）cloneNode

  被克隆節(jié)點(diǎn).cloneNode(false/true);//false:淺復(fù)制（只復(fù)制標(biāo)簽）；true:深復(fù)制（整個(gè)結(jié)構(gòu)都被復(fù)制，包括標(biāo)簽里的內(nèi)容）。

2.表格Table

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

3.表單From

• 表單獲取元素
  name可以標(biāo)識一個(gè)元素：from1.nameValue.屬性。

• 表單提交/重置事件

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

• 表單改變事件

  from1.onchange=function(){}

• 表單獲取/失去焦點(diǎn)事件

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

• 表單方法

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

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

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

1.對話框與窗口

• 對話框

  alert("輸入錯(cuò)誤");//提示對話框 
  confirm("是否關(guān)閉");//帶"確定"、"取消"按鈕的對話框 點(diǎn)擊"確認(rèn)"返回true,點(diǎn)擊"取消"返回false。
  prompt("請輸入一個(gè)數(shù)字",0);//帶輸入框的對話框，返回輸入的數(shù)據(jù)。

• print();//打?。旖萱I：ctrl+P）

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

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

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

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

• 打開窗口
  open(打開窗口URL，打開方式，打開窗口的樣式，新窗口是否取代瀏覽器記錄中當(dāng)前加載的頁面);打開方式默認(rèn)值為_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");//打開一個(gè)空白的頁面
  iNew.document.write("abc");
  
  open("1.rar");//如果不能以窗口方式打開的會運(yùn)行下載。

• 關(guān)閉窗口 close();

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

2.相關(guān)屬性

document.body.scrollTop;//滾動(dòng)條滑動(dòng)的距離。
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;//滾動(dòng)條可滑動(dòng)的高度，即元素的可視高，包括padding，不包括margin、border;
box[0].scrollWidth;//滾動(dòng)條可滑動(dòng)的寬度，即元素的可視高，包括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;//窗口可視高