lucky出品 必屬精品
DOM操作
當(dāng)網(wǎng)頁(yè)被加載時(shí)永票，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。
HTML DOM 模型被構(gòu)造為對(duì)象的樹
DOM樹
[圖片上傳失敗...(image-c84426-1632303994282)]
通過可編程的對(duì)象模型滥沫，JavaScript 獲得了足夠的能力來創(chuàng)建動(dòng)態(tài)的 HTML侣集。
- JavaScript 能夠改變頁(yè)面中的所有 HTML 元素
- JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性
- JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式
- JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)
一、查找 HTML 元素
通常兰绣，通過 JavaScript世分，您需要操作 HTML 元素。
為了做到這件事情缀辩，您必須首先找到該元素臭埋。有三種方法來做這件事：
- 通過 id 找到 HTML 元素
- 通過標(biāo)簽名找到 HTML 元素
- 通過類名找到 HTML 元素
1、通過 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最簡(jiǎn)單的方法雌澄，是通過使用元素的 id。
本例查找 id="intro" 元素：
實(shí)例
var x=document.getElementById("intro");
如果找到該元素杯瞻，則該方法將以對(duì)象（在 x 中）的形式返回該元素镐牺。
如果未找到該元素，則 x 將包含 null
2魁莉、通過標(biāo)簽名查找 HTML 元素
本例查找 id="main" 的元素睬涧，然后查找 id="main" 元素中的所有 <p> 元素：
實(shí)例
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通過類名找到 HTML 元素
本例通過 getElementsByClassName 函數(shù)來查找 class="intro" 的元素：
實(shí)例
var x=document.getElementsByClassName("intro");
二募胃、HTML DOM - 改變 HTML
1、改變 HTML 內(nèi)容（innerHTML/innerText）
修改 HTML 內(nèi)容的最簡(jiǎn)單的方法是使用 innerHTML 屬性畦浓。
如需改變 HTML 元素的內(nèi)容痹束，請(qǐng)使用這個(gè)語(yǔ)法：
document.getElementById(id).innerHTML=新的 HTML
本例改變了 <p>元素的內(nèi)容：
實(shí)例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
實(shí)例講解：
- 上面的 HTML 文檔含有 id="p1" 的 <h1> 元素
- 我們使用 HTML DOM 來獲得 id="p1" 的元素
- JavaScript 更改此元素的內(nèi)容 (innerHTML)
document.getElementById(id).innerText=新的文本內(nèi)容
注意:
- innerHTML是可以獲取節(jié)點(diǎn)內(nèi) 標(biāo)簽和內(nèi)容
- innerText 只能獲取節(jié)點(diǎn)內(nèi)的文本內(nèi)容
- innerHTML可以設(shè)置html和文本一起的內(nèi)容 HTML標(biāo)簽會(huì)被瀏覽器所解析
- innerText不可以設(shè)置html和文本一起的內(nèi)容 HTML標(biāo)簽不會(huì)被瀏覽器所解析
2、改變 HTML 屬性 (attribute)
如需改變 HTML 元素的屬性讶请，請(qǐng)使用這個(gè)語(yǔ)法：
document.getElementById(id).attribute=新屬性值
本例改變了 <img> 元素的 src 屬性：
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<img src="http://img.zcool.cn/community/01f9ea56e282836ac72531cbe0233b.jpg@2o.jpg" onclick="this.src='http://pic.58pic.com/58pic/13/80/78/35V58PICrWD_1024.jpg'" alt="">
注意：在jQuery里不能改變input的type類型 出于安全性祷嘶，只能是只讀 如更改input的type
- js設(shè)置密碼的顯示隱藏
<input type="text" value="" name="xxx">
<button onclick="pas();">更改為密碼</button>
<button onclick="text();">更改為文本顯示</button>
function pas(){
var i = document.getElementsByTagName('input')[0];
i.type = 'password'
}
function text(){
var i = document.getElementsByTagName('input')[0];
i.type = 'text'
}
script>
function change() {
var input = document.getElementsByTagName('input')[0];
var span = document.getElementsByTagName('span')[0];
if(span.innerHTML == '顯示'){
input.type = 'text';
span.innerHTML = '隱藏';
}else{
input.type = 'password';
span.innerHTML = '顯示';
}
}
</script>
</head>
<body>
密碼<input type="password"><span onclick="change();">顯示</span>
</body>
三 HTML DOM - 改變CSS
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
1夺溢、改變 HTML 樣式 （style.property）
如需改變 HTML 元素的樣式论巍，請(qǐng)使用這個(gè)語(yǔ)法：
document.getElementById(id).style.property=新樣式
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
document.getElementById("p2").style.backgroundImage="url(2.jpg)";
</script>
<p>以上段落通過腳本修改。</p>
</body>
</html>
-
獲取生效style樣式
window.getComputedStyle("元素", "偽類");
style = window.getComputedStyle(box, null); //支持IE9+及非IE瀏覽器
style = window.getComputedStyle(box, null).width;獲取box的width屬性值-
和style區(qū)別
box.style.xxx 只能獲取內(nèi)聯(lián)樣式
getComputedStyle 獲取的生效樣式可以獲取全局的樣式
實(shí)例
-
<style>
#div{
width:200px;
height: 200px;
}
</style>
<script>
window.onload = function (ev) {
var div = document.getElementById('div');
// console.log(div.style.backgroundColor)
// console.log(div.style.width)
var style = window.getComputedStyle(div,null);
console.log(style.width);
console.log(style.height);
console.log(style.backgroundColor);
}
</script>
</head>
<body>
<div id="div" style="background-color: red;"></div>
</body>
</html>
2风响、設(shè)置多個(gè)css樣式
- 設(shè)置cssText
element.style.cssText = "樣式1;樣式2..."
div.style.cssText = 'width:200px;height: 200px;background-color: red';
- 設(shè)置style的屬性
element.setAttribute('style', 'height: 100px !important');
-
設(shè)置id或者class名稱
//設(shè)置id element.setAttribute('id, 'id名稱'); element.id = id名稱嘉汰； //設(shè)置class element.setAttribute('class, 'class名稱'); element.className = class名稱； 設(shè)置多個(gè)class element.className = '樣式1 樣式2'; element.setAttribute('class','樣式1 樣式2')
- 通過add方法添加多個(gè)類名
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
classList
classList 屬性返回元素的類名状勤，作為 DOMTokenList 對(duì)象鞋怀。
該屬性用于在元素中添加，移除及切換 CSS 類持搜。
classList 屬性是只讀的密似，但你可以使用 add() 和 remove() 方法修改它。
3朵诫、使用事件
HTML DOM 允許我們通過觸發(fā)事件來執(zhí)行代碼辛友。
比如以下事件：
- 元素被點(diǎn)擊。
- 頁(yè)面加載完成剪返。
- 輸入框被修改废累。
在接下來的章節(jié)，你會(huì)學(xué)到更多關(guān)于事件的知識(shí)脱盲。
本例改變了 id="id1" 的 HTML 元素的樣式邑滨，當(dāng)用戶點(diǎn)擊按鈕時(shí)：
實(shí)例
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的標(biāo)題 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
點(diǎn)我!</button>
</body>
</html>
四、HTML DOM 事件
對(duì)事件做出反應(yīng)
我們可以在事件發(fā)生時(shí)執(zhí)行 JavaScript钱反，比如當(dāng)用戶在 HTML 元素上點(diǎn)擊時(shí)掖看。
如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，請(qǐng)向一個(gè) HTML 事件屬性添加 JavaScript 代碼：
onclick=JavaScript
HTML 事件的例子：
- 當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
- 當(dāng)網(wǎng)頁(yè)已加載時(shí)
- 當(dāng)圖像已加載時(shí)
- 當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
- 當(dāng)輸入字段被改變時(shí)
- 當(dāng)提交 HTML 表單時(shí)
- 當(dāng)用戶觸發(fā)按鍵時(shí)
1面哥、onclick 點(diǎn)擊事件
onclick = javascript
實(shí)例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">點(diǎn)擊文本!</h1>
</body>
</html>
本例從事件處理器調(diào)用一個(gè)函數(shù)：
onclick="changetext(this)"
實(shí)例
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點(diǎn)擊文本!</h1>
</body>
</html>
2哎壳、使用 HTML DOM 來分配事件
HTML DOM 允許您使用 JavaScript 來向 HTML 元素分配事件：
-
實(shí)例
向 button 元素分配 onclick 事件：
<p>點(diǎn)擊按鈕執(zhí)行 <em>displayDate()</em> 函數(shù).</p> <button id="myBtn">點(diǎn)這里</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> -
阻止右鍵菜單默認(rèn)行為：
在之前使用event對(duì)象的button屬性時(shí), 點(diǎn)擊鼠標(biāo)右鍵會(huì)彈出系統(tǒng)菜單, 如果我們想要?jiǎng)?chuàng)建自己的右鍵菜單, 則需要先阻止默認(rèn)的右鍵菜單
document.oncontextmenu = function(){ console.log("右鍵被按下"); return false; }不使用監(jiān)聽事件的停止傳播(不再派發(fā)事件)
-
當(dāng)標(biāo)簽進(jìn)行嵌套時(shí)
event.stopPropagation();[prɑp??ɡe??n]
<script> onload = function(){ var divOne = document.getElementById('divOne'); var divTwo = document.getElementById('divTwo'); divOne.onclick = function(){ alert('點(diǎn)擊了one'); } divTwo.onclick = function(e){ alert('點(diǎn)擊了two'); e.stopPropagation();//停止時(shí)間的傳播(不在派發(fā)事件) } </script> </head> <body> <div id="divOne">one <div id="divTwo">two</div> </div>e是事件，在firefox中只能在事件現(xiàn)場(chǎng)使用window.event尚卫，所以只有把event傳給函數(shù)使用企孩。為了兼容FF和其它瀏覽器怔蚌，一般會(huì)在函數(shù)里重新給e賦值：
e = window.event || e;
也就是說，如果window.event存在患整，則該瀏覽器支持直接使用window.event，否在就是不支持，不支持就使用傳進(jìn)來的e。e是event，其中包含鼠標(biāo)事件的各種信息
event 對(duì)象代表事件的狀態(tài)盅蝗，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)姆蘸、鼠標(biāo)的位置墩莫、鼠標(biāo)按鈕的狀態(tài)。事件通常與函數(shù)結(jié)合使用乞旦，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行贼穆！
3、onload 和 onunload 事件
onload 事件會(huì)在頁(yè)面或圖像加載完成后立即發(fā)生兰粉。
onload 和 onunload 事件會(huì)在用戶進(jìn)入或離開頁(yè)面時(shí)被觸發(fā)故痊。
onload 事件可用于檢測(cè)訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁(yè)的正確版本玖姑。
onload 和 onunload(了解) 事件可用于處理 cookie愕秫。
onunload 關(guān)閉當(dāng)前頁(yè)面的操作時(shí)候的操作(了解)
實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
<p>彈窗-提示瀏覽器 cookie 是否可用。</p>
</body>
</html>
4焰络、onchange 當(dāng)文本框(input 或 textarea)內(nèi)容改變且失去焦點(diǎn)后觸發(fā)戴甩。
onchange 事件常結(jié)合對(duì)輸入字段的驗(yàn)證來使用。
下面是一個(gè)如何使用 onchange 的例子闪彼。當(dāng)用戶改變輸入字段的內(nèi)容時(shí)甜孤，會(huì)調(diào)用 upperCase() 函數(shù)。
實(shí)例
<script>
function upperCase(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
<body>
<input type="text" id="fname" onchange="upperCase()">
<select onchange="alert(this.value);">
<option value="1">北京</option>
</body>
----------------------------------------------------------------------------------------
<script>
function upperCase(this){
this.value=this.value.toUpperCase();
}
</script>
<body>
<input type="text" id="fname" onchange="upperCase(this)">
</body>
<input type="text" id="fname" onchange="this.value = this.value.toUpperCase();">
onselect：當(dāng)用戶選擇文本框(input 或 textarea)中的內(nèi)容觸發(fā)
<script>
function showMsg()
{
alert("您選中了一些文本畏腕！");
}
</script>
</head>
<body>
一些文本：<input type="text" value="請(qǐng)選中我缴川！" onselect="showMsg()">
<p>函數(shù) showMsg() 在輸入字段中的文本被選中時(shí)觸發(fā)。此函數(shù)顯示一段消息描馅。</p>
5把夸、 onfocus/onblur 獲取焦點(diǎn)/失去焦點(diǎn)
輸入框獲取焦點(diǎn) 的事件
實(shí)例:
<script>
function myFunction(x){
x.style.background="yellow";
}
</script>
輸入你的名字: <input type="text" onfocus="myFunction(this)" onblur="this.style.backgroundColor='red'">
<p>當(dāng)輸入框獲取焦點(diǎn)時(shí)，修改背景色（background-color屬性） 將被觸發(fā)铭污。</p>
6恋日、onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用戶的鼠標(biāo)移至 HTML 元素上方或移出元素時(shí)觸發(fā)函數(shù)。
實(shí)例:
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
7嘹狞、onmouseenter 和 onmouseleave 事件
事件可用于在用戶的鼠標(biāo)移至 HTML 元素上方或移出元素時(shí)觸發(fā)函數(shù)岂膳。
over 和 enter的區(qū)別
如果元素沒有子元素的時(shí)候，效果完全一樣
-
如果元素包含子元素
當(dāng)由父元素進(jìn)入子元素的時(shí)候磅网，over會(huì)繼續(xù)觸發(fā)
over實(shí)際上只要在跨越邊界的時(shí)候谈截，就會(huì)進(jìn)行觸發(fā)
-
onmousemove
鼠標(biāo)移動(dòng)
實(shí)例(包含了onmousemove onmouseenter. onmouseover)
<style> div { width: 100px; height: 100px; border: 1px solid black; margin: 10px; float: left; padding: 30px;d text-align: center; background-color: lightgray; } p { background-color: white; } </style> </head> <body> <h3>該實(shí)例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3> <p> onmousemove 事件在鼠標(biāo)移動(dòng)到 div 元素上時(shí)觸發(fā)。</p> <p> mouseenter 事件中有在鼠標(biāo)指針進(jìn)入 div 元素時(shí)觸發(fā)傻盟。 </p> <p> onmouseover 事件在鼠標(biāo)指針進(jìn)入 div 元素時(shí)觸發(fā),在子元素上也會(huì)觸發(fā)(p 和 span)。</p> <div onmousemove="myMoveFunction()"> <p>onmousemove: <br> <span id="demo">鼠標(biāo)移動(dòng)到我這!</span></p> </div> <div onmouseenter="myEnterFunction()"> <p>onmouseenter: <br> <span id="demo2">鼠標(biāo)移動(dòng)到我這!</span></p> </div> <div onmouseover="myOverFunction()"> <p>onmouseover: <br> <span id="demo3">鼠標(biāo)移動(dòng)到我這!</span></p> </div> <script> x = 0; y = 0; z = 0; function myMoveFunction() { document.getElementById("demo").innerHTML = z+=1; } function myEnterFunction() { document.getElementById("demo2").innerHTML = x+=1; } function myOverFunction() { document.getElementById("demo3").innerHTML = y+=1; } </script>
8嫂丙、onmousedown娘赴、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構(gòu)成了鼠標(biāo)點(diǎn)擊事件的所有部分。首先當(dāng)點(diǎn)擊鼠標(biāo)按鈕時(shí)跟啤，會(huì)觸發(fā) onmousedown 事件诽表，當(dāng)釋放鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmouseup 事件隅肥，最后竿奏，當(dāng)完成鼠標(biāo)點(diǎn)擊時(shí)，會(huì)觸發(fā) onclick 事件腥放。
實(shí)例:
<p onmousedown="this.innerHTML='mousedown'" onmouseup="this.innerHTML='out了'">點(diǎn)擊</p>
<h1 onclick="console.log(this)" onmousedown="console.log('over')" onmouseup="console.log('up')">點(diǎn)擊文本!</h1>
9泛啸、事件對(duì)象 event(隱藏參數(shù))
鼠標(biāo)事件
clientX: 瀏覽器可視區(qū)域的x坐標(biāo)
clientY: 瀏覽器可視區(qū)域的y坐標(biāo)
clientX:跟screenX相比就是將參照點(diǎn)改成了瀏覽器內(nèi)容區(qū)域的左上角，該參照點(diǎn)會(huì)隨之滾動(dòng)條的移動(dòng)而移動(dòng)秃症。
pageX: 瀏覽器內(nèi)容區(qū)域的x坐標(biāo)
pageY: 瀏覽器內(nèi)容區(qū)域的y坐標(biāo)
pageX：參照點(diǎn)也是瀏覽器內(nèi)容區(qū)域的左上角候址，但它不會(huì)隨著滾動(dòng)條而變動(dòng)
screenX: 顯示器屏幕的x坐標(biāo)
screenY: 顯示器屏幕的y坐標(biāo)
screenX:鼠標(biāo)位置相對(duì)于用戶屏幕水平偏移量，而screenY也就是垂直方向的种柑，此時(shí)的參照點(diǎn)也就是原點(diǎn)是屏幕的左上角岗仑。
offsetX: 鼠標(biāo)點(diǎn)擊的元素位置距離元素左邊界的x坐標(biāo)
offsetY: 鼠標(biāo)點(diǎn)擊的元素位置距離元素上邊界的y坐標(biāo)
例如:
document.onmousedown= function(evt) {
var e = evt ;
console.log(e.clientX + ',' + e.clientY);
console.log(e.screenX + ',' + e.screenY);
console.log(e.pageX + “,” + e.pageY);
};
10、鍵盤事件
- onkeydown 鍵盤按住不放會(huì)一直觸發(fā) 任意鍵
- onkeypress 鍵盤按住不放會(huì)一直觸發(fā) 字符鍵
- onkeyup：當(dāng)用戶釋放鍵盤上的某個(gè)鍵觸發(fā)聚请。
鍵碼 : keyCode屬性
所有按鍵(包括功能鍵control, alt,shift, tab, 方向鍵等, 不包括亮度,音量..的按鍵)在發(fā)生 keydown和keyup 事件時(shí)荠雕，event對(duì)象的 keyCode屬性中會(huì)包含一個(gè)代碼，與鍵盤上一個(gè)特定的鍵對(duì)應(yīng)驶赏。對(duì)數(shù)字字母字符集炸卑，keyCode屬性的值與 ASCII 碼中對(duì)應(yīng).
document.onkeydown = function(evt) {
var e = evt ;
console.log(e.keyCode); //按任意鍵，得到相應(yīng)的 keyCode
String.fromCharCode(e.keyCode) //獲對(duì)應(yīng)字符
};
注意: 大寫字母或小寫的編碼相同, 都為大寫字母矾兜。
字符編碼: charCode屬性
Firefox,Chrome和Safari的event對(duì)象支持charCode屬性,只有按下字符鍵并且使用keypress事件時(shí)才會(huì)得到charCode,這個(gè)charCode的值和UniCode碼對(duì)應(yīng),和keyCode也類似,但是charCode的字母區(qū)分大小寫.(字符鍵:數(shù)字,字母(區(qū)分大小寫),字符,空格,回車)
實(shí)例
document.onkeypress =function(evt) {
var e= evt ;
console.log(e.charCode);
}
注：可以使用String.fromCharCode()將 Unicode編碼轉(zhuǎn)換成實(shí)際的字符
11、HTML DOM EventListener 事件監(jiān)聽
可以對(duì)一個(gè)element綁定多個(gè)同樣的事件 且不會(huì)被覆蓋
-
addEventListener() 方法
語(yǔ)法
element.addEventListener(event, function, useCapture);
第一個(gè)參數(shù)是事件的類型 (如 "click" 或 "mousedown").
第二個(gè)參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)患久。
第三個(gè)參數(shù)是個(gè)布爾值用于描述事件是冒泡還是捕獲篙挽。該參數(shù)是可選的敞峭。
- 實(shí)例:
在用戶點(diǎn)擊按鈕時(shí)觸發(fā)監(jiān)聽事件：
//使用函數(shù)名沉迹，來引用外部函數(shù): <p>該實(shí)例使用 addEventListener() 方法在按鈕中添加點(diǎn)擊事件。 </p> <button id="myBtn">點(diǎn)我</button> <p id="demo"></p> <script> document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> //直接添加函數(shù)體 element.addEventListener("click", function(){ alert("Hello World!"); }); //不使用事件監(jiān)聽的情況 window.onload = function(){ var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert("第一個(gè)事件"); } btn.onclick = function(){ alert("第二個(gè)事件"); } btn.onclick = function(){ alert("第三個(gè)事件"); } } 最后只輸出：第三個(gè)事件刻坊，因?yàn)楹笠粋€(gè)方法都把前一個(gè)方法覆蓋掉了
| [圖片上傳失敗...(image-461478-1632303994283)] | 注意:不要使用 "on" 前綴灾而。 例如锡搜，使用 "click" ,而不是使用 "onclick"肠缔。 |
|---|---|
-
向同一個(gè)元素中添加多個(gè)事件句柄
addEventListener() 方法允許向同一個(gè)元素添加多個(gè)事件，且不會(huì)覆蓋已存在的事件：
-
實(shí)例
element.addEventListener("click", myFunction); element.addEventListener("click", mySecondFunction);你可以向同個(gè)元素添加不同類型的事件：
-
實(shí)例
element.addEventListener("mouseover", myFunction); element.addEventListener("click", mySecondFunction); element.addEventListener("mouseout", myThirdFunction);
-
-
向 Window 對(duì)象添加事件句柄
addEventListener() 方法允許你在 HTML DOM 對(duì)象添加事件監(jiān)聽行疏， HTML DOM 對(duì)象如： HTML 元素, HTML 文檔, window 對(duì)象柳譬【俗或者其他支出的事件對(duì)象如: xmlHttpRequest 對(duì)象。
- 實(shí)例
當(dāng)用戶重置窗口大小時(shí)添加事件監(jiān)聽：
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = document.body.scrollWidth+''+document.body.scrollHeight; }); 傳遞參數(shù)
當(dāng)傳遞參數(shù)值時(shí)附鸽，使用"匿名函數(shù)"調(diào)用帶參數(shù)的函數(shù)：
<button id="myBtn">點(diǎn)我</button>
<p id="demo"></p>
<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>
- 事件冒泡或事件捕獲赌蔑？
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發(fā)的順序椎例。 如果你將<p> 元素插入到 <div> 元素中慎陵，用戶點(diǎn)擊 <p> 元素, 哪個(gè)元素的 "click" 事件先被觸發(fā)呢过牙？
在 冒泡 中撵溃，內(nèi)部元素的事件會(huì)先被觸發(fā)疚鲤，然后再觸發(fā)外部元素，即：<p> 元素的點(diǎn)擊事件先觸發(fā)缘挑，然后會(huì)觸發(fā) <div> 元素的點(diǎn)擊事件集歇。
在 捕獲 中，外部元素的事件會(huì)先被觸發(fā)卖哎，然后才會(huì)觸發(fā)內(nèi)部元素的事件，即： <div> 元素的點(diǎn)擊事件先觸發(fā) 删性，然后再觸發(fā) <p> 元素的點(diǎn)擊事件亏娜。
addEventListener() 方法可以指定 "useCapture" 參數(shù)來設(shè)置傳遞類型：
addEventListener(event, function, useCapture);
默認(rèn)值為 false, 即冒泡傳遞，當(dāng)值為 true 時(shí), 事件使用捕獲傳遞蹬挺。
實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<p>實(shí)例演示了在添加不同事件監(jiān)聽時(shí)维贺，冒泡與捕獲的不同。</p>
<div id="myDiv">
<p id="myP">點(diǎn)擊段落巴帮，我是冒泡溯泣。</p>
</div><br>
<div id="myDiv2">
<p id="myP2">點(diǎn)擊段落，我是捕獲榕茧。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
alert("你點(diǎn)擊了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你點(diǎn)擊了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你點(diǎn)擊了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你點(diǎn)擊了 DIV2 元素 !");
}, true);
</script>
</body>
</html>
組織當(dāng)標(biāo)簽嵌套時(shí)候的冒泡擴(kuò)散
<script>
onload = function () {
var divOne = document.getElementById('div_one');
var divTwo = document.getElementById('div_two');
divOne.style.cssText = 'width:100%;height:400px;background-color:red;';
divTwo.style.cssText = 'width:100%;height:200px;background-color:green;';
divOne.addEventListener('click',function (evt) {
console.log('紅')
})
divTwo.addEventListener('click',function (evt) {
console.log('綠')
evt.stopPropagation();//阻止擴(kuò)散
})
};
</script>
</head>
<body>
<div id="div_one">
<div id="div_two"></div>
</div>
</body>
</html>
-
removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener("mousemove", myFunction);
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <head> <style> #myDIV { background-color: coral; border: 1px solid; padding: 50px; color: white; } </style> </head> <body> <div id="myDIV"> div 元素添加了 onmousemove 事件句柄垃沦，鼠標(biāo)在桔紅色的框內(nèi)移動(dòng)時(shí)會(huì)顯示隨機(jī)數(shù)。 <p>點(diǎn)擊按鈕移除 DIV 的事件句柄用押。</p> <button onclick="removeHandler()" id="myBtn">點(diǎn)我</button> </div> <p id="demo"></p> <script> document.getElementById("myDIV").addEventListener("mousemove", myFunction); function myFunction() { document.getElementById("demo").innerHTML = Math.random(); document.getElementById("demo").style.backgroundColor = 'rgb('+Math.floor(255*Math.random())+','+Math.floor(255*Math.random())+','+Math.floor(255*Math.random()); } function removeHandler() { document.getElementById("myDIV").removeEventListener("mousemove", myFunction); } </script> </body> </html>
12肢簿、HTML DOM 元素(節(jié)點(diǎn))
創(chuàng)建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)）蜻拨，然后向一個(gè)已存在的元素追加該元素池充。
-
創(chuàng)建節(jié)點(diǎn)
document.createElement('標(biāo)簽名')
-
創(chuàng)建文本節(jié)點(diǎn)
document.createTextNode("文本內(nèi)容")
-
添加節(jié)點(diǎn)
節(jié)點(diǎn)名.appendChild("node")
或者
節(jié)點(diǎn)名.innerText = '文本的內(nèi)容';
-
從父元素中刪除子元素
parent.removeChild(child);
例如:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);ul.removeChild(ul.lastElementChild);//刪除節(jié)點(diǎn)
-
cloneNode() 方法
定義和用法
cloneNode() 方法創(chuàng)建節(jié)點(diǎn)的拷貝，并返回該副本缎讼。
cloneNode(true) 方法克隆所有屬性以及它們的值收夸。
如果您需要克隆所有后代，請(qǐng)把 deep 參數(shù)設(shè)置 true血崭，否則設(shè)置為 false卧惜。
實(shí)例
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <hr> <ul> </ul> <script> var node = document.getElementsByTagName('ul')[0]; var node1 = document.getElementsByTagName('ul')[1]; var newLi = document.createElement('li') newLi.innerText = '新的' l = node.children.length; for(var i=0;i<l;i++){ var x = node.children[i].cloneNode(true); node1.appendChild(x) } </script>
-
element.replaceChild() 替換元素中的子節(jié)點(diǎn)
document.getElementById("myList").replaceChild(newnode,oldnode);實(shí)例
document.getElementById("ul").replaceChild(document.getElementsByTagName('li')[1] ,document.getElementsByTagName('li')[0]);
-
獲取父節(jié)點(diǎn)
node.parentNode
-
獲取父類的第一個(gè)節(jié)點(diǎn)/最后一個(gè)
node.parentNode.firstChild 如果父類換行才是第一個(gè)子標(biāo)簽 那么會(huì)是空白
node.parentNode.lastChild 獲取最后一個(gè)節(jié)點(diǎn)
firstChild//第一個(gè)HTML存在換行則會(huì)獲取空白節(jié)點(diǎn) lastChild//最后一個(gè)HTML存在換行則會(huì)獲取空白節(jié)點(diǎn) firstElementChild lastElementChild注意:因?yàn)榈谝粋€(gè)是空白節(jié)點(diǎn) 原因是 代碼換行 如果不換行第一個(gè)就是正常的標(biāo)簽
-
前一個(gè)同胞節(jié)點(diǎn)
previousSibling 如果前一個(gè)HTML存在換行則會(huì)獲取空白節(jié)點(diǎn)
previousElementSibling 前一個(gè)兄弟節(jié)點(diǎn)是否換行不會(huì)造成影響
注釋：如果沒有 previousSibling 節(jié)點(diǎn)厘灼，則返回值是 null。
后一個(gè)同胞節(jié)點(diǎn)
nextElementSibling 后一個(gè)兄弟節(jié)點(diǎn)是否換行不會(huì)造成影響
-
獲取所有子節(jié)點(diǎn)
node.children
-
返回元素的標(biāo)簽名序苏。
element.tagName
-
從元素中移除指定屬性
removeAttribute(name)
console.log(document.getElementById("ul").removeAttribute('id')); -
在指定的已有的子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)手幢。
element.insertBefore(新的節(jié)點(diǎn),插入節(jié)點(diǎn)的位置)
<ul id="myList"><li>Coffee</li><li>Tea</li></ul> <p id="demo">請(qǐng)點(diǎn)擊按鈕向列表插入一個(gè)項(xiàng)目。</p> <button onclick="myFunction()">試一下</button> <script> function myFunction() { var newItem=document.createElement("LI") var textnode=document.createTextNode("Water") newItem.appendChild(textnode) var list=document.getElementById("myList") list.insertBefore(newItem,list.childNodes[0]); } </script>
節(jié)點(diǎn)添加
實(shí)例
<div id="div1">
<p id="p1">這是一個(gè)段落忱详。</p>
<p id="p2">這是另一個(gè)段落围来。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個(gè)新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
