主要內(nèi)容
事件
? 事件 (Event) 是 JavaScript 應(yīng)用跳動的心臟 御蒲，進(jìn)行交互衣赶，使網(wǎng)頁動起來。當(dāng)我們與瀏覽器中 Web 頁面進(jìn)行某些類型的交互時删咱，事件就發(fā)生了屑埋。事件可能是用戶在某些內(nèi)容上的點擊、鼠標(biāo)經(jīng)過某個特定元素或按下鍵盤上的某些按鍵痰滋。事件還可能是 Web 瀏覽器中發(fā)生的事情摘能，比如說某個 Web 頁面加載完成续崖，或者是用戶滾動窗口或改變窗口大小。
? 通過使用 JavaScript 团搞，你可以監(jiān)聽特定事件的發(fā)生严望，并規(guī)定讓某些事件發(fā)生以對這些事件做出響應(yīng)。
作用
（1）驗證用戶輸入的數(shù)據(jù)逻恐。
（2）增加頁面的動感效果像吻。
（3）增強(qiáng)用戶的體驗度
事件中的幾個名詞
事件源: 誰觸發(fā)的事件
事件名: 觸發(fā)了什么事件
事件監(jiān)聽: 誰管這個事情，誰監(jiān)視复隆？
事件處理:發(fā)生了怎么辦
例如
闖紅燈 事件源:車 ; 事件名: 闖紅燈; 監(jiān)聽：攝像頭拨匆、交警 ; 處理:扣分罰款
單擊按鈕 事件源:按鈕; 事件名: 單擊; 監(jiān)聽:窗口 ; 處理:執(zhí)行函數(shù)
? 當(dāng)我們用戶在頁面中進(jìn)行的點擊動作，鼠標(biāo)移動的動作挽拂，網(wǎng)頁頁面加載完成的動作等惭每，都可以稱之為事件名稱，即：click亏栈、mousemove台腥、load 等都是事件名稱，具體的執(zhí)行代碼處理绒北，響應(yīng)某個事件的函數(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)用到 標(biāo)簽）
? Form 事件：由 HTML 表單內(nèi)的動作觸發(fā)的事件（應(yīng)用到幾乎所有 HTML 元素，但最常用在 form 元素中）
? Keyboard 事件 : 鍵盤事件
? Mouse 事件：由鼠標(biāo)或類似用戶動作觸發(fā)的事件
? Media 事件：由媒介（比如視頻储藐、圖像和音頻）觸發(fā)的事件（適用于所有 HTML 元素俱济，但常見于媒介元素中嘶是，比如 、、[圖片上傳失敗...(image-d1a056-1608883658425)]
田轧、 以及 ）
? 幾個常用的事件：
? onclick 儒洛、onblur 、onfocus 希太、onload 克饶、onchange
? onmouseover、onmouseout誊辉、onkeyup矾湃、onkeydown
onload：當(dāng)頁面或圖像加載完后立即觸發(fā)
onblur：元素失去焦點
onfocus：元素獲得焦點
onclick：鼠標(biāo)點擊某個對象
onchange：用戶改變域的內(nèi)容
onmouseover：鼠標(biāo)移動到某個元素上
onmouseout：鼠標(biāo)從某個元素上離開
onkeyup：某個鍵盤的鍵被松開
onkeydown：某個鍵盤的鍵被按下
事件流和事件模型
? 我們的事件最后都有一個特定的事件源，暫且將事件源看做是HTML的某個元素堕澄，那么當(dāng)一個HTML元素產(chǎn)生一個事件時邀跃，該事件會在元素節(jié)點與根節(jié)點之間按特定的順序傳播霉咨，路徑所經(jīng)過的節(jié)點都會受到該事件，這個傳播過程稱為DOM事件流拍屑。
? 事件順序有兩種類型：**事件捕獲 **和 事件冒泡途戒。
? 冒泡和捕獲其實都是事件流的不同表現(xiàn)，這兩者的產(chǎn)生是因為IE和Netscape兩個大公司完全不同的事件流概念產(chǎn)生的僵驰。（事件流：是指頁面接受事件的順序）IE的事件流是事件冒泡喷斋，Netscape的事件流是事件捕獲流。
事件冒泡
? IE的事件流叫做事件冒泡蒜茴，即事件開始時由最具體的元素接受星爪，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。例如下面的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
? 如果點擊了頁面中的
元素粉私，那么這個click事件會按照如下順序傳播：
? 1移必、
? 2、
? 3毡鉴、
? 4崔泵、document
? 也就是說，click事件首先在div元素上發(fā)生猪瞬，而這個元素就是我們單擊的元素憎瘸。然后，click事件沿DOM樹向上傳播陈瘦，在每一級節(jié)點上都會發(fā)生幌甘，直到傳播到document對象。
? 所有現(xiàn)代瀏覽器都支持事件冒泡痊项，但在具體實現(xiàn)上還是有一些差別锅风。
事件捕獲
? Netscape提出的另一種事件流叫做事件捕獲，事件捕獲的思想是不太具體的節(jié)點應(yīng)該更早接收到事件鞍泉，而最具體的節(jié)點應(yīng)該最后接收到事件皱埠。事件捕獲的用意在于在事件到達(dá)預(yù)定目標(biāo)之前捕獲它。還以前面的例子為例咖驮。那么單擊
元素就會按下列順序觸發(fā)click事件：
? 1边器、document
? 2、
? 3托修、
? 4忘巧、
? 在事件捕獲過程中，document對象首先接收到click事件睦刃，然后沿DOM樹依次向下砚嘴，一直傳播到事件的實際目標(biāo)，即
元素。
? 雖然事件捕獲是Netscape唯一支持的事件流模式际长，但很多主流瀏覽器目前也都支持這種事件流模型婆誓。盡管“DOM2級事件”規(guī)范要求事件應(yīng)該從document對象開始時傳播，但這些瀏覽器都是從window對象開始捕獲的也颤。
DOM 事件流
? “DOM2級事件”規(guī)定的事件流包括三個階段：事件捕獲階段洋幻、處于目標(biāo)階段和事件冒泡階段。首先發(fā)生的是事件捕獲階段翅娶，為截獲事件提供了機(jī)會文留。然后是實際的目標(biāo)接收到事件。最后一個階段是冒泡階段竭沫，可以在這個階段對事件做出響應(yīng)燥翅。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-8WOxp342-1608883565334)(/圖片1dfgh.png)]
事件處理程序
? 事件就是用戶或瀏覽器自身執(zhí)行的某種動作。例如click蜕提、load和mouseover都是事件的名字森书，而響應(yīng)某個事件的函數(shù)就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以“on”開頭谎势，因此click事件的事件處理程序就是onclick凛膏，為事件指定處理程序的方式有好幾種。
HTML 事件處理程序
? 某個元素支持的每種事件脏榆，都可以用一個與相應(yīng)事件處理程序同名的HTML特性來指定猖毫。這個特性的值應(yīng)該是能夠執(zhí)行的JavaScript代碼：
<input type="button" value="Press me" onclick="alert('thanks');" />
? 這樣做有一些缺點，例如耦合度過高须喂，還可能存在時差問題（當(dāng)用戶點擊按鈕時吁断，處理函數(shù)還未加載到，此時處理函數(shù)是單獨(dú)寫的一段js代碼）坞生，而且在不同的瀏覽器上可能會有不同的效果仔役。
DOM0 級事件處理程序
? 通過JavaScript指定事件處理程序的傳統(tǒng)方式，就是將一個函數(shù)賦值給一個事件處理程序?qū)傩允羌骸＿@種方式被所有現(xiàn)代瀏覽器所支持又兵。這種方式首先必須取得一個要操作的對象的引用，每個元素都有自己的事件處理程序?qū)傩栽吲荩@些屬性通常全都小寫寒波，例如onclick，然后將這種屬性的值設(shè)為一個函數(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>
? 以這種方式添加的事件處理程序會在事件流的冒泡階段被處理绸栅。而且级野，只能為同一個元素的同一個事件設(shè)定一個處理程序（覆蓋），也可以通過刪除DOM0級方法指定的事件處理程序，只要將屬性值設(shè)為null即可：
btn.onclick = null;
DOM2 級事件處理程序
? “DOM2級事件”定義了兩個方法蓖柔，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()辰企。所有DOM節(jié)點都包含這兩個方法，并且他們都接受3個參數(shù)：要處理的事件名况鸣、作為事件處理程序的函數(shù)和一個布爾值牢贸。最后這個布爾值參數(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>
? 這種方式可以為同一個元素的同一個事件添加多個處理函數(shù)。還可刪除事件處理函數(shù)懂酱，注意竹习，在刪除的時候，不能刪除匿名處理函數(shù)列牺。
本節(jié)作業(yè)
1\. 常用的幾種事件
2\. 綁定事件的幾種方式
BOM對象
? BOM的核心對象是window整陌，它表示瀏覽器的一個實例。window對象有雙重角色瞎领，它既是通過JavaScript訪問瀏覽器窗口的一個接口泌辫，又是ECMAScript規(guī)定的Global對象。這意味著在網(wǎng)頁中定義的任何一個對象九默、變量和函數(shù)甥郑，都以window作為其Global對象，因此有權(quán)訪問parseInt()等方法荤西。如果頁面中包含框架澜搅，則每個框架都擁有自己的window對象，并且保存在frames集合中邪锌。在frames集合中勉躺，可以通過數(shù)值索引（從0開始，從左至右觅丰，從上到下）或者框架的名稱來訪問相應(yīng)的window對象饵溅。
Window對象方法
系統(tǒng)對話框
? 瀏覽器通過（實際是window對象的方法）alert()、confirm()妇萄、prompt()方法可以調(diào)用系統(tǒng)對話框向用戶顯示消息蜕企。
（1）消息框:alert， 常用冠句。
alert() 方法用于顯示帶有一條指定消息和一個 OK 按鈕的警告框轻掩。
（2）輸入框:prompt，返回提示框中的值懦底。
prompt() 方法用于顯示可提示用戶進(jìn)行輸入的對話框唇牧。
參數(shù)（可選）：
第一個參數(shù)：要在對話框中顯示的純文本。
第二個參數(shù)：默認(rèn)的輸入文本。
（3）確認(rèn)框:confirm丐重，返回 true/false.
confirm() 方法用于顯示一個帶有指定消息和 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("沒事別瞎點崖蜜。浊仆。。");
}
}
</script>
</body>
打開窗口
? window.open()方法既可以導(dǎo)航到一個特定的URL也可以用來打開一個新的窗口
<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)閉窗口氧卧。
? 例：點擊按鈕關(guān)閉當(dāng)前窗口。
<input type="button" value="關(guān)閉窗口" onclick="window.close();" />
時間函數(shù)
setTimeout()
? setTimeout() : 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式氏堤。返回一個唯一的標(biāo)識沙绝；也可以通過返回的標(biāo)識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);
// 時間顯示器
var timeout;
function init(){
// 拿到當(dāng)前時間
var date = new Date();
var time = date.toLocaleString();
// 拿到相應(yīng)對象
var h1 = document.getElementById('h1');
// 根據(jù)需求添加樣式
if(0==date.getSeconds()){ // 當(dāng)時間的秒數(shù)變成0時鼠锈，顯示紅色字體
h1.innerHTML = '<span style="color:red">' + time + '</span>';
} else {
h1.innerHTML = time;
}
/*
* 定時操作闪檬，只執(zhí)行一次
第一個參數(shù)：執(zhí)行的方法；第二個參數(shù)：定時购笆，單位是毫秒
* */
setTimeout(init,1000); // 等多少時間來執(zhí)行
}
// window.setTimeout(init,1000);// 只執(zhí)行一次
// 停止操作
function stopShow () {
clearTimeout(timeout);
}
</script>
<body onload="init();">
<h1 id="h1"></h1>
<button onclick="stopShow()">時間停止</button>
</body>
? 在times毫秒后執(zhí)行function指定的方法粗悯，執(zhí)行之前也可以取消
setInteval()
? setInterval():可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式，也可根據(jù)返回的標(biāo)識用來結(jié)束同欠。該方法會不停地調(diào)用函數(shù)样傍，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。
var id = setInterval(function,times);
clearInterval(id);
function test(){
console.log(".....");
}
// window是一個全局對象铺遂，通過全局對象調(diào)用setInterval()函數(shù)
window.setInterval(test,1000);
history對象
? history 對象是歷史對象衫哥。包含用戶（在瀏覽器窗口中）訪問過的 URL。history 對象是 window 對象的一部分襟锐，可通過 window.history 屬性對其進(jìn)行訪問撤逢。
? history對象的屬性：length，返回瀏覽器歷史列表中的 URL 數(shù)量粮坞。
? history對象的方法：
? back()：加載 history 列表中的前一個 URL蚊荣。
? forward()：加載歷史列表中的下一個 URL。當(dāng)頁面第一次訪問時莫杈，還沒有下一個url互例。
? go(number|URL): URL 參數(shù)使用的是要訪問的 URL。而 number 參數(shù)使用的是要訪問的 URL 在 History 的 URL 列表中的相對位置姓迅。go(-1)敲霍，到上一個頁面
013-history.html
<body>
<a href="013-history-a.html">013-history-a.html</a>
<h1>我是第一個頁面</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="第一個頁面" 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è)
- 實現(xiàn)時間計時功能
- JS的跳轉(zhuǎn)方式
DOM對象
? DOM：Document Object Model 文檔對象模型
? 要實現(xiàn)頁面的動態(tài)交互效果，bom 操作遠(yuǎn)遠(yuǎn)不夠聋伦，需要操作 html 才是核心夫偶。如何操作 htm，就是 DOM觉增。簡單的說兵拢，dom 提供了用程序動態(tài)控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節(jié)點樹逾礁，運(yùn)行開發(fā)人員添加说铃、移除和修改頁面的某一部分。dom 處于javascript 的核心地位上嘹履。
? 每個載入瀏覽器的 HTML 文檔都會成為 Document 對象腻扇。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問。Document 對象是 Window 對象的一部分砾嫉，可通過 window.document 屬性對其進(jìn)行訪問幼苛。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-BShAnTK7-1608883565338)(/圖片1trj.png)]
節(jié)點
? 加載 HTML 頁面時，Web 瀏覽器生成一個樹型結(jié)構(gòu)焕刮，用來表示頁面內(nèi)部結(jié)構(gòu)舶沿。DOM 將這種樹型結(jié)構(gòu)理解為由節(jié)點組成，組成一個節(jié)點樹配并。對于頁面中的元素括荡，可以解析成以下幾種類型的節(jié)點：
| 節(jié)點類型 | HTML內(nèi)容 | 例如 |
|---|---|---|
| 文檔節(jié)點 | 文檔本身 | 整個文檔 document |
| 元素節(jié)點 | 所有的HTML元素 | 、 |
荐绝、
|
| 屬性節(jié)點 | HTML元素內(nèi)的屬性 | id一汽、href、name低滩、class |
| 文本節(jié)點 | 元素內(nèi)的文本 | hello |
| 注釋節(jié)點 | HTML中的注釋 | |
? html --> 文檔節(jié)點
? div --> 元素節(jié)點
? title --> 屬性節(jié)點
? 測試 Div --> 文本節(jié)點
<html>
<head>
<title>樹!樹!到處都是樹!</title>
</head>
<body>
<div title="屬性節(jié)點">測試 Div</div>
</body>
</html>
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-AVMijlup-1608883565345)(/圖片1fdgfh.png)]
操作元素的節(jié)點
? 當(dāng)HTML文檔在被解析為一顆DOM樹以后召夹，里面的每一個節(jié)點都可以看做是一個一個的對象，我們稱為DOM對象恕沫，對于這些對象监憎，我們可以進(jìn)行各式各樣的操作，查找到某一個或者一類節(jié)點對象婶溯，可以創(chuàng)建某種節(jié)點對象鲸阔，可以在某個位置添加節(jié)點對象偷霉，甚至可以動態(tài)地刪除節(jié)點對象，這些操作可以使我們的頁面看起來有動態(tài)的效果褐筛，后期結(jié)合事件使用类少，就能讓我們的頁面在特定時機(jī)、特定的事件下執(zhí)行特定的變換渔扎。
獲取節(jié)點
? 在進(jìn)行增硫狞、刪、改的操作時晃痴，都需要指定到一個位置残吩，或者找到一個目標(biāo)，此時我們就可以通過Document對象提供的方法倘核，查找泣侮、定位某個對象（也就是我們說的節(jié)點）。
? 注意：操作 dom 必須等節(jié)點初始化完畢后紧唱，才能執(zhí)行活尊。
? 處理方式兩種:
? （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ù)遭庶，那么以第一個為準(zhǔn) |
| getElementsByTagName() | 根據(jù)標(biāo)簽名獲取dom對象數(shù)組 |
| getElementsByClassName() | 根據(jù)樣式名獲取dom對象數(shù)組 |
| getElementsByName() | 根據(jù)name屬性值獲取dom對象數(shù)組宁仔，常用于多選獲取值 |
<body>
<p id="p1" class="para">這是一個段落<span>文本</span></p>
<p id="p1" class="para">這又是一個段落</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>
? 說明：href=“javascript:void(0)”：偽協(xié)議，表示不執(zhí)行跳轉(zhuǎn)峦睡，而執(zhí)行指定的點擊事件翎苫。
<script type="text/javascript">
// 按照id獲取元素
function testById() {
// 返回單個對象
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é)點和插入節(jié)點
? 很多時候我們想要在某個位置插入一個新的節(jié)點，此時我們首先需要有一個節(jié)點存在榨了，可以通過以下幾種方式創(chuàng)建新節(jié)點煎谍。
創(chuàng)建節(jié)點
| 方法 | 描述 |
|---|---|
| createElement() | 創(chuàng)建一個新的節(jié)點，需要傳入節(jié)點的標(biāo)簽名稱龙屉，返回創(chuàng)建的元素對象 |
| createTextNode() | 創(chuàng)建一個文本節(jié)點呐粘，可以傳入文本內(nèi)容 |
| innerHTML | 也能達(dá)到創(chuàng)建節(jié)點的效果，直接添加到指定位置了 |
插入節(jié)點
| 方法 | 描述 |
|---|---|
| write() | 將任意的字符串插入到文檔中 |
| appendChild() | 向元素中添加新的子節(jié)點转捕，作為最后一個子節(jié)點 |
| insertBefore() | 向指定的已有的節(jié)點之前插入新的節(jié)點newItem：要插入的節(jié)點exsitingItem：參考節(jié)點 需要參考父節(jié)點 |
<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>
添加 “段落作岖、圖片、文本框五芝、選項”
<body>
<button onclick="addPara();">添加段落</button>
<button onclick="addImg();">添加圖片</button>
<button onclick="addTxt();">添加文本框</button>
<button onclick="addOptions()">添加選項</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é)點
function addPara(){
// 獲取容器
var container =document.getElementById("container");
// 創(chuàng)建段落<p></p>
var p =document.createElement('p');
// 第一種方式
// 創(chuàng)建文本節(jié)點
var txt=document.createTextNode("以后的你會感謝現(xiàn)在努力的你");
// 將txt節(jié)點追加到p節(jié)點中
p.appendChild(txt);
// 將p節(jié)點追加到container節(jié)點中
container.appendChild(p);
/*
// 第二種方式
// 向p節(jié)點中添加內(nèi)容
p.innerHTML = "以后的你會感謝現(xiàn)在努力的你";
// 將p節(jié)點追加到container節(jié)點中
container.appendChild(p);
*/
/*
// 第三種方式
// 將字符串類型的p標(biāo)簽內(nèi)容添加到container中痘儡，不會添加多次
var str = "<p>以后的你會感謝現(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é)點追加到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é)點追加到container中渐尿。
container.appendChild(txt);
}
// 添加下拉框的選項
function addOptions(){
// 第一種方式
/*
// 創(chuàng)建下拉項
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "油菜花" ;
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加 下拉項
sel.appendChild(option);
*/
// 第二種方式:
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "不該" ;
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加下拉項
sel.options.add(option);
// 第三種方式: 添加下拉項
var sel = document.getElementsByTagName("select")[0];
sel.innerHTML += "<option value = '2'>英雄</option>" ;
}
</script>
間接查找節(jié)點
| 方法|屬性 | 描述 |
| --- | --- |
| childNodes | 返回元素的一個子節(jié)點的數(shù)組 |
| firstChild | 返回元素的第一個子節(jié)點 |
| lastChild | 返回元素的最后一個子節(jié)點 |
| nextSibling | 返回元素的下一個兄弟節(jié)點 |
| parentNode | 返回元素的父節(jié)點 |
| previousSibling | 返回元素的上一個兄弟節(jié)點 |
刪除節(jié)點
| 方法|屬性 | 描述 |
| --- | --- |
| removeChild() | 從元素中移除子節(jié)點 |
<script type="text/javascript">
function delNode(){
var programmer =document.getElementById("programmer");
// 從父元素中刪除節(jié)點，獲取要刪除對象的父元素矾瑰，然后從父元素中刪除該對象
programmer.parentNode.removeChild(programmer);
}
</script>
<body>
<span id="programmer">程序猿</span>
<a href="javascript:void(0)" onclick="delNode();">刪除</a>
</body>
表單
? 表單是我們頁面向后臺傳輸數(shù)據(jù)的一種非常常見的方式砖茸，在進(jìn)行數(shù)據(jù)發(fā)送（請求發(fā)出）之前，我們應(yīng)該現(xiàn)在頁面進(jìn)行一系列數(shù)據(jù)合法性的驗證脯倚，節(jié)省不必要的錯誤數(shù)據(jù)的傳輸渔彰，以及提高用戶的體驗度嵌屎。
獲取表單
前兩種常用
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="隱藏域" />
個人說明:<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)遍歷每個單選按鈕扎阶，并查看單選按鈕元素的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);
獲取下拉選項
? （1）獲取 select 對象：
var ufrom = document.getElementById("ufrom");
? （2）獲取選中項的索引：
var idx = ufrom.selectedIndex;
? （3）獲取選中項 options 的 value屬性值：
var val = ufrom.options[idx].value;
? 注意：當(dāng)通過options獲取選中項的value屬性值時东臀，
? 若沒有value屬性，則取option標(biāo)簽的內(nèi)容
? 若存在value屬性惰赋，則取value屬性的值
? （4）獲取選中項 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("選中項的索引值：" + idx);
//獲取選中項的value值
var val = ufrom.options[idx].value;
console.log("選中項的value屬性值：" + val);
//獲取選中項的text
var txt = ufrom.options[idx].text;
console.log("選中項的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)行校驗，返回值為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 = "填寫點兒東西唄吨凑！(ˉ▽￣～) 切~~";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
</script>
表單校驗
<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捍歪、驗證用戶名
1)不能為空
2)長度為 6-12 位
2、驗證密碼
1)不能為空 *
2)長度為 6-12 位
3)不能包含用戶名
3鸵钝、年齡: 必須選擇 你懂得
4糙臼、愛好: 必須選擇一項
5、來自: 必須選擇一項
滿足以上條件
1恩商、彈出所有的內(nèi)容
2变逃、提交表單
否則
1、說明錯誤原因
2怠堪、不能提交表單
*/
// 通過id屬性值得到dom對象
function $(id) {
return document.getElementById(id);
}
// 重置表單所有元素 注意函數(shù)不能命名為 clear reset 等
function resetForm(){
// 獲取說明 div
var validate =$('validate');
validate.innerHTML ="";
}
// 表單校驗
function checkForm () {
var flag =true;
// 獲取說明 div
var validate = $('validate');
validate.innerHTML ="";
// 1揽乱、驗證用戶名
// 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粟矿、驗證密碼
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陌粹、愛好: 必須選擇一項
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;
}
