javaScript中的物件、BOM、DOM知識點總結
一、 什麼是javaScript物件？
物件是javaScript中最重要的API。
javaScript包含多種物件有：內建物件、外部物件（window物件、dom物件）、自定義物件。
二、 如何使用物件？
物件包含屬性和方法。
訪問物件屬性：物件.屬性
訪問物件方法：物件.方法（）
三、 常用內建物件
JS中常用內建物件有：String物件、Number物件、Boolean物件、Array物件、Math物件、Date物件、RegExp物件、Function物件。
1. String物件
（1）建立String物件有兩種方式：
var str1=”hello word”;
var str2=new String(“hello word”);
（2）String物件的屬性：
str.length;
（3）String物件的常用方法
##大小寫轉換方法
str1.toLowerCase()、str1.toUpperCase()
##獲取指定字元
srt1.charAt(index):返回指定位置的字元
str1.charCodeAt(index)：返回指定位置字元的Unicode編碼。（index表示字元位置）
##查詢指定字串
str1.indexOf(findstr,[index])、str1.lastIndexOf(findstr,[index])
PS:findstr表示要查詢的字串，lastIndexOf表示從最後開始找起，如果沒有找到則返回-1.
##獲取子字串(含頭不含尾，下標均是從0開始)
str1.substring(start,[end])
##替換子字串
str1.replace(findstr,tostr)
PS:findstr為要找的子字元換，tostr替換為的字串，返回替換後的字串。
##拆分子字串
Str1.split(bystr,[howmany])
PS:bystr分割用的字串，howmany指定返回的陣列的最大長度，可以省略，返回分割後的字串。
注意：字串是不可變的，一些可以修改的字串的API，實際上是返回一個新的字串，並不改變原始字串.
2.Number物件
（1）Number是數值物件，建立Number物件如下：var a=1.1;
（2）Number物件的常用方法
##toFixed(num):轉換為字串，並保留小數點後一定位數。如果必要該數字可以被捨棄，也可以用0補足。
3.Array物件
##JS中的陣列均是Object，如var a1=[1,25,"男朋友",true];
陣列的長度是可變的。
##JS中的陣列可以像集合一樣操作
var a2=new Array();
a2.push(8);
a2.push(false);
console.log(a2[2]);
##訪問陣列元素console.log（a1[0]）
##陣列中元素倒轉：a1.reverse();
##陣列排序*重點*：a1.sort();預設按照字串的Unicode編碼排序,可以通過替換比較方法影響排序結果。(一般比較方法無需複用，採用匿名方法)
舉例如下：
a1.sort(Function(a,b){
return a-b;
});
Console.log(a1);
4.Math物件
Math物件用於執行數學任務，無需建立，直接使用即可。如下所示：
console.log(Math.PI);console.log(Math.E);
console.log(Math.round(Math.PI));
PS：Math.round（）表示為取整。
5.Date物件
Date物件用於處理日期和時間，封裝了系統時間毫秒數。
##建立Date物件(Date物件會自動把當前的日期和時間儲存為初始值)
Datedate1=new Date();
Datedate2=new Date(“2015/1/1 1:12:11”);
##Date物件常用方法
讀寫時間毫秒數：date1.getTime()、date1.setTime(毫秒)
讀寫時間分量：
date1.getDate()、date1.getDay()、date1.getFullYear()等。
date1.setDate()、date1.setDay()、date1.setFullYear()等。
轉化為字串：
toString()、toLocaleTimeString()、toLocaleDateString()
6.RegExp物件
RegExp物件表示正則表示式,作用也就是用來檢查字串。
##建立RegExp物件
VarrgExp=new RegExp(“pattern”,[“flags”]);
VarrgExp=/pattern/flags;
PS:flags的標識有兩種
（1） g:設定當前匹配為全域性模式。
（2） i:忽略匹配中的大小寫檢測。
注意：全域性模式（第N次呼叫則找出第N個匹配的部分），非全域性模式（找出首次匹配的部分）。
##RegExp物件的常用方法
RegExpObject.test(string)*重點*
如果字串string中含有與RegExpObject匹配的文字，則返回true,否則返回false.
reg.exec(str):檢測字串中指定的值，返回指定的值。
reg.test(str):檢測字串中指定的值，返回false或true.
##String物件與正則表示式（regexp代表正則表示式或字串）
--x.replace(regexp,tostr),返回替換後的結果。
--x.match(regexp)，返回匹配字串的陣列。
--x.search(regexp)，返回匹配字串的首字元位置索引。
7.Function物件
JS中的函式就是Function物件。
函式名就是指向Function物件的引用，使用函式名可以訪問函式物件，函式名（）是呼叫函式。
##定義函式物件
函式的返回值預設為undefined,也可以使用return返回具體的值。
##函式的引數
JS的函式沒有過載。
呼叫時只要函式名一樣，無論傳入多少個引數，呼叫的都是同一個函式。
沒有接收到實參的引數值是undefined.
所有的引數傳遞給arguments陣列物件。
##arguments物件*重點*..
Arguments是一種特殊的物件，在函式程式碼中，表示函式的引數陣列。
在函式程式碼中，可以使用arguments訪問所有引數。
arguments.length:函式的引數個數
arguments[i]:第i個引數
可以利用arguments實現可變引數的函式。
##eval函式*重點*
eval函式用於計算表示式字串，或者用於執行字串中的javascript程式碼。
只接受原始字串作為引數。
如果函式中沒有合法的表示式或語句，則丟擲異常。
小案例
1.登入頁面的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入頁面</title>
<style>
.ok {
color:green;
border:1px solid green;
}
.error {
color:red;
border:1px solid red;
}
</style>
<script>
//校驗賬號的格式
function check_code() {
console.log(1);
//獲取賬號
var code=document.getElementById("code").value;
//校驗其格式（\w 字母或數字或下劃線）
var span=document.getElementById("code_msg");
var reg=/^\w{6,10}$/;
if(reg.test(code)){
//通過，增加OK樣式
span.className="ok";
return true;
}else{
//不通過，增加error樣式
span.className="error";
return false;
}
}
</script>
<script>
//校驗密碼
function check_pass() {
//獲取密碼
var pass=document.getElementById("pass").value;
//校驗
var span=document.getElementById("pass_msg");
var reg=/^\w{8,20}$/;
if(reg.test(pass)){
//通過，增加OK樣式
span.className="ok";
return true;
}else{
//沒通過，增加error樣式
span.className="error";
return false;
}
}
</script>
</head>
<body>
<!--check_code() && check_pass()，中的與&&會發生短路，為防止短路，可以利用一個boolean值中的true值為1，false值為0進行改進-->
<form action="http://www.tmooc.cn" onsubmit="return check_code()+check_pass()==2;">
<p>
賬號：
<input type="text" id="code"
onblur="check_code();"/>
<span id="code_msg">6-10位字母、數字、下劃線</span>
</p>
<p>
密碼：
<input type="password" id="pass"
onblur="check_pass();"/>
<span id="pass_msg">8-20位字母、數字、下劃線</span>
</p>
<p><input type="submit" value="登入"/></p>
</form>
</body>
</html>
補充：onsubmit，表單提交事件，是form的事件，當點選表單內的submit按鈕時觸發，在該事件內返回true,則提交成功，預設就是返回true,若返回false,則不提交。
網頁效果顯示：
2.計算器程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計算器</title>
<script>
function cal() {
//獲取文字框
var input=document.getElementById("num");
//獲取span
var span=document.getElementById("jg");
//獲取框內的算式
var ss=input.value;
try {
var result=eval(ss);
//計算成功，將結果寫入文字框input
span.innerHTML=result;
}catch(e) {
//出錯時給予提示
span.innerHTML="Error";
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="=" onclick="cal();"/>
<span id="jg"></span>
</body>
</html>
網頁效果顯示：
四、 外部物件
瀏覽器提供的物件，瀏覽器的API，用來操作瀏覽器。
1.BOM(Browser Object Model)：
#瀏覽器物件模型，用來訪問和操縱瀏覽器視窗，使JAVAScript有能力與瀏覽器“對話”。（瀏覽器與JS是兩個不相關的內容，JS依附於瀏覽器上）
#通過使用BOM，可移動視窗、更改狀態列文字，執行其他不與頁面內容發生直接聯絡的操作。
2.DOM（Document Object Model）:
#文件物件模型，用來操作文件。定義了訪問和操作HTML文件的標準方法。
#應用程式通過對DOM樹的操作，來實現對HTML文件資料的操作。
BOM與DOM關係如下圖示：
PS:window代表瀏覽器，它的子物件（屬性）代表瀏覽器的不同部位。
外部物件分為兩個部分BOM與DOM，其中BOM包含DOM.
3.window物件（BOM）
window表示瀏覽器視窗，所有JAVAScript全域性物件、函式以及變數均自動成為window物件的成員。
##常用屬性：
#history:瀏覽過視窗的歷史記錄物件。
history物件包含使用者（在瀏覽器視窗中）訪問過的URL，常用方法：
--back()
--forward()
--go(num):num可以取正數或者負數，正數表示前進，負數表示後退。
#location:視窗檔案地址物件。
location物件常用於獲取和改變當前瀏覽器的網址。
href:當前視窗正在瀏覽器的網頁地址,也可以用於修改網址。
--reload():重新載入當前網址，就像按下重新整理按鈕。
PS：location與超連結都可以改變當前視窗，兩者的區別是---location改變當前視窗時可以新增條件，比如可以在頁面上顯示“您確定要離開此頁面嗎？”，而超連結不能新增條件，不靈活，一般建議採用location。
顯示小程式碼：
functiontarena() {
var b=confirm("您確定要離開此頁面嗎？");
if(b){
//確認為true時，跳轉。
//location=位址列
//修改href就是修改網址。
location.href="http://www.tmooc.cn";
}
}
#screen:當前螢幕物件。
screen物件包含有關客戶端顯示螢幕（比如說ipad、膝上型電腦、手機）的資訊，常用於獲取螢幕的解析度和色彩，常用屬性：
--width/height
--availWidth/availHeight
#navigator：瀏覽器相關資訊。
常用於獲取客戶端瀏覽器和作業系統資訊。
Navigator.userAgent;
##常用方法：
(1)alter(str),提示對話方塊，顯示str字串的內容。
(2)confirm()，確認對話方塊，顯示str字串的內容，按確定按鈕返回true，其他操作返回false.
(3)定時器*重點*
多用於網頁動態時鐘、製作倒計時、跑馬燈效果等。分為兩種：
#週期性定時器：以一定的間隔執行程式碼，迴圈往復。
setInterval(exp,time)：週期性觸發程式碼exp.返回已經啟動的定時器物件。
exp為執行語句，time為時間週期，單位為毫秒。
clearInterval(tID)：停止啟動的定時器。
tID：啟動的定時器物件。
小案例：動態時鐘程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動態時鐘</title>
<style>
#clock {
width:150px;
border:1px solid red;
line-height:30px;
height:30px;
font-size:20px;
text-align:center;
}
</style>
<script>
//id為空時表示未啟動。
var id=null;
function ks(){
//若id非空，表示已啟動，不要再次啟動了
if(id){
return;
}
id=setInterval(function(){
var date=new Date();
var now=date.toLocaleTimeString();
var p=document.getElementById("clock");
p.innerHTML=now;
},1000);
}
function zt(){
clearInterval(id);
//將id重置為null,便於下次啟動時做判斷
id=null;
}
</script>
</head>
<body>
<p>
<input type="button" value="開始" onclick="ks();">
<input type="button" value="暫停" onclick="zt();">
</p>
<p id="clock"></p>
</body>
</html>
網頁顯示如下圖：
#一次性定時器：在一個設定的時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。
setTimeout(exp,time):一次性觸發程式碼exp.返回已經啟動的定時器。
exp為執行語句，time為時間間隔，單位為毫秒。
clearTimeout(tID)：停止啟動的定時器。
小案例：傳送訊息程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>傳送訊息</title>
<style>
#msg {
width:150px;
height:30px;
line-height:30px;
border:1px solid red;
font-size:20px;
text-align:center;
}
</style>
<script>
//預設id為null
var id=null;
function fs() {
var p=document.getElementById("msg");
p.innerHTML="正在傳送...";
//啟動定時器後id非空
id=setTimeout(function(){
p.innerHTML="傳送成功";
//傳送成功是id為null
id=null;
},3000);
}
function cx(){
//id非空時表示已啟動定時器但未完成，只有此時才能停止定時器。
if(id){
var p=document.getElementById("msg");
p.innerHTML="已撤銷";
clearTimeout(id);
}
}
</script>
</head>
<body>
<p>
<input type="button" value="傳送" onclick="fs();"/>
<input type="button" value="撤銷" onclick="cx();"/>
</p>
<p id="msg"></p>
</body>
</html>
網頁顯示如下圖：
4.document物件
4.1 DOM(文件物件模型)
當網頁被載入時，瀏覽器會建立頁面的文件物件模型。
DOM節點樹（DOM模型被構造為物件的樹，這棵樹的根就是document物件）
#DOM操作：查詢節點、讀取節點資訊、修改節點資訊、建立新節點、刪除節點。
4.2 讀取、修改
##讀取節點的名稱和型別
#nodeName:節點名稱
--元素節點和屬性節點：標籤或屬性名稱。
--文字節點：永遠是#text.
--文件節點：永遠是#document
#nodeType:節點型別（返回數值）
元素節點返回1，屬性節點返回2，文字節點返回3，註釋節點返回8，文件節點返回9.
##讀寫節點的內容（<x>這就是內容</x>),雙標籤中間的文字。
#innerHTML：設定或獲取位於物件起始和結束標籤內的HTML（帶標籤）。
#innerText:設定或獲取位於物件起始和結束標籤內的文字（不帶標籤）。
##讀寫節點的屬性
#通用API,任何版本瀏覽器都支援
getAttribute()方法：根據屬性名稱獲取屬性的值。
setAttribute(),removeAttribute().
#新的API，低版本的瀏覽器不支援（只要增和改）
節點.屬性名（class例外，需要寫className）
小案例：圖片輪播程式碼演示如下
PS：凡是在funciton外的方法，讀取時均是按照順序讀取。
4.3查詢
##通過id查詢（標準）
document.getElementById()，通過制定的ID來返回元素節點，忽略文件的結構，如果ID錯誤，則返回null。
##根據標籤名查詢（標準）
#在整個頁面上根據標籤名查詢節點。
document.getElementsByTagName(“li”),
#在某節點下根據標籤名查詢其子節點。
ul. getElementsByTagName(“li”),
PS:”li”為要查詢的子節點。
##根據name查詢（標準）
document.getElementsByName().
##根據class查詢某節點（非標準）
getElementsByClassName(),
##根據層次（關係）查詢
#查詢父親（標準）
parentNode
#查詢孩子（標準）
childNodes.
getElementsByTagName(“li”)，建議使用此根據標籤名查詢孩子的方法。
#查詢孩子（非標準）
children.
#查詢兄弟（標準）
//某節點.父親.孩子[n]
jd.parentNode. getElementsByTagName(“li”)[1];
#查詢兄弟（非標準）
jd.previousElementSibling;
jd.nextElementSibling;
4.4增刪節點
##建立節點
document.createElement(“li”);
li為要建立的元素標籤名稱，返回新建立的節點。
##增加節點
#追加到所有子節點之後
parentNode.appendChild(newNode);新節點作為父節點的最後一個子節點新增。
#插入到某子節點之前
parentNode.insertBefore(newNode,refNode);refNode為參考節點，新節點位於此節點之前新增。
##刪除節點
#父親刪孩子
node.removeChild(childNode);node為childNode的父節點。
#自己刪自己（非標準）
（1）sz.parentNode.removeChild("sz");
（2）var tj=document.getElementById("tj");
tj.remove();
小案例：聯動選單程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聯動選單</title>
</head>
<body>
省：
<select id="province" onchange="chg();">
<option value="-1">請選擇</option>
<option value="0">河北省</option>
<option value="1">山東省</option>
<option value="2">山西省</option>
</select>
市：
<select id="city">
<option>請選擇</option>
</select>
<script>
//模擬載入城市
function loadCities() {
return [
["石家莊","廊坊","保定"],
["濟南","青島","德州"],
["太原","大同","陽泉"]
];
}
var cities=loadCities();
function chg() {
//獲取省份的下拉選
var sel1=document.getElementById("province");
//獲取省份的序號
var pindex=sel1.value;
//獲取該省份對應的城市
var pcities=cities[pindex];
//先刪除城市下拉選內所有的城市
var sel2=document.getElementById("city");
//
//sel2.innerHTML="<option>請選擇</option>";
var options=sel2.getElementsByTagName("option");
for(var i=options.length-1;i;i--){
sel2.removeChild(options[i]);
}
//再增加該省份的城市。
if(pcities){
for(var i=0;i<pcities.length;i++){
var opn=document.createElement("option");
opn.innerHTML=pcities[i];
sel2.appendChild(opn);
}
}
}
</script>
</body>
</html>
網頁顯示效果如下：
五、自定義物件
自定義物件是一種特殊的資料型別，由屬性和方法封裝而成。
---屬性指與物件有關的值:物件名.屬性名。
---方法指物件可以執行的行為或者可以完成的功能：物件名.方法名（）
1.建立自定義物件
（1）採用直接量（JSON"JavaScript Object Notation"是一種輕量級的資料交換格式）的方式建立自定義物件
名稱需要使用“”引起來，多對定義之間使用，隔開，名稱可以是屬性。
function f1() {
var stu= {"name":"zs","age":25,"work":function(){alert("我學Java")}};
alert(stu.name);
alert(stu.age);
//work的function方法無返回值，則不需要加alert。
stu.work();
}
（2）採用構造器建立物件
##採用自定義構造器建立物件（自定義了一個構造器Coder，然後每次寫時都可以呼叫Coder構造器）
function f3() {
var c=new Coder("lisi",26,function(){alert("我寫Java")});
alert(c.name);
alert(c.age);
c.work();
}
function Coder(name,age,work) {
//this=創建出來的物件
//this.name給該物件宣告一個屬性
this.name=name;
this.age=age;
this.work=work;
}
六、事件
1.事件概述
事件：指頁面元素狀態改變，使用者在操作滑鼠或者鍵盤時觸發的動作。分為滑鼠事件、鍵盤事件、狀態改變事件。
event物件：事件觸發後將會產生一個event物件。
事件屬性：通過一個事件屬性，可以在某個事件發生時對某個元素進行某種操作。
2.事件定義
（1）直接定義事件：在html屬性定義中直接處理事件。
<input type="button" value="小蘋果" onclick="alert('小蘋果 ');"/>
（2）後繫結事件//：在頁面載入後執行，寫在<body>的整個頁面後。（過度的，僅需要了解）
（3）後繫結事件（onload）:onload是網頁載入事件，在網頁載入後自動觸發。
為了便於格式的完美性，該段程式碼,放在<head>中的<script>標籤中。
window.onload=function() {
//在這裡寫的程式碼相當於在body後一樣
var c=document.getElementById("c");
c.onclick=function() {
alert("小姑娘");
}
}
（4）取消事件
e.stopPropagation()
e.cancelBubbule=true;
e={"stopPropagation":function(){}}
e.stopPropagation()/e.stopPropagation
物件的方法可以看做方法的屬性
if(e.stopPropagation){
//如果寫成e.stopPropagation(),則沒有的話會報錯，不帶括號的屬性沒有的話不會報錯。
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}
3.event物件
##任何事件出發後都將產生一個event物件，event物件記錄事件發生時的滑鼠位置、鍵盤按鍵狀態、觸發物件等資訊。
##獲得event物件，使用event物件獲得相關資訊，如單擊位置、觸發物件等。
##常用屬性：clientX,clientY,cancleBubble
##獲取event物件，
在事件定義時，使用event關鍵字將事件物件作為引數傳入方法。
<input type="button" value="DDD" onclick="d(event);"/>
<input type="button" value="EEE" id="e"/>
window.onload=function() {
var ee=document.getElementById("e");
ee.onclick=function(e) {
//後繫結事件時，瀏覽器會自動傳入event，
//且該物件存在arguments第0個位置。
console.log(arguments[0]);
console.log(e);
}
}
function d(e) {
console.log(e);
alert(e.clientX+","+e.clientY);
}
4.事件處理機制
（1）JS事件處理機制是：冒泡機制（JS的事件是由內向外觸發的，觸發到最外層為止）
（2）作用：不需要再子元素上定義N次事件，只需要在父元素上定義一次事件。
PS：在採用冒泡機制簡化事件時，必須知道事件源（事件發生的源頭“具體位置”），事件源可以通過事件物件獲取。
案例：計算器程式碼如下
<!DOCTYPE html>
<html>
<head>
<title>計算器</title>
<meta charset="utf-8" />
<style type="text/css">
.panel {
border: 4px solid #ddd;
width: 192px;
margin: 100px auto;
/*border-radius: 6px;*/
}
.panel p, .panel input {
font-family: "微軟雅黑";
font-size: 20px;
margin: 4px;
float: left;
/*border-radius: 4px;*/
}
.panel p {
width: 122px;
height: 26px;
border: 1px solid #ddd;
padding: 6px;
overflow: hidden;
}
.panel input {
width: 40px;
height: 40px;
border:1px solid #ddd;
}
</style>
<script>
window.onload=function() {
var div=document.getElementById("panel");
div.onclick=function(e) {
//console.log(e.srcElement||e.target);
cal(e);
}
}
function cal(e) {
//獲取事件源
var obj=e.srcElement||e.target;
//只處理按鈕（INPUT）
if(obj.nodeName!="INPUT"){
return;
}
//判斷按鈕型別
var p=document.getElementById("screen");
if(obj.value=="C") {
//清空
p.innerHTML="";
}else if(obj.value=="="){
//計算
try {
var result=eval(p.innerHTML);
p.innerHTML=result;
}catch(ex){
p.innerHTML="Error";
}
}else {
//累加 舊的值 新的值
p.innerHTML=p.innerHTML+obj.value;
}
}
</script>
</head>
<body>
<div class="panel" id="panel">
<div>
<p id="screen"></p>
<input type="button" value="C">
<div style="clear:both"></div>
</div>
<div >
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="-">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="+">
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
頁面顯示效果：
