通常，通過(guò) JavaScript铸敏，您需要操作 HTML 元素。

1悟泵、通過(guò) id 找到 HTML 元素

2杈笔、通過(guò)標(biāo)簽名找到 HTML 元素

3、通過(guò)類名找到 HTML 元素

提示：通過(guò)類名查找 HTML 元素在 IE 5,6,7,8 中無(wú)效糕非。

<pre style="box-sizing: border-box;
 outline: 0px; margin: 0px 0px 24px;
 padding: 8px; position: relative; 
font-family: Consolas, Inconsolata, Courier, monospace; 
white-space: pre-wrap; 
overflow-wrap: break-word; 
overflow-x: auto; font-size: 14px;
 line-height: 22px; 
color: rgb(0, 0, 0);
 font-style: normal;
 font-variant-ligatures: normal;
 font-variant-caps: normal; 
font-weight: 400;
 letter-spacing: normal; 
orphans: 2;
 text-align: start;
 text-indent: 0px;
 text-transform: none;
 widows: 2; 
word-spacing: 0px;
 -webkit-text-stroke-width: 0px;
 background-color: rgb(255, 255, 255); 
text-decoration-style: initial;
 text-decoration-color: initial;
">var x=document.getElementById("intro");
var y=document.getElementsByTagName("p");</pre>

①桩撮、改變 HTML 元素的內(nèi)容 (innerHTML)

<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">document.getElementById(id).innerHTML=new HTML</pre>

②、改變 HTML 屬性

<pre style="box-sizing: border-box;
 outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";</pre>

③峰弹、改變 HTML 樣式

<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script></pre>

④店量、添加或刪除 HTML 元素

二、DOM 事件

1鞠呈、Js中的事件

行為,結(jié)構(gòu),樣式分離的頁(yè)面

一般事件 onclick 鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)此事件

ondblclick 鼠標(biāo)雙擊時(shí)觸發(fā)此事件
onmousedown 按下鼠標(biāo)時(shí)觸發(fā)此事件
onmouseup 鼠標(biāo)按下后松開(kāi)鼠標(biāo)時(shí)觸發(fā)此事件
onmouseover 當(dāng)鼠標(biāo)移動(dòng)到某對(duì)象范圍的上方時(shí)觸發(fā)此事件
onmousemove 鼠標(biāo)移動(dòng)時(shí)觸發(fā)此事件
onmouseout 當(dāng)鼠標(biāo)離開(kāi)某對(duì)象范圍時(shí)觸發(fā)此事件
onkeypress 當(dāng)鍵盤上的某個(gè)鍵被按下并且釋放時(shí)觸發(fā)此事件.
onkeydown 當(dāng)鍵盤上某個(gè)按鍵被按下時(shí)觸發(fā)此事件
onkeyup 當(dāng)鍵盤上某個(gè)按鍵被按放開(kāi)時(shí)觸發(fā)此事件

①融师、綁定事件的3種方式

1: 直接寫在html標(biāo)簽內(nèi)聲明

<div id="school" onclick="t();">

這種寫法最古老,兼容性最強(qiáng).屬于DOM的lev0級(jí)的標(biāo)準(zhǔn).這個(gè)效果,等同于在點(diǎn)擊div的時(shí)候,執(zhí)行"t();"這一語(yǔ)句,

在全局范圍內(nèi)執(zhí)行,因此,t函數(shù)內(nèi)部的this指代全局對(duì)象-->window 想操作被點(diǎn)擊的DOM對(duì)象,用this就不行了.

第2種綁定方式:

DOM對(duì)象.onclick = function () {}

這種綁定是把一個(gè)DOM對(duì)象onclick屬性賦值為一個(gè)函數(shù),

因此,函數(shù)內(nèi)部的this直接指向該DOM對(duì)象.

在這種綁定方式中,只能給一個(gè)事件,綁定一個(gè)處理函數(shù)

即 .onclick = fn1; .onclick = fn2;

最終的效果, 是.onclick = fn2;

如果用函數(shù)來(lái)調(diào)用其他函數(shù)的形式

例.onclick = function () {fn1(),fn2()}

那么此時(shí)，　fn1,fn2中的this又指向window．

如何綁定多個(gè)函數(shù)蚁吝，　并令this指向DOM對(duì)象

第三種綁定事件的方法:

DOM lev3的事件綁定標(biāo)準(zhǔn)

添加和去除監(jiān)聽(tīng)事件.

addEventListener('事件',函數(shù)); // 第一個(gè)參數(shù)事件參數(shù), 沒(méi)有前綴"on", w3c的標(biāo)準(zhǔn),IE不支持

注意點(diǎn)1: 如果添加了多個(gè)事件處理函數(shù), 按"添加時(shí)的先后順序來(lái)執(zhí)行"

注意占2: 事件處理函數(shù)中的this 指代 DOM節(jié)點(diǎn)自身 (w3c標(biāo)準(zhǔn))

