通常，通過 JavaScript，您需要操作 HTML 元素。
1、通過 id 找到 HTML 元素
2、通過標簽名找到 HTML 元素
3、通過類名找到 HTML 元素
提示：通過類名查找 HTML 元素在 IE 5,6,7,8 中無效。
var x=document.getElementById("intro");
var y=document.getElementsByTagName("p");
①、改變 HTML 元素的內容 (innerHTML)
document.getElementById(id).innerHTML=new HTML
②、改變 HTML 屬性
document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";
③、改變 HTML 樣式
document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script>
④、添加 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");//創建新的<p> 元素
var node=document.createTextNode("這是一個新段落。");//創建文本節點,如果不再需要追加其他文本節點，也可以p1.innerHTML = "這是一個新段落。"
; para.appendChild(node);//向 <p> 元素追加這個文本節點 //向已有的元素追加這個新元素 var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>
④、刪除 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>
DOM 事件
1、Js中的事件
行為,結構,樣式分離的頁面
一般事件 onclick 鼠標點擊時觸發此事件
ondblclick 鼠標雙擊時觸發此事件
onmousedown 按下鼠標時觸發此事件
onmouseup 鼠標按下后松開鼠標時觸發此事件
onmouseover 當鼠標移動到某對象范圍的上方時觸發此事件
onmousemove 鼠標移動時觸發此事件
onmouseout 當鼠標離開某對象范圍時觸發此事件
onkeypress 當鍵盤上的某個鍵被按下並且釋放時觸發此事件.
onkeydown 當鍵盤上某個按鍵被按下時觸發此事件
onkeyup 當鍵盤上某個按鍵被按放開時觸發此事件
①、綁定事件的3種方式
1: 直接寫在html標簽內聲明
<div id="school" onclick="t();">
這種寫法最古老,兼容性最強.屬於DOM的lev0級的標准.這個效果,等同於在點擊div的時候,執行"t();"這一語句,
在全局范圍內執行,因此,t函數內部的this指代全局對象-->window 想操作被點擊的DOM對象,用this就不行了.
第2種綁定方式:
DOM對象.onclick = function () {}
這種綁定是把一個DOM對象onclick屬性賦值為一個函數,
因此,函數內部的this直接指向該DOM對象.
在這種綁定方式中,只能給一個事件,綁定一個處理函數
即 .onclick = fn1; .onclick = fn2;
最終的效果, 是.onclick = fn2;
如果用函數來調用其他函數的形式
例.onclick = function () {fn1(),fn2()}
那么此時， fn1,fn2中的this又指向window．
如何綁定多個函數， 並令this指向DOM對象
第三種綁定事件的方法:
DOM lev3的事件綁定標准
添加和去除監聽事件.
addEventListener('事件',函數); // 第一個參數事件參數, 沒有前綴"on", w3c的標准,IE不支持
注意點1: 如果添加了多個事件處理函數, 按"添加時的先后順序來執行"
注意占2: 事件處理函數中的this 指代 DOM節點自身 (w3c標准)
注意點3: 第一個事件參數,一律把事件名稱的'on'去掉 (w3c標准)
去除綁定
removeEventListener('事件',函數)
IE下綁定事件與解除事件的方法
attachEvent('事件',函數) // 注意: 事件 要加on
detachEvent('事件',函數) // 事件依然要加on
總結一下:
W3c addEventListener 與IE的attachEvent()的不同
1: 函數名不同
2: 事件名不同, IE下要加on,w3c不加on
3: 加事件后的執行順序不同, w3c按綁定事件的順序來執行, 而IE6,7,8,是后綁定的事件先發生.
4: this的指向, w3c中,綁定函數中的this指向 DOM對象, 而IE6,7,8中,指向window對象
三、事件的捕捉與冒泡模型
在w3c的模型中,
addEventListener 支持 第3個參數來聲明事件的模型為冒泡還是捕捉.
如果聲明為 true,則為捕捉方式
如果聲明為false, 或者不聲明, 則為冒泡方式
注意: IE的attchEvent 沒有第3個參數,不支持捕捉模型
事件對象的概念:
當事件對應的函數被觸發時, 函數會接收到一個事件參數, // w3c標准
例 xx.onclick = function (ev) {alert(ev)}
點擊后,ev 參數就代表單擊那一瞬間的"各個參數",以一個對象的方式傳過去.
對於IE, 當事件發生的瞬間,事件對象賦值給window.event屬性
四、事件的中斷
如何中斷事件的傳播???????
在w3c: 事件.stopPropagation();
在IE中, 事件對象.cancelBubble = true;
cancelBubble = true //IE取消冒泡
stopPropagation(); // w3c取消冒泡
returnValue = false; // IE取消事件效果
preventDefautl() ;// w3c取消事件效果
取消事件的默認效果
事件對象.preventDefault(); // 阻止事件的默認效果, w3c方法
事件對象.returnValue = false; // 設置returnValue 的屬性值為false;
五、Js 作用域鏈（是指AO鏈）
1:參數
2:局部變量聲明
3:函數聲明
* 函數聲明與函數表達式的區別
表達式必有返回值,把返回值(即匿名函數)賦給了一個變量.
此時 就是普通的賦值過程.
This, 與 arguments
當一個函數運行的時候,函數內部能引用的變量有這么幾種
AO、arguments、this
對於 arguments和this, 每個函數都有自己獨有的arguments和this, 且不進行鏈式查找
arguments是什么?
答:1:arguments是收到的實參副本
2:收到實參收集起來,放到一個arguments對象里
在詞法分析中, 首先按形參形成AO的屬性,值為undefined
當實參傳來時, 再修改AO的相應屬性.
t(a,b,c){},
調用時: t(1,2,3,4,5) 個參數
此時 , AO屬性只有a,bc,3個屬性, arguments里有1,3,3,4,5, 所有的值
對於超出形參個數之外的實參, 可以通過arguments來獲得
3:arguments 的索引 從 0, 1,2,....遞增,與實參逐個對應
4:arguments.length 屬性代表實參的個數
5:Arguments一定不是數組, 是長的比較像數組的一個對象,雖然也有length屬性
6:Arguments每個函數都會有,因此,arguemnts只會在內部找自身的arguments,
無法引用到外層的arguments
This是誰
This是指調用上下文
針對函數的應用場景來討論
函數的4種調用方式
1:函數方式
直接調用函數名,或函數表達式的返回值,
This指代全局對象,window
2:屬性方式(對象方法方式)
This指代該對象(方法的屬主)
3:構造器方式
通過 new 函數 名() , 來創建對象
在js里, 構造函數與對象的關系比較松散,
對象就是"屬性->值"的集合
構造器的作用,是制造一個對象,把this指向該對象,
4:call,apply方式
函數本身即是對象,對象就有方法
函數名.call(對象,參數1,參數2,參數3);
以fn.call(obj,'a','b');
實際效果相當於
1:fn內部的this指向了obj
2:fn('a','b');
Apply的效果與call一樣, 只不過傳參時,把所有參數包裝在數組里,傳過去.
例 fn.call(obj,'a',' b') ===> fn.apply(obj,['a','b']);
還有一種改變this的方法
With 語句
With(對象) {
語句1
語句2
.....
}
在with內部的語句,就把參數中的對象當成的上下文環境.
六、詞法分析
六、Js面向對象
屬性,方法-->對象
"類"能做到封裝,繼承,多態,
"類"的靜態方法
1: js中的對象是什么?
答:js的對象就是鍵值對的無序集合
2:種創建對象的方法
①、通過字面量來創建對象
例:{age:22,hei:180}
{}->空對象,沒有屬性
②、通過 new Object([value]);
通過構造函數來創建對象(和第2種沒區別,因為Object就是系統內建的構造函數)
七、Js面向對象中的封裝
對象的屬性外界是可讀可寫的, 如何來達到封裝的目的?
答:通過閉包+局部變量來完成
在構造函數內部聲明局部變量, 和普通方法,
因為作用域的關系,只有構造函數內的方法,才能訪問到局部變量.
而方法對於外界是開放的,因此可以通過方法來訪問局部變量.
在查找屬性或方法的過程中, 沿着原型鏈來查找屬性,
對象->原型->原型的原型....->空對象-->NULL
原型形成一條鏈
這個查找屬性的方式,稱為js的原型鏈
①、原型冒充的方式來完成繼承
復制繼承, 又稱對象繼承,其實就是復制父對象的屬性到子對象身上
八、Js面向對象中的靜態屬性或者靜態方法
從豆漿機-->制造豆漿的流程看, 豆漿機充當的是構造函數的角色.
如果單獨看豆漿機本身, 豆漿機也是一部機器,也是一個對象,也可以有屬性和方法.
那么,豆漿機作為對象時的屬性和方法,就相當於類的靜態屬性,靜態方法.
十、閉包
