JS事件、Bom對象和Dom對象
主要內(nèi)容
事件
? 事件 (Event) 是 JavaScript 應(yīng)用跳動的心臟 ，進行交互，使網(wǎng)頁動起來。當我們與瀏覽器中 Web 頁面進行某些類型的交互時，事件就發(fā)生了。事件可能是用戶在某些內(nèi)容上的點擊、鼠標經(jīng)過某個特定元素或按下鍵盤上的某些按鍵。事件還可能是 Web 瀏覽器中發(fā)生的事情，比如說某個 Web 頁面加載完成，或者是用戶滾動窗口或改變窗口大小。
? 通過使用 JavaScript ，你可以監(jiān)聽特定事件的發(fā)生，并規(guī)定讓某些事件發(fā)生以對這些事件做出響應(yīng)。
作用
（1）驗證用戶輸入的數(shù)據(jù)。
（2）增加頁面的動感效果。
（3）增強用戶的體驗度
事件中的幾個名詞
事件源: 誰觸發(fā)的事件
事件名: 觸發(fā)了什么事件
事件監(jiān)聽: 誰管這個事情，誰監(jiān)視？
事件處理:發(fā)生了怎么辦
例如
闖紅燈 事件源:車 ; 事件名: 闖紅燈; 監(jiān)聽：攝像頭、交警 ; 處理:扣分罰款
單擊按鈕 事件源:按鈕; 事件名: 單擊; 監(jiān)聽:窗口 ; 處理:執(zhí)行函數(shù)
? 當我們用戶在頁面中進行的點擊動作，鼠標移動的動作，網(wǎng)頁頁面加載完成的動作等，都可以稱之為事件名稱，即：click、mousemove、load 等都是事件名稱，具體的執(zhí)行代碼處理，響應(yīng)某個事件的函數(shù)。
<body onload="loadWindow();"></body>
<script>
function loadWindow(){
alert("加載窗體");
}
</script>
事件類型
? JavaScript可以處理的事件類型為：鼠標事件、鍵盤事件、HTML事件。
? http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查
? Window 事件屬性：針對 window 對象觸發(fā)的事件（應(yīng)用到 <body> 標簽）
? Form 事件：由 HTML 表單內(nèi)的動作觸發(fā)的事件（應(yīng)用到幾乎所有 HTML 元素，但最常用在 form 元素中）
? Keyboard 事件 : 鍵盤事件
? Mouse 事件：由鼠標或類似用戶動作觸發(fā)的事件
? Media 事件：由媒介（比如視頻、圖像和音頻）觸發(fā)的事件（適用于所有 HTML 元素，但常見于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）
? 幾個常用的事件：
? <font color="red">onclick 、onblur 、onfocus 、onload 、onchange</font>
? <font color="red">onmouseover、onmouseout、onkeyup、onkeydown</font>
onload：當頁面或圖像加載完后立即觸發(fā)
onblur：元素失去焦點
onfocus：元素獲得焦點
onclick：鼠標點擊某個對象
onchange：用戶改變域的內(nèi)容
onmouseover：鼠標移動到某個元素上
onmouseout：鼠標從某個元素上離開
onkeyup：某個鍵盤的鍵被松開
onkeydown：某個鍵盤的鍵被按下
事件流和事件模型
? 我們的事件最后都有一個特定的事件源，暫且將事件源看做是HTML的某個元素，那么當一個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>
? 如果點擊了頁面中的<div>元素，那么這個click事件會按照如下順序傳播：
? 1、<div>
? 2、<body>
? 3、<html>
? 4、document
? 也就是說，click事件首先在div元素上發(fā)生，而這個元素就是我們單擊的元素。然后，click事件沿DOM樹向上傳播，在每一級節(jié)點上都會發(fā)生，直到傳播到document對象。
? 所有現(xiàn)代瀏覽器都支持事件冒泡，但在具體實現(xiàn)上還是有一些差別。
事件捕獲
? Netscape提出的另一種事件流叫做事件捕獲，事件捕獲的思想是不太具體的節(jié)點應(yīng)該更早接收到事件，而最具體的節(jié)點應(yīng)該最后接收到事件。事件捕獲的用意在于在事件到達預(yù)定目標之前捕獲它。還以前面的例子為例。那么單擊<div>元素就會按下列順序觸發(fā)click事件：
? 1、document
? 2、<html>
? 3、<body>
? 4、<div>
? 在事件捕獲過程中，document對象首先接收到click事件，然后沿DOM樹依次向下，一直傳播到事件的實際目標，即<div>元素。
? 雖然事件捕獲是Netscape唯一支持的事件流模式，但很多主流瀏覽器目前也都支持這種事件流模型。盡管“DOM2級事件”規(guī)范要求事件應(yīng)該從document對象開始時傳播，但這些瀏覽器都是從window對象開始捕獲的。
DOM 事件流
? “DOM2級事件”規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發(fā)生的是事件捕獲階段，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應(yīng)。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Z8HCWv45-1607047763074)(/圖片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');" />
? 這樣做有一些缺點，例如耦合度過高，還可能存在時差問題（當用戶點擊按鈕時，處理函數(shù)還未加載到，此時處理函數(shù)是單獨寫的一段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() 方法用于顯示可提示用戶進行輸入的對話框。
參數(shù)（可選）：
第一個參數(shù)：要在對話框中顯示的純文本。
第二個參數(shù)：默認的輸入文本。
（3）確認框: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.確認框
返回值：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)閉當前窗口。
<input type="button" value="關(guān)閉窗口" onclick="window.close();" />
時間函數(shù)
setTimeout()
? setTimeout() : 在指定的毫秒數(shù)后調(dià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);
// 時間顯示器
var timeout;
function init(){
// 拿到當前時間
var date = new Date();
var time = date.toLocaleString();
// 拿到相應(yīng)對象
var h1 = document.getElementById('h1');
// 根據(jù)需求添加樣式
if(0==date.getSeconds()){ // 當時間的秒數(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ù)或計算表達式，也可根據(jù)返回的標識用來結(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 屬性對其進行訪問。
? history對象的屬性：length，返回瀏覽器歷史列表中的 URL 數(shù)量。
? history對象的方法：
? back()：加載 history 列表中的前一個 URL。
? forward()：加載歷史列表中的下一個 URL。當頁面第一次訪問時，還沒有下一個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="前進" 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對象之一，提供了與當前窗口中加載的文檔有關(guān)的信息，還提供了一些導(dǎo)航功能。也可通過 window.location 屬性來訪問。
? location 對象的屬性 href：設(shè)置或返回完整的 URL
? location 對象的方法
? reload()：重新加載當前文檔。
? replace()：用新的文檔替換當前文檔。
<script type="text/javascript">
function openBaidu(){
// 沒有歷史記錄,用新的文檔替換當前文檔
// 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對象
? <font color="red">DOM</font>：Document Object Model 文檔對象模型
? 要實現(xiàn)頁面的動態(tài)交互效果，bom 操作遠遠不夠，需要操作 html 才是核心。如何操作 htm，就是 DOM。簡單的說，dom 提供了用程序動態(tài)控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節(jié)點樹，運行開發(fā)人員添加、移除和修改頁面的某一部分。dom 處于javascript 的核心地位上。
? 每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2NkkFYd0-1607047763079)(/圖片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元素 | <a>、<div>、<p> |
| 屬性節(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)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eOAkUrRm-1607047763085)(/圖片1fdgfh.png)]
操作元素的節(jié)點
? 當HTML文檔在被解析為一顆DOM樹以后，里面的每一個節(jié)點都可以看做是一個一個的對象，我們稱為DOM對象，對于這些對象，我們可以進行各式各樣的操作，查找到某一個或者一類節(jié)點對象，可以創(chuàng)建某種節(jié)點對象，可以在某個位置添加節(jié)點對象，甚至可以動態(tài)地刪除節(jié)點對象，這些操作可以使我們的頁面看起來有動態(tài)的效果，后期結(jié)合事件使用，就能讓我們的頁面在特定時機、特定的事件下執(zhí)行特定的變換。
獲取節(jié)點
? 在進行增、刪、改的操作時，都需要指定到一個位置，或者找到一個目標，此時我們就可以通過Document對象提供的方法，查找、定位某個對象（也就是我們說的節(jié)點）。
? <font color="red">注意：操作 dom 必須等節(jié)點初始化完畢后，才能執(zhí)行。</font>
? 處理方式兩種:
? （1）把 script 調(diào)用標簽移到html末尾即可；
? （2）使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件里的 JS。
window.onload = function () { //預(yù)加載 html 后執(zhí)行};
? 獲取方式如下：
| 方法 | 描述 |
|---|---|
| getElementById() | 根據(jù)id獲取dom對象，如果id重復(fù)，那么以第一個為準 |
| getElementsByTagName() | 根據(jù)標簽名獲取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()">按照標簽名獲取</a>
<a href="javascript:void(0);" onclick="testByClass();">按照class獲取</a>
</body>
? <font color="red">說明：href="javascript:void(0)"：偽協(xié)議，表示不執(zhí)行跳轉(zhuǎn)，而執(zhí)行指定的點擊事件。</font>
<script type="text/javascript">
// 按照id獲取元素
function testById() {
// 返回單個對象
var p = document.getElementById("p1");
console.log(p);
// 表示獲取元素開始標簽和結(jié)束標簽之間的html結(jié)構(gòu)
console.log(p.innerHTML);
console.log(p.innerText); // 表示獲取標簽之間的普通文本
}
// 按照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);
}
}
// 按照標簽名獲取元素
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é)點的標簽名稱，返回創(chuàng)建的元素對象 |
| createTextNode() | 創(chuàng)建一個文本節(jié)點，可以傳入文本內(nèi)容 |
| innerHTML | 也能達到創(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標簽內(nèi)容添加到container中，不會添加多次
var str = "<p>以后的你會感謝現(xiàn)在努力的你</p>";
container.innerHTML = str;
*/
}
// 添加圖片
function addImg(){
// 創(chuàng)建圖片
var img = document.createElement("img") ;
/*
// 設(shè)置屬性第一種方式
// 設(shè)置img標簽的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ù)的一種非常常見的方式，在進行數(shù)據(jù)發(fā)送（請求發(fā)出）之前，我們應(yīng)該現(xià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;
? 注意：當通過options獲取選中項的value屬性值時，
? 若沒有value屬性，則取option標簽的內(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();
}
// 進行校驗，返回值為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;
}
}
}
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;
}