注意點(diǎn)3: 第一個(gè)事件參數(shù),一律把事件名稱的'on'去掉 (w3c標(biāo)準(zhǔn))

去除綁定

removeEventListener('事件',函數(shù))

IE下綁定事件與解除事件的方法

attachEvent('事件',函數(shù))   // 注意: 事件 要加on

detachEvent('事件',函數(shù)) // 事件依然要加on

總結(jié)一下:

W3c addEventListener 與IE的attachEvent()的不同

1: 函數(shù)名不同

2: 事件名不同, IE下要加on,w3c不加on

3: 加事件后的執(zhí)行順序不同, w3c按綁定事件的順序來(lái)執(zhí)行, 而IE6,7,8,是后綁定的事件先發(fā)生.

4: this的指向, w3c中,綁定函數(shù)中的this指向 DOM對(duì)象, 而IE6,7,8中,指向window對(duì)象

三旱爆、事件的捕捉與冒泡模型

在w3c的模型中,

addEventListener 支持 第3個(gè)參數(shù)來(lái)聲明事件的模型為冒泡還是捕捉.

如果聲明為 true,則為捕捉方式

如果聲明為false, 或者不聲明, 則為冒泡方式

注意: IE的attchEvent 沒(méi)有第3個(gè)參數(shù),不支持捕捉模型

事件對(duì)象的概念:

當(dāng)事件對(duì)應(yīng)的函數(shù)被觸發(fā)時(shí), 函數(shù)會(huì)接收到一個(gè)事件參數(shù), // w3c標(biāo)準(zhǔn)

例 xx.onclick = function (ev) {alert(ev)}

點(diǎn)擊后,ev 參數(shù)就代表單擊那一瞬間的"各個(gè)參數(shù)",以一個(gè)對(duì)象的方式傳過(guò)去.

對(duì)于IE, 當(dāng)事件發(fā)生的瞬間,事件對(duì)象賦值給window.event屬性

四、事件的中斷

如何中斷事件的傳播???????

在w3c: 事件.stopPropagation();

在IE中, 事件對(duì)象.cancelBubble = true;

cancelBubble = true //IE取消冒泡

stopPropagation(); // w3c取消冒泡

returnValue = false; // IE取消事件效果

preventDefautl() ;// w3c取消事件效果

取消事件的默認(rèn)效果

事件對(duì)象.preventDefault(); // 阻止事件的默認(rèn)效果, w3c方法

事件對(duì)象.returnValue = false; // 設(shè)置returnValue 的屬性值為false;

五窘茁、Js 作用域鏈（是指AO鏈）

1:參數(shù)

2:局部變量聲明

3:函數(shù)聲明

• 函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別

表達(dá)式必有返回值,把返回值(即匿名函數(shù))賦給了一個(gè)變量.

此時(shí) 就是普通的賦值過(guò)程.

①怀伦、js并不是一句一句順序執(zhí)行的,先進(jìn)行詞法分析

This, 與 arguments

當(dāng)一個(gè)函數(shù)運(yùn)行的時(shí)候,函數(shù)內(nèi)部能引用的變量有這么幾種

AO、arguments山林、this

對(duì)于 arguments和this, 每個(gè)函數(shù)都有自己獨(dú)有的arguments和this, 且不進(jìn)行鏈?zhǔn)讲檎?/p>

arguments是什么?

答:1:arguments是收到的實(shí)參副本

2:收到實(shí)參收集起來(lái),放到一個(gè)arguments對(duì)象里

在詞法分析中, 首先按形參形成AO的屬性,值為undefined

當(dāng)實(shí)參傳來(lái)時(shí), 再修改AO的相應(yīng)屬性.

t(a,b,c){},

調(diào)用時(shí): t(1,2,3,4,5) 個(gè)參數(shù)

此時(shí) , AO屬性只有a,bc,3個(gè)屬性, arguments里有1,3,3,4,5, 所有的值

對(duì)于超出形參個(gè)數(shù)之外的實(shí)參, 可以通過(guò)arguments來(lái)獲得

3:arguments 的索引 從 0, 1,2,....遞增,與實(shí)參逐個(gè)對(duì)應(yīng)

4:arguments.length 屬性代表實(shí)參的個(gè)數(shù)

5:Arguments一定不是數(shù)組, 是長(zhǎng)的比較像數(shù)組的一個(gè)對(duì)象,雖然也有l(wèi)ength屬性

6:Arguments每個(gè)函數(shù)都會(huì)有,因此,arguemnts只會(huì)在內(nèi)部找自身的arguments,

無(wú)法引用到外層的arguments

This是誰(shuí)

This是指調(diào)用上下文

針對(duì)函數(shù)的應(yīng)用場(chǎng)景來(lái)討論

函數(shù)的4種調(diào)用方式

1:函數(shù)方式

直接調(diào)用函數(shù)名,或函數(shù)表達(dá)式的返回值,

This指代全局對(duì)象,window

