JS事件将宪、Bom對象和Dom對象
主要內(nèi)容
事件
? 事件 (Event) 是 JavaScript 應(yīng)用跳動(dòng)的心臟 雏婶，進(jìn)行交互物赶，使網(wǎng)頁動(dòng)起來。當(dāng)我們與瀏覽器中 Web 頁面進(jìn)行某些類型的交互時(shí)留晚，事件就發(fā)生了酵紫。事件可能是用戶在某些內(nèi)容上的點(diǎn)擊、鼠標(biāo)經(jīng)過某個(gè)特定元素或按下鍵盤上的某些按鍵错维。事件還可能是 Web 瀏覽器中發(fā)生的事情奖地，比如說某個(gè) Web 頁面加載完成，或者是用戶滾動(dòng)窗口或改變窗口大小赋焕。
? 通過使用 JavaScript 参歹，你可以監(jiān)聽特定事件的發(fā)生，并規(guī)定讓某些事件發(fā)生以對這些事件做出響應(yīng)隆判。
作用
（1）驗(yàn)證用戶輸入的數(shù)據(jù)犬庇。
（2）增加頁面的動(dòng)感效果。
（3）增強(qiáng)用戶的體驗(yàn)度
事件中的幾個(gè)名詞
事件源: 誰觸發(fā)的事件
事件名: 觸發(fā)了什么事件
事件監(jiān)聽: 誰管這個(gè)事情蜜氨，誰監(jiān)視？
事件處理:發(fā)生了怎么辦
例如
闖紅燈 事件源:車 ; 事件名: 闖紅燈; 監(jiān)聽：攝像頭捎泻、交警 ; 處理:扣分罰款
單擊按鈕 事件源:按鈕; 事件名: 單擊; 監(jiān)聽:窗口 ; 處理:執(zhí)行函數(shù)
? 當(dāng)我們用戶在頁面中進(jìn)行的點(diǎn)擊動(dòng)作飒炎，鼠標(biāo)移動(dòng)的動(dòng)作，網(wǎng)頁頁面加載完成的動(dòng)作等笆豁，都可以稱之為事件名稱郎汪，即：click、mousemove闯狱、load 等都是事件名稱煞赢，具體的執(zhí)行代碼處理，響應(yīng)某個(gè)事件的函數(shù)哄孤。
<body onload="loadWindow();"></body>
<script>
function loadWindow(){
alert("加載窗體");
}
</script>
事件類型
? JavaScript可以處理的事件類型為：鼠標(biāo)事件照筑、鍵盤事件、HTML事件。
? http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查
? Window 事件屬性：針對 window 對象觸發(fā)的事件（應(yīng)用到 <body> 標(biāo)簽）
? Form 事件：由 HTML 表單內(nèi)的動(dòng)作觸發(fā)的事件（應(yīng)用到幾乎所有 HTML 元素凝危，但最常用在 form 元素中）
? Keyboard 事件 : 鍵盤事件
? Mouse 事件：由鼠標(biāo)或類似用戶動(dòng)作觸發(fā)的事件
? Media 事件：由媒介（比如視頻波俄、圖像和音頻）觸發(fā)的事件（適用于所有 HTML 元素，但常見于媒介元素中蛾默，比如 <audio>懦铺、<embed>、<img>支鸡、<object> 以及 <video>）
? 幾個(gè)常用的事件：
? <font color="red">onclick 冬念、onblur 、onfocus 牧挣、onload 急前、onchange</font>
? <font color="red">onmouseover、onmouseout浸踩、onkeyup叔汁、onkeydown</font>
onload：當(dāng)頁面或圖像加載完后立即觸發(fā)
onblur：元素失去焦點(diǎn)
onfocus：元素獲得焦點(diǎn)
onclick：鼠標(biāo)點(diǎn)擊某個(gè)對象
onchange：用戶改變域的內(nèi)容
onmouseover：鼠標(biāo)移動(dòng)到某個(gè)元素上
onmouseout：鼠標(biāo)從某個(gè)元素上離開
onkeyup：某個(gè)鍵盤的鍵被松開
onkeydown：某個(gè)鍵盤的鍵被按下
事件流和事件模型
? 我們的事件最后都有一個(gè)特定的事件源，暫且將事件源看做是HTML的某個(gè)元素检碗，那么當(dāng)一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí)，該事件會(huì)在元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按特定的順序傳播另假，路徑所經(jīng)過的節(jié)點(diǎn)都會(huì)受到該事件边篮，這個(gè)傳播過程稱為DOM事件流。
? 事件順序有兩種類型：**事件捕獲 **和 事件冒泡思杯。
? 冒泡和捕獲其實(shí)都是事件流的不同表現(xiàn)挠进，這兩者的產(chǎn)生是因?yàn)镮E和Netscape兩個(gè)大公司完全不同的事件流概念產(chǎn)生的色乾。（事件流：是指頁面接受事件的順序）IE的事件流是事件冒泡，Netscape的事件流是事件捕獲流领突。
事件冒泡
? IE的事件流叫做事件冒泡暖璧，即事件開始時(shí)由最具體的元素接受，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)（文檔）君旦。例如下面的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
? 如果點(diǎn)擊了頁面中的<div>元素澎办，那么這個(gè)click事件會(huì)按照如下順序傳播：
? 1嘲碱、<div>
? 2、<body>
? 3浮驳、<html>
? 4离咐、document
? 也就是說县貌，click事件首先在div元素上發(fā)生摆碉，而這個(gè)元素就是我們單擊的元素楞泼。然后，click事件沿DOM樹向上傳播，在每一級(jí)節(jié)點(diǎn)上都會(huì)發(fā)生捐韩，直到傳播到document對象。
? 所有現(xiàn)代瀏覽器都支持事件冒泡，但在具體實(shí)現(xiàn)上還是有一些差別。
事件捕獲
? Netscape提出的另一種事件流叫做事件捕獲，事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件责球，而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。事件捕獲的用意在于在事件到達(dá)預(yù)定目標(biāo)之前捕獲它笛匙。還以前面的例子為例。那么單擊<div>元素就會(huì)按下列順序觸發(fā)click事件：
? 1、document
? 2雹舀、<html>
? 3、<body>
? 4、<div>
? 在事件捕獲過程中，document對象首先接收到click事件，然后沿DOM樹依次向下，一直傳播到事件的實(shí)際目標(biāo)，即<div>元素。
? 雖然事件捕獲是Netscape唯一支持的事件流模式粒竖，但很多主流瀏覽器目前也都支持這種事件流模型。盡管“DOM2級(jí)事件”規(guī)范要求事件應(yīng)該從document對象開始時(shí)傳播瞧柔，但這些瀏覽器都是從window對象開始捕獲的备绽。
DOM 事件流
? “DOM2級(jí)事件”規(guī)定的事件流包括三個(gè)階段：事件捕獲階段猴伶、處于目標(biāo)階段和事件冒泡階段办桨。首先發(fā)生的是事件捕獲階段饰剥，為截獲事件提供了機(jī)會(huì)顾孽。然后是實(shí)際的目標(biāo)接收到事件龄章。最后一個(gè)階段是冒泡階段锚贱，可以在這個(gè)階段對事件做出響應(yīng)吧碾。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Z8HCWv45-1607047763074)(/圖片1dfgh.png)]
事件處理程序
? 事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作尿庐。例如click锐借、load和mouseover都是事件的名字布轿，而響應(yīng)某個(gè)事件的函數(shù)就叫做事件處理程序（或事件偵聽器）福铅。事件處理程序的名字以“on”開頭庵佣，因此click事件的事件處理程序就是onclick辫塌，為事件指定處理程序的方式有好幾種。
HTML 事件處理程序
? 某個(gè)元素支持的每種事件树叽，都可以用一個(gè)與相應(yīng)事件處理程序同名的HTML特性來指定性锭。這個(gè)特性的值應(yīng)該是能夠執(zhí)行的JavaScript代碼：
<input type="button" value="Press me" onclick="alert('thanks');" />
? 這樣做有一些缺點(diǎn)，例如耦合度過高，還可能存在時(shí)差問題（當(dāng)用戶點(diǎn)擊按鈕時(shí)，處理函數(shù)還未加載到膝藕，此時(shí)處理函數(shù)是單獨(dú)寫的一段js代碼）芭挽，而且在不同的瀏覽器上可能會(huì)有不同的效果滑废。
DOM0 級(jí)事件處理程序
? 通過JavaScript指定事件處理程序的傳統(tǒng)方式蝗肪，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩曰硌印＿@種方式被所有現(xiàn)代瀏覽器所支持。這種方式首先必須取得一個(gè)要操作的對象的引用甘有，每個(gè)元素都有自己的事件處理程序?qū)傩裕@些屬性通常全都小寫，例如onclick卑硫，然后將這種屬性的值設(shè)為一個(gè)函數(shù)鼓寺，就可以指定事件處理程序了叭首。例如：
<body>
<button id="myBtn">按鈕</button>
<script type="text/javascript">
var btn = document.getElementById('myBtn');
btn.onclick = function(){
console.log('you click a button');
}
</script>
</body>
? 以這種方式添加的事件處理程序會(huì)在事件流的冒泡階段被處理。而且执泰，只能為同一個(gè)元素的同一個(gè)事件設(shè)定一個(gè)處理程序（覆蓋）卦碾，也可以通過刪除DOM0級(jí)方法指定的事件處理程序芦岂，只要將屬性值設(shè)為null即可：
btn.onclick = null;
DOM2 級(jí)事件處理程序
? “DOM2級(jí)事件”定義了兩個(gè)方法假消，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()河泳。所有DOM節(jié)點(diǎn)都包含這兩個(gè)方法蛾绎，并且他們都接受3個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值桥爽。最后這個(gè)布爾值參數(shù)如果是true朱灿，則表示在捕獲階段調(diào)用事件處理程序；如果是false則表示在冒泡階段調(diào)用事件處理程序钠四。
<body>
<button id="myBtn">按鈕</button>
<script type="text/javascript">
var btn = document.getElementById('myBtn')
btn.addEventListener('click',function(){
alert('you add a eventListener by DOM2')
},false)
btn.addEventListener('click',function(){
alert('you add a eventListener by DOM2 again')
},false)
function thread(){
alert('you add a eventListener by DOM2 第三次')
}
btn.addEventListener('click',thread,false)
btn.removeEventListener('click',thread,false)
</script>
</body>
? 這種方式可以為同一個(gè)元素的同一個(gè)事件添加多個(gè)處理函數(shù)盗扒。還可刪除事件處理函數(shù)，注意缀去，在刪除的時(shí)候侣灶，不能刪除匿名處理函數(shù)。
本節(jié)作業(yè)
1. 常用的幾種事件
2. 綁定事件的幾種方式
BOM對象
? BOM的核心對象是window缕碎，它表示瀏覽器的一個(gè)實(shí)例褥影。window對象有雙重角色十嘿，它既是通過JavaScript訪問瀏覽器窗口的一個(gè)接口奋岁，又是ECMAScript規(guī)定的Global對象祭阀。這意味著在網(wǎng)頁中定義的任何一個(gè)對象实夹、變量和函數(shù)曹质，都以window作為其Global對象糟描，因此有權(quán)訪問parseInt()等方法著瓶。如果頁面中包含框架洒扎，則每個(gè)框架都擁有自己的window對象熏迹，并且保存在frames集合中檐薯。在frames集合中，可以通過數(shù)值索引（從0開始注暗，從左至右坛缕，從上到下）或者框架的名稱來訪問相應(yīng)的window對象。
Window對象方法
系統(tǒng)對話框
? 瀏覽器通過（實(shí)際是window對象的方法）alert()捆昏、confirm()赚楚、prompt()方法可以調(diào)用系統(tǒng)對話框向用戶顯示消息。
（1）消息框:alert骗卜， 常用宠页。
alert() 方法用于顯示帶有一條指定消息和一個(gè) OK 按鈕的警告框。
（2）輸入框:prompt寇仓，返回提示框中的值举户。
prompt() 方法用于顯示可提示用戶進(jìn)行輸入的對話框。
參數(shù)（可選）：
第一個(gè)參數(shù)：要在對話框中顯示的純文本遍烦。
第二個(gè)參數(shù)：默認(rèn)的輸入文本俭嘁。
（3）確認(rèn)框:confirm，返回 true/false.
confirm() 方法用于顯示一個(gè)帶有指定消息和 OK 及取消按鈕的對話框服猪。
<style type="text/css">
#aa{
border: 1px solid red;
height: 100px;
}
</style>
<body>
<div id="aa">
This is a div
</div>
<button onclick="testAlert();">警告</button>
<button onclick="testComfirm();">修改</button>
<button onclick="testPrompt();">輸入</button>
<script type="text/javascript">
// 1.警告框
function testAlert(){
alert('警告框９┨睢９赵啤！');
}
/*
2.輸入框
返回值：輸入的內(nèi)容
* */
function testPrompt(){
var item = prompt('請輸入年齡'); // item得到輸入的值
// console.log(item)
// alert(prompt('請輸入年齡',18)); // 將輸入的值輸出
}
/*
3.確認(rèn)框
返回值：boolean（true|false）
* */
function testComfirm(){
var result = confirm('真的要改嗎近她？');
if(result){
var ele = document.getElementById("aa");
ele.style.color="red";
ele.innerHTML="<span>fdsfsd</span>";
}else{
alert("沒事別瞎點(diǎn)慨丐。。泄私。");
}
}
</script>
</body>
打開窗口
? window.open()方法既可以導(dǎo)航到一個(gè)特定的URL也可以用來打開一個(gè)新的窗口
<script type="text/javascript">
function openBaidu(){
window.open('http://www.baidu.com','_self'); // _self房揭、_blank等
// window.open(); //空白窗口
}
</script>
<input type="button" name="open" value="百度" onclick='openBaidu();' />
關(guān)閉窗口
? window.close()：關(guān)閉窗口。
? 例：點(diǎn)擊按鈕關(guān)閉當(dāng)前窗口晌端。
<input type="button" value="關(guān)閉窗口" onclick="window.close();" />
時(shí)間函數(shù)
setTimeout()
? setTimeout() : 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式捅暴。返回一個(gè)唯一的標(biāo)識(shí)；也可以通過返回的標(biāo)識(shí)cliearTimeout(id)： 來清除指定函數(shù)的執(zhí)行咧纠。
var id = setTimeout(function,times);
clearTimeout(id);
示例：
<script type="text/javascript">
// 延遲3 秒后出現(xiàn) alert
function hello() {
alert("對不起, 要你久候");
}
setTimeout("hello()", 3000);
// 時(shí)間顯示器
var timeout;
function init(){
// 拿到當(dāng)前時(shí)間
var date = new Date();
var time = date.toLocaleString();
// 拿到相應(yīng)對象
var h1 = document.getElementById('h1');
// 根據(jù)需求添加樣式
if(0==date.getSeconds()){ // 當(dāng)時(shí)間的秒數(shù)變成0時(shí)蓬痒，顯示紅色字體
h1.innerHTML = '<span style="color:red">' + time + '</span>';
} else {
h1.innerHTML = time;
}
/*
* 定時(shí)操作，只執(zhí)行一次
第一個(gè)參數(shù)：執(zhí)行的方法漆羔；第二個(gè)參數(shù)：定時(shí)梧奢，單位是毫秒
* */
setTimeout(init,1000); // 等多少時(shí)間來執(zhí)行
}
// window.setTimeout(init,1000);// 只執(zhí)行一次
// 停止操作
function stopShow () {
clearTimeout(timeout);
}
</script>
<body onload="init();">
<h1 id="h1"></h1>
<button onclick="stopShow()">時(shí)間停止</button>
</body>
? 在times毫秒后執(zhí)行function指定的方法，執(zhí)行之前也可以取消
setInteval()
? setInterval():可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式演痒，也可根據(jù)返回的標(biāo)識(shí)用來結(jié)束亲轨。該方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉鸟顺。
var id = setInterval(function,times);
clearInterval(id);
function test(){
console.log(".....");
}
// window是一個(gè)全局對象惦蚊，通過全局對象調(diào)用setInterval()函數(shù)
window.setInterval(test,1000);
history對象
? history 對象是歷史對象。包含用戶（在瀏覽器窗口中）訪問過的 URL讯嫂。history 對象是 window 對象的一部分蹦锋，可通過 window.history 屬性對其進(jìn)行訪問。
? history對象的屬性：length欧芽，返回瀏覽器歷史列表中的 URL 數(shù)量莉掂。
? history對象的方法：
? back()：加載 history 列表中的前一個(gè) URL。
? forward()：加載歷史列表中的下一個(gè) URL千扔。當(dāng)頁面第一次訪問時(shí)憎妙，還沒有下一個(gè)url。
? go(number|URL): URL 參數(shù)使用的是要訪問的 URL昏鹃。而 number 參數(shù)使用的是要訪問的 URL 在 History 的 URL 列表中的相對位置尚氛。go(-1)，到上一個(gè)頁面
013-history.html
<body>
<a href="013-history-a.html">013-history-a.html</a>
<h1>我是第一個(gè)頁面</h1>
<input type="button" value="前進(jìn)" onclick="window.history.forward();" />
<script>
console.log(window.history);
</script>
</body>
013-history-a.html
<body>
<a href="013-history-b.html">013-history-b.html</a>
<h1>我是A頁面</h1>
<input type="button" value="后退" onclick="window.history.back();"/>
</body>
013-history-b.html
<body>
<h1>我是B頁面</h1>
<input type="button" value="第一個(gè)頁面" onclick="window.history.go(-2);"/>
<input type="button" value="后退" onclick="window.history.back();"/>
</body>
location對象
? location 對象是window對象之一洞渤，提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息，還提供了一些導(dǎo)航功能属瓣。也可通過 window.location 屬性來訪問载迄。
? location 對象的屬性 href：設(shè)置或返回完整的 URL
? location 對象的方法
? reload()：重新加載當(dāng)前文檔讯柔。
? replace()：用新的文檔替換當(dāng)前文檔。
<script type="text/javascript">
function openBaidu(){
// 沒有歷史記錄,用新的文檔替換當(dāng)前文檔
// window.location.replace("http://www.baidu.com");
// console.log(window.location.href); // 獲取完整的url
window.location.;
}
</script>
<body>
<input type="text" value="" />
<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" value="百度" onclick="openBaidu();" />
</body>
本節(jié)作業(yè)
- 實(shí)現(xiàn)時(shí)間計(jì)時(shí)功能
- JS的跳轉(zhuǎn)方式
DOM對象
? <font color="red">DOM</font>：Document Object Model 文檔對象模型
? 要實(shí)現(xiàn)頁面的動(dòng)態(tài)交互效果护昧，bom 操作遠(yuǎn)遠(yuǎn)不夠魂迄，需要操作 html 才是核心。如何操作 htm惋耙，就是 DOM捣炬。簡單的說绽榛，dom 提供了用程序動(dòng)態(tài)控制 html 接口湿酸。DOM即文檔對象模型描繪了一個(gè)層次化的節(jié)點(diǎn)樹，運(yùn)行開發(fā)人員添加灭美、移除和修改頁面的某一部分推溃。dom 處于javascript 的核心地位上届腐。
? 每個(gè)載入瀏覽器的 HTML 文檔都會(huì)成為 Document 對象襟铭。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問。Document 對象是 Window 對象的一部分盖呼，可通過 window.document 屬性對其進(jìn)行訪問。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-2NkkFYd0-1607047763079)(/圖片1trj.png)]
節(jié)點(diǎn)
? 加載 HTML 頁面時(shí)，Web 瀏覽器生成一個(gè)樹型結(jié)構(gòu)灸拍，用來表示頁面內(nèi)部結(jié)構(gòu)。DOM 將這種樹型結(jié)構(gòu)理解為由節(jié)點(diǎn)組成舒岸，組成一個(gè)節(jié)點(diǎn)樹俄认。對于頁面中的元素眯杏，可以解析成以下幾種類型的節(jié)點(diǎn)：
| 節(jié)點(diǎn)類型 | HTML內(nèi)容 | 例如 |
|---|---|---|
| 文檔節(jié)點(diǎn) | 文檔本身 | 整個(gè)文檔 document |
| 元素節(jié)點(diǎn) | 所有的HTML元素 | <a>、<div>巷波、<p> |
| 屬性節(jié)點(diǎn) | HTML元素內(nèi)的屬性 | id垮耳、href、name儡炼、class |
| 文本節(jié)點(diǎn) | 元素內(nèi)的文本 | hello |
| 注釋節(jié)點(diǎn) | HTML中的注釋 |
? html --> 文檔節(jié)點(diǎn)
? div --> 元素節(jié)點(diǎn)
? title --> 屬性節(jié)點(diǎn)
? 測試 Div --> 文本節(jié)點(diǎn)
<html>
<head>
<title>樹!樹!到處都是樹!</title>
</head>
<body>
<div title="屬性節(jié)點(diǎn)">測試 Div</div>
</body>
</html>
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-eOAkUrRm-1607047763085)(/圖片1fdgfh.png)]
操作元素的節(jié)點(diǎn)
? 當(dāng)HTML文檔在被解析為一顆DOM樹以后妓湘，里面的每一個(gè)節(jié)點(diǎn)都可以看做是一個(gè)一個(gè)的對象查蓉，我們稱為DOM對象乌询，對于這些對象，我們可以進(jìn)行各式各樣的操作豌研，查找到某一個(gè)或者一類節(jié)點(diǎn)對象妹田，可以創(chuàng)建某種節(jié)點(diǎn)對象，可以在某個(gè)位置添加節(jié)點(diǎn)對象鹃共，甚至可以動(dòng)態(tài)地刪除節(jié)點(diǎn)對象鬼佣，這些操作可以使我們的頁面看起來有動(dòng)態(tài)的效果，后期結(jié)合事件使用霜浴，就能讓我們的頁面在特定時(shí)機(jī)晶衷、特定的事件下執(zhí)行特定的變換。
獲取節(jié)點(diǎn)
? 在進(jìn)行增阴孟、刪晌纫、改的操作時(shí)，都需要指定到一個(gè)位置永丝，或者找到一個(gè)目標(biāo)锹漱，此時(shí)我們就可以通過Document對象提供的方法，查找慕嚷、定位某個(gè)對象（也就是我們說的節(jié)點(diǎn)）哥牍。
? <font color="red">注意：操作 dom 必須等節(jié)點(diǎn)初始化完畢后，才能執(zhí)行喝检。</font>
? 處理方式兩種:
? （1）把 script 調(diào)用標(biāo)簽移到html末尾即可嗅辣；
? （2）使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件里的 JS挠说。
window.onload = function () { //預(yù)加載 html 后執(zhí)行};
? 獲取方式如下：
| 方法 | 描述 |
|---|---|
| getElementById() | 根據(jù)id獲取dom對象澡谭，如果id重復(fù)，那么以第一個(gè)為準(zhǔn) |
| getElementsByTagName() | 根據(jù)標(biāo)簽名獲取dom對象數(shù)組 |
| getElementsByClassName() | 根據(jù)樣式名獲取dom對象數(shù)組 |
| getElementsByName() | 根據(jù)name屬性值獲取dom對象數(shù)組纺涤，常用于多選獲取值 |
<body>
<p id="p1" class="para">這是一個(gè)段落<span>文本</span></p>
<p id="p1" class="para">這又是一個(gè)段落</p>
<input type="text" name="txt" />
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="籃球" />籃球
<input type="checkbox" name="hobby" value="足球" />足球
<hr />
<a href="javascript:void(0)" onclick="testById()">按照id獲取</a>
<a href="javascript:void(0)" onclick="testByName()">按照name獲取</a>
<a href="javascript:void(0)" onclick="testByTagName()">按照標(biāo)簽名獲取</a>
<a href="javascript:void(0);" onclick="testByClass();">按照class獲取</a>
</body>
? <font color="red">說明：href="javascript:void(0)"：偽協(xié)議译暂，表示不執(zhí)行跳轉(zhuǎn)，而執(zhí)行指定的點(diǎn)擊事件撩炊。</font>
<script type="text/javascript">
// 按照id獲取元素
function testById() {
// 返回單個(gè)對象
var p = document.getElementById("p1");
console.log(p);
// 表示獲取元素開始標(biāo)簽和結(jié)束標(biāo)簽之間的html結(jié)構(gòu)
console.log(p.innerHTML);
console.log(p.innerText); // 表示獲取標(biāo)簽之間的普通文本
}
// 按照name獲取元素
function testByName() {
// 對象數(shù)組
var ho = document.getElementsByName("hobby");
console.log(ho);
for(var i = 0; i <= ho.length - 1; i++) {
console.log(ho[i].value);
}
}
// 按照標(biāo)簽名獲取元素
function testByTagName() {
// 對象數(shù)組
var inputArr = document.getElementsByTagName("input");
for(var i = 0; i < inputArr.length; i++) {
if(inputArr[i].type == "text") {
console.log("text類型");
} else if(inputArr[i].type == "checkbox") {
if(inputArr[i].checked) {
console.log(inputArr[i].value);
}
}
}
}
// 按照class屬性獲取元素
function testByClass() {
// 對象數(shù)組
var ps = document.getElementsByClassName("para");
console.log(ps[0].innerHTML);
ps[0].innerHTML += "這是一段新的文本";
}
</script>
創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)
? 很多時(shí)候我們想要在某個(gè)位置插入一個(gè)新的節(jié)點(diǎn)外永，此時(shí)我們首先需要有一個(gè)節(jié)點(diǎn)存在，可以通過以下幾種方式創(chuàng)建新節(jié)點(diǎn)拧咳。
創(chuàng)建節(jié)點(diǎn)
| 方法 | 描述 |
|---|---|
| createElement() | 創(chuàng)建一個(gè)新的節(jié)點(diǎn)伯顶，需要傳入節(jié)點(diǎn)的標(biāo)簽名稱，返回創(chuàng)建的元素對象 |
| createTextNode() | 創(chuàng)建一個(gè)文本節(jié)點(diǎn)，可以傳入文本內(nèi)容 |
| innerHTML | 也能達(dá)到創(chuàng)建節(jié)點(diǎn)的效果祭衩，直接添加到指定位置了 |
插入節(jié)點(diǎn)
| 方法 | 描述 |
|---|---|
| write() | 將任意的字符串插入到文檔中 |
| appendChild() | 向元素中添加新的子節(jié)點(diǎn)灶体，作為最后一個(gè)子節(jié)點(diǎn) |
| insertBefore() | 向指定的已有的節(jié)點(diǎn)之前插入新的節(jié)點(diǎn)newItem：要插入的節(jié)點(diǎn)exsitingItem：參考節(jié)點(diǎn) 需要參考父節(jié)點(diǎn) |
<button onclick="add()">添加段落</button>
<div id="container"></div>
<script type="text/javascript">
function add(){
var container = document.getElementById('container')
var paragraph = document.createElement('p');
var txt = document.createTextNode('hello')
paragraph.appendChild(txt)
container.appendChild(paragraph)
}
</script>
添加 "段落、圖片掐暮、文本框蝎抽、選項(xiàng)"
<body>
<button onclick="addPara();">添加段落</button>
<button onclick="addImg();">添加圖片</button>
<button onclick="addTxt();">添加文本框</button>
<button onclick="addOptions()">添加選項(xiàng)</button>
<select name="music">
<option value="-1">你心內(nèi)的一首歌</option>
<option value="0">南山南</option>
<option value="1">喜歡你</option>
</select>
<hr />
<div id = "container"></div>
</body>
<script type="text/javascript">
// 添加p節(jié)點(diǎn)
function addPara(){
// 獲取容器
var container =document.getElementById("container");
// 創(chuàng)建段落<p></p>
var p =document.createElement('p');
// 第一種方式
// 創(chuàng)建文本節(jié)點(diǎn)
var txt=document.createTextNode("以后的你會(huì)感謝現(xiàn)在努力的你");
// 將txt節(jié)點(diǎn)追加到p節(jié)點(diǎn)中
p.appendChild(txt);
// 將p節(jié)點(diǎn)追加到container節(jié)點(diǎn)中
container.appendChild(p);
/*
// 第二種方式
// 向p節(jié)點(diǎn)中添加內(nèi)容
p.innerHTML = "以后的你會(huì)感謝現(xiàn)在努力的你";
// 將p節(jié)點(diǎn)追加到container節(jié)點(diǎn)中
container.appendChild(p);
*/
/*
// 第三種方式
// 將字符串類型的p標(biāo)簽內(nèi)容添加到container中，不會(huì)添加多次
var str = "<p>以后的你會(huì)感謝現(xiàn)在努力的你</p>";
container.innerHTML = str;
*/
}
// 添加圖片
function addImg(){
// 創(chuàng)建圖片
var img = document.createElement("img") ;
/*
// 設(shè)置屬性第一種方式
// 設(shè)置img標(biāo)簽的src屬性
// img.src ="http://www.baidu.com/img/bd_logo1.png";
*/
// 設(shè)置屬性第二種方式
// setAttribute() 方法添加指定的屬性路克，并為其賦指定的值樟结。
// 設(shè)置img的src屬性
img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
img.style.width = '300px';
img.style.height = '200px';
// 獲取容器
var container =document.getElementById("container");
// 將img節(jié)點(diǎn)追加到container中。
container.appendChild(img);
}
// 添加文本框
function addTxt(){
// 創(chuàng)建文本框
var txt =document.createElement("input");
/*
// 設(shè)置類型第一種方式
txt.type = "text";
txt.value = "添加成功";
*/
// 設(shè)置類型第二種方式
txt.setAttribute('type', 'text');
txt.setAttribute('value', '添加成功');
/*
* txt.type = 'password'
* txt.value = '123'
*/
// 獲取容器
var container =document.getElementById("container");
// 將txt節(jié)點(diǎn)追加到container中精算。
container.appendChild(txt);
}
// 添加下拉框的選項(xiàng)
function addOptions(){
// 第一種方式
/*
// 創(chuàng)建下拉項(xiàng)
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "油菜花" ;
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加 下拉項(xiàng)
sel.appendChild(option);
*/
// 第二種方式:
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "不該" ;
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加下拉項(xiàng)
sel.options.add(option);
// 第三種方式: 添加下拉項(xiàng)
var sel = document.getElementsByTagName("select")[0];
sel.innerHTML += "<option value = '2'>英雄</option>" ;
}
</script>
間接查找節(jié)點(diǎn)
| 方法|屬性 | 描述 |
|---|---|
| childNodes | 返回元素的一個(gè)子節(jié)點(diǎn)的數(shù)組 |
| firstChild | 返回元素的第一個(gè)子節(jié)點(diǎn) |
| lastChild | 返回元素的最后一個(gè)子節(jié)點(diǎn) |
| nextSibling | 返回元素的下一個(gè)兄弟節(jié)點(diǎn) |
| parentNode | 返回元素的父節(jié)點(diǎn) |
| previousSibling | 返回元素的上一個(gè)兄弟節(jié)點(diǎn) |
刪除節(jié)點(diǎn)
| 方法|屬性 | 描述 |
|---|---|
| removeChild() | 從元素中移除子節(jié)點(diǎn) |
<script type="text/javascript">
function delNode(){
var programmer =document.getElementById("programmer");
// 從父元素中刪除節(jié)點(diǎn)瓢宦，獲取要?jiǎng)h除對象的父元素，然后從父元素中刪除該對象
programmer.parentNode.removeChild(programmer);
}
</script>
<body>
<span id="programmer">程序猿</span>
<a href="javascript:void(0)" onclick="delNode();">刪除</a>
</body>
表單
? 表單是我們頁面向后臺(tái)傳輸數(shù)據(jù)的一種非常常見的方式灰羽，在進(jìn)行數(shù)據(jù)發(fā)送（請求發(fā)出）之前驮履，我們應(yīng)該現(xiàn)在頁面進(jìn)行一系列數(shù)據(jù)合法性的驗(yàn)證，節(jié)省不必要的錯(cuò)誤數(shù)據(jù)的傳輸廉嚼，以及提高用戶的體驗(yàn)度玫镐。
獲取表單
前兩種常用
1、document.表單名稱
2前鹅、document.getElementById(表單 id);
3摘悴、document.forms[表單名稱]
4、document.forms[索引]; //從 0 開始
例如：
<body>
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
//四種方式
var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);
</script>
獲取表單元素
獲取input元素
? 如 text password hidden textarea等舰绘，前兩種常用蹂喻。
1)、通過 id 獲任媸佟：document.getElementById(元素 id);
2)口四、通過 form.名稱形式獲取: myform.元素名稱; name屬性值
3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)秦陋、通過 tagName 數(shù)組 :document.getElementsByTagName('input')[索引] // 從0開始
<body>
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隱藏域" />
個(gè)人說明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >獲取元素內(nèi)容</button>
</form>
</body>
<script>
function getTxt(){
var uno = document.getElementById("uno");
var uname = myform.uname;
console.log(uname + "--------");
var upwd = document.getElementsByTagName('input')[1] ;
var intro = document.getElementsByName("intro")[0];
console.log(uno.value +"蔓彩，"+ uname.value +"，"+ upwd.value +"驳概，"+ intro.value);
}
</script>
獲取單選按鈕
? 前提：將一組單選按鈕設(shè)置相同的name屬性值
? (1)獲取單選按鈕組：
document.getElementsByName("name屬性值");
(2)遍歷每個(gè)單選按鈕赤嚼，并查看單選按鈕元素的checked屬性
? 若屬性值為true表示被選中，否則未被選中
? 選中狀態(tài)設(shè)定： checked='checked' 或 checked='true' 或 checked
? 未選中狀態(tài)設(shè)定： 沒有checked屬性 或 checked='false'
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
</form>
<script type="text/javascript">
var radios = document.getElementsByName('rad');
//radios[0].checked = 'checked'
for(var i = 0; i<radios.length; i++){
console.log(radios[i].checked + '---' + radios[i].value)
}
</script>
獲取多選按鈕
? 操作方式與單選同理顺又，不同之處在于可以多選
var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){
if(ufav[i].checked){
favstr += ufav[i].value+",";
}
}
favstr = favstr.substr(0,favstr.length-1);
獲取下拉選項(xiàng)
? （1）獲取 select 對象：
var ufrom = document.getElementById("ufrom");
? （2）獲取選中項(xiàng)的索引：
var idx = ufrom.selectedIndex;
? （3）獲取選中項(xiàng) options 的 value屬性值：
var val = ufrom.options[idx].value;
? 注意：當(dāng)通過options獲取選中項(xiàng)的value屬性值時(shí)蹄皱，
? 若沒有value屬性涨薪，則取option標(biāo)簽的內(nèi)容
? 若存在value屬性影兽，則取value屬性的值
? （4）獲取選中項(xiàng) options 的 text：
var txt = ufrom.options[idx].text;
? 選中狀態(tài)設(shè)定：selected='selected'、selected=true俯萌、selected
? 未選中狀態(tài)設(shè)定：不設(shè)selected屬性
<body onload="init()">
<form id='myform' name="myform" action="" method="">
來自:
<select id="ufrom" name="ufrom">
<option value="-1" >請選擇</option>
<option value="0" selected="selected">北京</option>
<option value="1">上海</option>
</select><br />
<button type="button" id="sub" name="sub">提交</button>
</form>
</body>
<script>
function init () {
var sub = document.getElementById("sub");
sub.onclick = function () {
//獲取select對象
var ufrom = document.getElementById("ufrom");
console.log("表單對象：" + ufrom);
//獲取選中的索引
var idx = ufrom.selectedIndex;
console.log("選中項(xiàng)的索引值：" + idx);
//獲取選中項(xiàng)的value值
var val = ufrom.options[idx].value;
console.log("選中項(xiàng)的value屬性值：" + val);
//獲取選中項(xiàng)的text
var txt = ufrom.options[idx].text;
console.log("選中項(xiàng)的text：" + txt);
}
}
</script>
提交表單
? （1）使用普通button按鈕+onclick事件+事件中編寫代碼:
獲取表單.submit();
（2）使用submit按鈕 + onclick="return 函數(shù)()" +函數(shù)編寫代碼:
? 最后必須返回：return true|false;
（3）使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數(shù)();" +函數(shù)編寫代碼:
? 最后必須返回：return true|false;
<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">
<input name="test" id="uname"/><span id="msg"></span><br />
<!--通過js事件：sub()提交表單-->
<input type="button" onclick="sub();" value="提交表單1" />
<input type="submit" onclick="return sub2();" value="提交表單2" />
<input type="submit" value="提交onsubmit" /><br />
<input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg"
width="60px" height="40px" />
</form>
<script type="text/javascript">
// input的type=button，調(diào)用submit()方法提交
function sub(){
document.myform2.submit();
}
// 進(jìn)行校驗(yàn)上枕，返回值為true才能提交
function sub2(){
var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){
return true; // 提交
}
document.getElementById("msg").innerHTML = "不能空著案牢酢！１嫫肌棋恼！";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
// onsubmit事件提交
function onsub () {
var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){
return true; // 提交
}
document.getElementById("msg").innerHTML = "填寫點(diǎn)兒東西唄！(ˉ▽￣～) 切~~";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
</script>
表單校驗(yàn)
<form id='myform' name="myform">
姓名:<input type="text" id="uname" name="uname" /><br />
密碼:<input type="password" id="upwd" name="upwd" /><br />
年齡:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
愛好:<input type="checkbox" name="ufav" value="籃球"/>籃球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代碼"/>代碼<br />
來自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">請選擇</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select><br />
<div id="validate" style="color: red;"></div>
<button type="submit" onclick="return checkForm();">提交</button>
<button type="reset" onclick="resetForm();">重置</button>
</form>
/**
要求：
1分瘦、驗(yàn)證用戶名
1)不能為空
2)長度為 6-12 位
2蘸泻、驗(yàn)證密碼
1)不能為空 *
2)長度為 6-12 位
3)不能包含用戶名
3琉苇、年齡: 必須選擇 你懂得
4嘲玫、愛好: 必須選擇一項(xiàng)
5、來自: 必須選擇一項(xiàng)
滿足以上條件
1并扇、彈出所有的內(nèi)容
2去团、提交表單
否則
1、說明錯(cuò)誤原因
2穷蛹、不能提交表單
*/
// 通過id屬性值得到dom對象
function $(id) {
return document.getElementById(id);
}
// 重置表單所有元素 注意函數(shù)不能命名為 clear reset 等
function resetForm(){
// 獲取說明 div
var validate =$('validate');
validate.innerHTML ="";
}
// 表單校驗(yàn)
function checkForm () {
var flag =true;
// 獲取說明 div
var validate = $('validate');
validate.innerHTML ="";
// 1土陪、驗(yàn)證用戶名
// 1)、獲取用戶名的值
var uname = $('uname').value;
// 1)不能為空 -->后期正則處理
// 2)長度為 6-12 位
if("" === uname || uname.length == 0 ){
validate.innerHTML += "*用戶名不能為空</br>";
flag = false;
}else if(uname.length < 6 || uname.length > 12){
validate.innerHTML += "*用戶名長度在 6-12 位</br>";
flag = false;
}
// 2肴熏、驗(yàn)證密碼
var upwd = $('upwd').value;
// 1)不能為空
// 2)長度為 6-12 位
// 3)不能包含用戶名
if("" === upwd || upwd.length == 0 ){
validate.innerHTML += "*密碼不能為空</br>";
flag = false;
} else if(upwd.length < 6 ||upwd.length > 12){
validate.innerHTML += "*密碼長度在 6-12 位</br>";
flag = false;
} else if(uname.length > 0 && upwd.indexOf(uname) >= 0){
validate.innerHTML += "*密碼中不能出現(xiàn)用戶名</br>";
flag = false;
}
// 3鬼雀、年齡: 必須選擇 你懂得
var ageGroup = document.getElementsByName("uage");
var age ;
for (var i = 0; i < ageGroup.length; i++) {
if(ageGroup[i].checked){
age = ageGroup[i].value;
}
}
if(age == 0){
flag = false;
validate.innerHTML += "*小屁孩，媽媽喊你回家</br>";
}
// 4蛙吏、愛好: 必須選擇一項(xiàng)
var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){
if(ufav[i].checked){
favstr += ufav[i].value + ",";
}
}
favstr = favstr.substr(0,favstr.length-1);
if(favstr.length < 1){
flag = false;
validate.innerHTML += "*人生真無趣</br>";
}
// 5源哩、來自
var ufrom = $('ufrom');
var idx = ufrom.selectedIndex ;
var val = ufrom.options[idx].value;
var valTxt = ufrom.options[idx].text;
if(-1 == val){
flag = false;
validate.innerHTML += "*你來自火星嗎?</br>";
}
// 滿足以上條件 彈出內(nèi)容
if(flag){
var str = "";
str += "您的姓名是:" + uname + "\n";
str += "您的密碼是:" + upwd + "\n";
str += "您的年齡是:" + "可以贏取白富美了" + "\n";
str += "您的愛好是:" + favstr + "\n";
str += "您來自于:" + valTxt + "\n";
alert(str);
// 設(shè)置表單提交的地址
myform.action="http://www.baidu.com";
// 提交表單
myform.submit();
return false;
} else {
return false;
}
}
}
if(age == 0){
flag = false;
validate.innerHTML += "*小屁孩，媽媽喊你回家</br>";
}
// 4鸦做、愛好: 必須選擇一項(xiàng)
var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){
if(ufav[i].checked){
favstr += ufav[i].value + ",";
}
}
favstr = favstr.substr(0,favstr.length-1);
if(favstr.length < 1){
flag = false;
validate.innerHTML += "*人生真無趣</br>";
}
// 5励烦、來自
var ufrom = $('ufrom');
var idx = ufrom.selectedIndex ;
var val = ufrom.options[idx].value;
var valTxt = ufrom.options[idx].text;
if(-1 == val){
flag = false;
validate.innerHTML += "*你來自火星嗎?</br>";
}
// 滿足以上條件 彈出內(nèi)容
if(flag){
var str = "";
str += "您的姓名是:" + uname + "\n";
str += "您的密碼是:" + upwd + "\n";
str += "您的年齡是:" + "可以贏取白富美了" + "\n";
str += "您的愛好是:" + favstr + "\n";
str += "您來自于:" + valTxt + "\n";
alert(str);
// 設(shè)置表單提交的地址
myform.action="http://www.baidu.com";
// 提交表單
myform.submit();
return false;
} else {
return false;
}
