可以通過綁定事件,觸發(fā)元素樣式的變化钮莲。
addEventListener() 方法免钻。
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不會(huì)覆蓋已存在的事件句柄崔拥。
添加同一類型的話极舔,會(huì)同時(shí)執(zhí)行,可能后者會(huì)覆蓋前者链瓦,不同類型的事件拆魏,可以任意添加。帶參數(shù)的函數(shù)和不帶參數(shù)的慈俯,調(diào)用方式也稍有區(qū)別渤刃。下面是演示待參數(shù)的場(chǎng)景。
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>事件的冒泡與捕獲:這個(gè)問題的存在原因在于肥卡,頁(yè)面元素存在嵌套關(guān)系時(shí)溪掀,點(diǎn)擊子元素,也會(huì)觸發(fā)父元素的事件步鉴。那哪個(gè)先觸發(fā)呢揪胃?冒泡就是內(nèi)層子元素先觸發(fā),捕獲就是外層元素先觸發(fā)氛琢。(如果只點(diǎn)擊外層元素是不存在這個(gè)問題的喊递。)采用哪種方式取決于addEventListener()函數(shù)的第三個(gè)參數(shù)。
創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - appendChild()
6.也可以刪除節(jié)點(diǎn)阳似,刪除時(shí)骚勘,先找到父節(jié)點(diǎn),然后找到子節(jié)點(diǎn),最后對(duì)子節(jié)點(diǎn)進(jìn)行刪除俏讹。
<div id="div1">
<p id="p1">這是一個(gè)段落当宴。</p>
<p id="p2">這是另外一個(gè)段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
對(duì)于節(jié)點(diǎn)泽疆,也存在替換操作户矢。
-
HTMLCollection 與 NodeList 的區(qū)別
(元素是標(biāo)簽,節(jié)點(diǎn)則不僅包含標(biāo)簽殉疼,還有屬性梯浪,文本等內(nèi)容,所以對(duì)同一個(gè)HTML文檔瓢娜,后者比前者的長(zhǎng)度通常要大一些挂洛。)
HTMLCollection 是 HTML 元素的集合。
NodeList 是一個(gè)文檔節(jié)點(diǎn)的集合眠砾。
NodeList 與 HTMLCollection 有很多類似的地方虏劲。
NodeList 與 HTMLCollection 都與數(shù)組對(duì)象有點(diǎn)類似,可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素荠藤。
NodeList 與 HTMLCollection 都有 length 屬性伙单。
HTMLCollection 元素可以通過 name哈肖,id 或索引來獲取。
NodeList 只能通過索引來獲取淤井。
只有 NodeList 對(duì)象有包含屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。
- 對(duì)象的構(gòu)造函數(shù)游两。給對(duì)象添加屬性的時(shí)候,可以通過構(gòu)造函數(shù)添加贱案,也可以通過prototype屬性添加止吐,屬性或函數(shù)。
有時(shí)候我們想要在對(duì)象的構(gòu)造函數(shù)中添加屬性或方法瘩燥。
使用 prototype 屬性就可以給對(duì)象的構(gòu)造函數(shù)添加新的屬性:
實(shí)例
function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.nationality = "English";
當(dāng)然我們也可以使用 prototype 屬性就可以給對(duì)象的構(gòu)造函數(shù)添加新的方法:
實(shí)例
function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.name = function() { return this.firstName + " " + this.lastName; };
定時(shí)器和匿名函數(shù)的調(diào)用厉膀。以及調(diào)用函數(shù)代碼時(shí)的賦值。
日期的格式化實(shí)例服鹅。
alert(new Date().format("yyyy年MM月dd日"));
alert(new Date().format("MM/dd/yyyy"));
alert(new Date().format("yyyyMMdd"));
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));
var now = new Date();
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo2").innerHTML=new Date().format("yyyy年MM月dd日");
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo3").innerHTML=new Date().format("yyyy年MM月dd日hh小時(shí)mm分ss秒");