2:屬性方式(對(duì)象方法方式)

This指代該對(duì)象(方法的屬主)

3:構(gòu)造器方式

通過(guò) new 函數(shù) 名() , 來(lái)創(chuàng)建對(duì)象

在js里, 構(gòu)造函數(shù)與對(duì)象的關(guān)系比較松散,

對(duì)象就是"屬性->值"的集合

構(gòu)造器的作用,是制造一個(gè)對(duì)象,把this指向該對(duì)象,

4:call,apply方式

函數(shù)本身即是對(duì)象,對(duì)象就有方法

函數(shù)名.call(對(duì)象,參數(shù)1,參數(shù)2,參數(shù)3);

以fn.call(obj,'a','b');

實(shí)際效果相當(dāng)于

1:fn內(nèi)部的this指向了obj

2:fn('a','b');

Apply的效果與call一樣, 只不過(guò)傳參時(shí),把所有參數(shù)包裝在數(shù)組里,傳過(guò)去.

例 fn.call(obj,'a',' b') ===> fn.apply(obj,['a','b']);

還有一種改變this的方法

With 語(yǔ)句

With(對(duì)象) {

語(yǔ)句1

語(yǔ)句2

.....

}

在with內(nèi)部的語(yǔ)句,就把參數(shù)中的對(duì)象當(dāng)成的上下文環(huán)境.

六房待、詞法分析

js執(zhí)行順序

1:詞法分析階段

先把接收到的參數(shù)放到激活對(duì)象上

再對(duì)函數(shù)體中代碼作分析

a: var xx = yy;

做法:聲明一個(gè)xx屬性在激活對(duì)象上,

但不賦值,如果已經(jīng)有xx,則不無(wú)動(dòng)作.

b:function ttt() {

}

做法:直接聲明ttt屬性,

且內(nèi)容是函數(shù)體

2:執(zhí)行語(yǔ)句階段

六、Js面向?qū)ο?/p>

屬性,方法-->對(duì)象

"類"能做到封裝,繼承,多態(tài),

"類"的靜態(tài)方法

1: js中的對(duì)象是什么?

答:js的對(duì)象就是鍵值對(duì)的無(wú)序集合

2:種創(chuàng)建對(duì)象的方法

①驼抹、通過(guò)字面量來(lái)創(chuàng)建對(duì)象

例:{age:22,hei:180}

{}->空對(duì)象,沒(méi)有屬性

②桑孩、通過(guò) new Object([value]);

通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象(和第2種沒(méi)區(qū)別,因?yàn)镺bject就是系統(tǒng)內(nèi)建的構(gòu)造函數(shù))

七、Js面向?qū)ο笾械姆庋b

javascript語(yǔ)言中,沒(méi)有現(xiàn)成的私有屬性/方法機(jī)制,

但可以通過(guò)作用域來(lái)模擬私有屬性,私有方法

對(duì)象的屬性外界是可讀可寫的, 如何來(lái)達(dá)到封裝的目的?

答:通過(guò)閉包+局部變量來(lái)完成

在構(gòu)造函數(shù)內(nèi)部聲明局部變量, 和普通方法,

因?yàn)樽饔糜虻年P(guān)系,只有構(gòu)造函數(shù)內(nèi)的方法,才能訪問(wèn)到局部變量.

而方法對(duì)于外界是開(kāi)放的,因此可以通過(guò)方法來(lái)訪問(wèn)局部變量.

image

在查找屬性或方法的過(guò)程中, 沿著原型鏈來(lái)查找屬性,

對(duì)象->原型->原型的原型....->空對(duì)象-->NULL

原型形成一條鏈

這個(gè)查找屬性的方式,稱為js的原型鏈

①框冀、原型冒充的方式來(lái)完成繼承

image

復(fù)制繼承, 又稱對(duì)象繼承,其實(shí)就是復(fù)制父對(duì)象的屬性到子對(duì)象身上

image

八流椒、Js面向?qū)ο笾械撵o態(tài)屬性或者靜態(tài)方法

image

從豆?jié){機(jī)-->制造豆?jié){的流程看, 豆?jié){機(jī)充當(dāng)?shù)氖菢?gòu)造函數(shù)的角色.

如果單獨(dú)看豆?jié){機(jī)本身, 豆?jié){機(jī)也是一部機(jī)器,也是一個(gè)對(duì)象,也可以有屬性和方法.

那么,豆?jié){機(jī)作為對(duì)象時(shí)的屬性和方法,就相當(dāng)于類的靜態(tài)屬性,靜態(tài)方法.

十、閉包

一句話說(shuō)閉包:

函數(shù)的作用域,不取決于運(yùn)行時(shí)的環(huán)境,

而取決于函數(shù)聲明時(shí)的環(huán)境.

典型應(yīng)用:

閉包與局部作用域模擬私有屬性

閉包與匿名函數(shù)完成"不受干擾的變量"

image

①明也、閉包(4) 閉包+匿名函數(shù)

1.png