JS事件、Bom對象和Dom對象

時間 2020-12-09

標籤 javascript css html java ios 數組瀏覽器 app 框架 dom 欄目 JavaScript 简体版

原文原文鏈接

JS事件、Bom對象和Dom對象

主要內容

事件

事件 (Event) 是 JavaScript 應用跳動的心臟，進行交互，使網頁動起來。當咱們與瀏覽器中 Web 頁面進行某些類型的交互時，事件就發生了。事件多是用戶在某些內容上的點擊、鼠標通過某個特定元素或按下鍵盤上的某些按鍵。事件還多是 Web 瀏覽器中發生的事情，好比說某個 Web 頁面加載完成，或者是用戶滾動窗口或改變窗口大小。javascript

經過使用 JavaScript ，你能夠監聽特定事件的發生，並規定讓某些事件發生以對這些事件作出響應。css

做用

（1）驗證用戶輸入的數據。
（2）增長頁面的動感效果。
（3）加強用戶的體驗度

事件中的幾個名詞

事件源: 誰觸發的事件
事件名: 觸發了什麼事件
事件監聽: 誰管這個事情，誰監視？
事件處理:發生了怎麼辦

例如html

闖紅燈        事件源:車 ;   事件名: 闖紅燈;    監聽：攝像頭、交警 ;     處理:扣分罰款 
單擊按鈕   事件源:按鈕;   事件名: 單擊;     監聽:窗口 ;             處理:執行函數

當咱們用戶在頁面中進行的點擊動做，鼠標移動的動做，網頁頁面加載完成的動做等，均可以稱之爲事件名稱，即：click、mousemove、load 等都是事件名稱，具體的執行代碼處理，響應某個事件的函數。java

<body onload="loadWindow();"></body>
<script> function loadWindow(){
         alert("加載窗體");
    } </script>

事件類型

JavaScript能夠處理的事件類型爲：鼠標事件、鍵盤事件、HTML事件。ios

http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查數組

Window 事件屬性：針對 window 對象觸發的事件（應用到標籤）瀏覽器

Form 事件：由 HTML 表單內的動做觸發的事件（應用到幾乎全部 HTML 元素，但最經常使用在 form 元素中）app

Keyboard 事件 : 鍵盤事件框架

Mouse 事件：由鼠標或相似用戶動做觸發的事件dom

Media 事件：由媒介（好比視頻、圖像和音頻）觸發的事件（適用於全部 HTML 元素，但常見於媒介元素中，好比、、、以及）

幾個經常使用的事件：

onclick 、onblur 、onfocus 、onload 、onchange

onmouseover、onmouseout、onkeyup、onkeydown

onload：當頁面或圖像加載完後當即觸發

onblur：元素失去焦點

onfocus：元素得到焦點

onclick：鼠標點擊某個對象

onchange：用戶改變域的內容

onmouseover：鼠標移動到某個元素上

onmouseout：鼠標從某個元素上離開

onkeyup：某個鍵盤的鍵被鬆開

onkeydown：某個鍵盤的鍵被按下

事件流和事件模型

咱們的事件最後都有一個特定的事件源，暫且將事件源看作是HTML的某個元素，那麼當一個HTML元素產生一個事件時，該事件會在元素節點與根節點之間按特定的順序傳播，路徑所通過的節點都會受到該事件，這個傳播過程稱爲DOM事件流。

事件順序有兩種類型：事件捕獲 和 事件冒泡。

冒泡和捕獲其實都是事件流的不一樣表現，這二者的產生是由於IE和Netscape兩個大公司徹底不一樣的事件流概念產生的。（事件流：是指頁面接受事件的順序）IE的事件流是事件冒泡，Netscape的事件流是事件捕獲流。

事件冒泡

IE的事件流叫作事件冒泡，即事件開始時由最具體的元素接受，而後逐級向上傳播到較爲不具體的節點（文檔）。例以下面的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <div id="myDiv">Click me</div>
    </body>
</html>

若是點擊了頁面中的

元素，那麼這個click事件會按照以下順序傳播：

一、

二、

三、

四、document

也就是說，click事件首先在div元素上發生，而這個元素就是咱們單擊的元素。而後，click事件沿DOM樹向上傳播，在每一級節點上都會發生，直到傳播到document對象。

全部現代瀏覽器都支持事件冒泡，但在具體實現上仍是有一些差異。

事件捕獲

Netscape提出的另外一種事件流叫作事件捕獲，事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預約目標以前捕獲它。還之前面的例子爲例。那麼單擊

元素就會按下列順序觸發click事件：

一、document

二、

三、

四、

在事件捕獲過程當中，document對象首先接收到click事件，而後沿DOM樹依次向下，一直傳播到事件的實際目標，即

元素。

雖然事件捕獲是Netscape惟一支持的事件流模式，但不少主流瀏覽器目前也都支持這種事件流模型。儘管「DOM2級事件」規範要求事件應該從document對象開始時傳播，但這些瀏覽器都是從window對象開始捕獲的。

DOM 事件流

「DOM2級事件」規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。首先發生的是事件捕獲階段，爲截獲事件提供了機會。而後是實際的目標接收到事件。最後一個階段是冒泡階段，能夠在這個階段對事件作出響應。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hlMv6tEq-1605853002883)(/圖片1dfgh.png)]

事件處理程序

事件就是用戶或瀏覽器自身執行的某種動做。例如click、load和mouseover都是事件的名字，而響應某個事件的函數就叫作事件處理程序（或事件偵聽器）。事件處理程序的名字以「on」開頭，所以click事件的事件處理程序就是onclick，爲事件指定處理程序的方式有好幾種。

HTML 事件處理程序

某個元素支持的每種事件，均可以用一個與相應事件處理程序同名的HTML特性來指定。這個特性的值應該是可以執行的JavaScript代碼：

<input type="button" value="Press me" onclick="alert('thanks');" />

這樣作有一些缺點，例如耦合度太高，還可能存在時差問題（當用戶點擊按鈕時，處理函數還未加載到，此時處理函數是單獨寫的一段js代碼），並且在不一樣的瀏覽器上可能會有不一樣的效果。

DOM0 級事件處理程序

經過JavaScript指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。這種方式被全部現代瀏覽器所支持。這種方式首先必須取得一個要操做的對象的引用，每一個元素都有本身的事件處理程序屬性，這些屬性一般全都小寫，例如onclick，而後將這種屬性的值設爲一個函數，就能夠指定事件處理程序了。例如：

<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>

以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。並且，只能爲同一個元素的同一個事件設定一個處理程序（覆蓋），也能夠經過刪除DOM0級方法指定的事件處理程序，只要將屬性值設爲null便可：

btn.onclick = null;

DOM2 級事件處理程序

「DOM2級事件」定義了兩個方法，用於處理指定和刪除事件處理程序的操做：addEventListener()和removeEventListener()。全部DOM節點都包含這兩個方法，而且他們都接受3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值參數若是是true，則表示在捕獲階段調用事件處理程序；若是是false則表示在冒泡階段調用事件處理程序。

<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>

這種方式能夠爲同一個元素的同一個事件添加多個處理函數。還可刪除事件處理函數，注意，在刪除的時候，不能刪除匿名處理函數。

本節做業

1. 經常使用的幾種事件
2. 綁定事件的幾種方式

BOM對象

BOM的核心對象是window，它表示瀏覽器的一個實例。window對象有雙重角色，它既是經過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。這意味着在網頁中定義的任何一個對象、變量和函數，都以window做爲其Global對象，所以有權訪問parseInt()等方法。若是頁面中包含框架，則每一個框架都擁有本身的window對象，而且保存在frames集合中。在frames集合中，能夠經過數值索引（從0開始，從左至右，從上到下）或者框架的名稱來訪問相應的window對象。

Window對象方法

系統對話框

瀏覽器經過（實際是window對象的方法）alert()、confirm()、prompt()方法能夠調用系統對話框向用戶顯示消息。

（1）消息框:alert， 經常使用。
    alert() 方法用於顯示帶有一條指定消息和一個 OK 按鈕的警告框。
（2）輸入框:prompt，返回提示框中的值。
    prompt() 方法用於顯示可提示用戶進行輸入的對話框。
    參數（可選）：
       第一個參數：要在對話框中顯示的純文本。
        第二個參數：默認的輸入文本。
（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.輸入框
             返回值：輸入的內容
         * */
        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()方法既能夠導航到一個特定的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();' />

關閉窗口

window.close()：關閉窗口。

例：點擊按鈕關閉當前窗口。

<input type="button" value="關閉窗口" onclick="window.close();" />

時間函數

setTimeout()

setTimeout() : 在指定的毫秒數後調用函數或計算表達式。返回一個惟一的標識；也能夠經過返回的標識cliearTimeout(id)：來清除指定函數的執行。

var id = setTimeout(function,times);

clearTimeout(id);

示例：

<script type="text/javascript"> // 延遲3 秒後出現 alert
    function hello() { 
          alert("對不起, 要你久候"); 
    }
    setTimeout("hello()", 3000);
    
    // 時間顯示器
    var timeout;
    function init(){
           // 拿到當前時間
           var date = new Date();
           var time = date.toLocaleString();
           // 拿到相應對象
             var h1 = document.getElementById('h1');
           // 根據需求添加樣式
           if(0==date.getSeconds()){    // 當時間的秒數變成0時，顯示紅色字體
               h1.innerHTML = '<span >' + time + '</span>';
           } else {
               h1.innerHTML = time;
           }
           /*
            *     定時操做，只執行一次
                 第一個參數：執行的方法；第二個參數：定時，單位是毫秒
            * */
            setTimeout(init,1000);   // 等多少時間來執行
    }
    // window.setTimeout(init,1000);// 只執行一次 
    // 中止操做
    function stopShow () {
        clearTimeout(timeout);
    } </script>
<body onload="init();">
    <h1 id="h1"></h1>
    <button onclick="stopShow()">時間中止</button>
</body>

在times毫秒後執行function指定的方法，執行以前也能夠取消

setInteval()

setInterval():可按照指定的週期（以毫秒計）來調用函數或計算表達式，也可根據返回的標識用來結束。該方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。

var id = setInterval(function,times);

clearInterval(id);

function test(){
    console.log(".....");
}
// window是一個全局對象，經過全局對象調用setInterval()函數
window.setInterval(test,1000);

history對象

history 對象是歷史對象。包含用戶（在瀏覽器窗口中）訪問過的 URL。history 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。

history對象的屬性：length，返回瀏覽器歷史列表中的 URL 數量。

history對象的方法：

back()：加載 history 列表中的前一個 URL。

forward()：加載歷史列表中的下一個 URL。當頁面第一次訪問時，尚未下一個url。

go(number|URL): URL 參數使用的是要訪問的 URL。而 number 參數使用的是要訪問的 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對象之一，提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。也可經過 window.location 屬性來訪問。

location 對象的屬性 href：設置或返回完整的 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.href = "http://www.baidu.com";
    } </script>
<body>
    <input type="text"  value="" />
    <input type="button" value="刷新" onclick="window.location.reload();" />
    <input type="button"  value="百度" onclick="openBaidu();" />
</body>

本節做業

實現時間計時功能
JS的跳轉方式

DOM對象

DOM：Document Object Model 文檔對象模型

要實現頁面的動態交互效果，bom 操做遠遠不夠，須要操做 html 纔是核心。如何操做 htm，就是 DOM。簡單的說，dom 提供了用程序動態控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。dom 處於javascript 的核心地位上。

每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Htrz0W8v-1605853002891)(/圖片1trj.png)]

節點

加載 HTML 頁面時，Web 瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM 將這種樹型結構理解爲由節點組成，組成一個節點樹。對於頁面中的元素，能夠解析成如下幾種類型的節點：

節點類型

HTML內容

例如

文檔節點

文檔自己

整個文檔 document

元素節點

全部的HTML元素

、

屬性節點

HTML元素內的屬性

id、href、name、class

文本節點

元素內的文本

hello

註釋節點

HTML中的註釋

html --> 文檔節點

div --> 元素節點

title --> 屬性節點

測試 Div --> 文本節點

<html>
    <head>
        <title>樹!樹!處處都是樹!</title>
    </head>
    <body>
      <div title="屬性節點">測試 Div</div>
    </body>
</html>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UnSf9e8Q-1605853002898)(/圖片1fdgfh.png)]

操做元素的節點

當HTML文檔在被解析爲一顆DOM樹之後，裏面的每個節點均可以看作是一個一個的對象，咱們稱爲DOM對象，對於這些對象，咱們能夠進行各式各樣的操做，查找到某一個或者一類節點對象，能夠建立某種節點對象，能夠在某個位置添加節點對象，甚至能夠動態地刪除節點對象，這些操做可使咱們的頁面看起來有動態的效果，後期結合事件使用，就能讓咱們的頁面在特定時機、特定的事件下執行特定的變換。

獲取節點

在進行增、刪、改的操做時，都須要指定到一個位置，或者找到一個目標，此時咱們就能夠經過Document對象提供的方法，查找、定位某個對象（也就是咱們說的節點）。

注意：操做 dom 必須等節點初始化完畢後，才能執行。

處理方式兩種:

（1）把 script 調用標籤移到html末尾便可；

（2）使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件裏的 JS。

window.onload = function () { //預加載 html 後執行};

獲取方式以下：

方法

描述

getElementById()

根據id獲取dom對象，若是id重複，那麼以第一個爲準

getElementsByTagName()

根據標籤名獲取dom對象數組

getElementsByClassName()

根據樣式名獲取dom對象數組

getElementsByName()

根據name屬性值獲取dom對象數組，經常使用於多選獲取值

<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>

說明：href=「javascript:void(0)」：僞協議，表示不執行跳轉，而執行指定的點擊事件。

<script type="text/javascript"> // 按照id獲取元素
    function testById() {
        // 返回單個對象
        var p = document.getElementById("p1");
        console.log(p);
        // 表示獲取元素開始標籤和結束標籤之間的html結構
        console.log(p.innerHTML);             
        console.log(p.innerText); // 表示獲取標籤之間的普通文本
    }

    // 按照name獲取元素
    function testByName() {
        // 對象數組
        var ho = document.getElementsByName("hobby");
        console.log(ho);
        for(var i = 0; i <= ho.length - 1; i++) {
            console.log(ho[i].value);
        }
    }

    // 按照標籤名獲取元素
    function testByTagName() {
        // 對象數組
        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() {
        // 對象數組
        var ps = document.getElementsByClassName("para");
        console.log(ps[0].innerHTML);
        ps[0].innerHTML += "這是一段新的文本";
    } </script>

建立節點和插入節點

不少時候咱們想要在某個位置插入一個新的節點，此時咱們首先須要有一個節點存在，能夠經過如下幾種方式建立新節點。

建立節點

方法

描述

createElement()

建立一個新的節點，須要傳入節點的標籤名稱，返回建立的元素對象

createTextNode()

建立一個文本節點，能夠傳入文本內容

innerHTML

也能達到建立節點的效果，直接添加到指定位置了

插入節點

方法

描述

write()

將任意的字符串插入到文檔中

appendChild()

向元素中添加新的子節點，做爲最後一個子節點

insertBefore()

向指定的已有的節點以前插入新的節點newItem：要插入的節點exsitingItem：參考節點須要參考父節點

<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">你心內的一首歌</option>
        <option value="0">南山南</option>
        <option value="1">喜歡你</option>
    </select>
    <hr />
    <div id = "container"></div>
</body>

<script type="text/javascript"> // 添加p節點
    function addPara(){
        // 獲取容器
        var container =document.getElementById("container");
        // 建立段落<p></p>
        var p =document.createElement('p');      
        // 第一種方式
        // 建立文本節點
        var txt=document.createTextNode("之後的你會感謝如今努力的你");
        // 將txt節點追加到p節點中
        p.appendChild(txt);
        // 將p節點追加到container節點中
        container.appendChild(p);        
        /*
        // 第二種方式
        // 向p節點中添加內容
        p.innerHTML = "之後的你會感謝如今努力的你";
        // 將p節點追加到container節點中
        container.appendChild(p);
        */    
        /*
        // 第三種方式
        // 將字符串類型的p標籤內容添加到container中，不會添加屢次
        var str = "<p>之後的你會感謝如今努力的你</p>";
        container.innerHTML = str;
        */
    }    
    
    // 添加圖片
    function addImg(){
        // 建立圖片
        var img = document.createElement("img") ;            
        /*
        // 設置屬性第一種方式
        // 設置img標籤的src屬性
        // img.src ="http://www.baidu.com/img/bd_logo1.png";
        */        
        // 設置屬性第二種方式
        // setAttribute() 方法添加指定的屬性，併爲其賦指定的值。
        // 設置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節點追加到container中。
        container.appendChild(img);
    }    
    
    // 添加文本框
    function addTxt(){
        // 建立文本框
        var txt =document.createElement("input");    
        /*
        // 設置類型第一種方式
        txt.type = "text"; 
        txt.value = "添加成功";
        */
        // 設置類型第二種方式
        txt.setAttribute('type', 'text');
        txt.setAttribute('value', '添加成功');
        /*
         * txt.type = 'password'
         * txt.value = '123'
         */
        // 獲取容器
        var container =document.getElementById("container");
        // 將txt節點追加到container中。
        container.appendChild(txt);
    }
    
    // 添加下拉框的選項 
    function addOptions(){
        // 第一種方式
        /*
        // 建立下拉項
        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>

間接查找節點

方法|屬性

描述

childNodes

返回元素的一個子節點的數組

firstChild

返回元素的第一個子節點

lastChild

返回元素的最後一個子節點

nextSibling

返回元素的下一個兄弟節點

parentNode

返回元素的父節點

previousSibling

返回元素的上一個兄弟節點

刪除節點

方法|屬性

描述

removeChild()

從元素中移除子節點

<script type="text/javascript"> function delNode(){
        var programmer =document.getElementById("programmer");
        // 從父元素中刪除節點，獲取要刪除對象的父元素，而後從父元素中刪除該對象
        programmer.parentNode.removeChild(programmer);
    } </script>
<body>
    <span id="programmer">程序猿</span>
    <a href="javascript:void(0)" onclick="delNode();">刪除</a>
</body>

表單

表單是咱們頁面向後臺傳輸數據的一種很是常見的方式，在進行數據發送（請求發出）以前，咱們應該如今頁面進行一系列數據合法性的驗證，節省沒必要要的錯誤數據的傳輸，以及提升用戶的體驗度。

獲取表單

前兩種經常使用

一、document.表單名稱
二、document.getElementById(表單 id);
三、document.forms[表單名稱]
四、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 數組 :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();" >獲取元素內容</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>

獲取單選按鈕

前提：將一組單選按鈕設置相同的name屬性值

(1)獲取單選按鈕組：

document.getElementsByName("name屬性值");

(2)遍歷每一個單選按鈕，並查看單選按鈕元素的checked屬性

若屬性值爲true表示被選中，不然未被選中

選中狀態設定： checked=‘checked’ 或 checked=‘true’ 或 checked

未選中狀態設定：沒有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標籤的內容

若存在value屬性，則取value屬性的值

（4）獲取選中項 options 的 text：

var txt = ufrom.options[idx].text;

選中狀態設定：selected=‘selected’、selected=true、selected

未選中狀態設定：不設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 函數()" +函數編寫代碼:

最後必須返回：return true|false;

（3）使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數();" +函數編寫代碼:

最後必須返回：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，調用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)不能爲空
      2)長度爲 6-12 位
    二、驗證密碼
      1)不能爲空 *
      2)長度爲 6-12 位
      3)不能包含用戶名
    三、年齡: 必須選擇 你懂得
    四、愛好: 必須選擇一項
    五、來自: 必須選擇一項
    知足以上條件
         一、彈出全部的內容
         二、提交表單
    不然
        一、說明錯誤緣由
        二、不能提交表單
*/

// 經過id屬性值獲得dom對象
function $(id) {
    return document.getElementById(id);
}
// 重置表單全部元素 注意函數不能命名爲 clear reset 等
function resetForm(){
    // 獲取說明 div
    var validate =$('validate');
    validate.innerHTML ="";
}
// 表單校驗
function checkForm () {
    var flag =true;
    // 獲取說明 div
    var validate = $('validate');
    validate.innerHTML ="";
    // 一、驗證用戶名
    // 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;
    }
    // 二、驗證密碼
    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 += "*密碼中不能出現用戶名</br>";
        flag = false;
    }
    // 三、年齡: 必須選擇 你懂得
    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>";
    }
    // 四、愛好: 必須選擇一項
    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>";
    }
    // 五、來自
    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>";
    }
    // 知足以上條件 彈出內容
    if(flag){
        var str = "";
        str += "您的姓名是:" + uname + "n";
        str += "您的密碼是:" + upwd + "n";
        str += "您的年齡是:" + "能夠贏取白富美了" + "n";
        str += "您的愛好是:" + favstr + "n";
        str += "您來自於:" + valTxt + "n";
        alert(str);
        // 設置表單提交的地址
        myform.action="http://www.baidu.com";
        // 提交表單
        myform.submit();
        return false;
    } else {
        return false;
    }

}
}
if(age == 0){
    flag = false;
    validate.innerHTML += "*小屁孩，媽媽喊你回家</br>";
}
// 四、愛好: 必須選擇一項
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>";
}
// 五、來自
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>";
}
// 知足以上條件 彈出內容
if(flag){
    var str = "";
    str += "您的姓名是:" + uname + "n";
    str += "您的密碼是:" + upwd + "n";
    str += "您的年齡是:" + "能夠贏取白富美了" + "n";
    str += "您的愛好是:" + favstr + "n";
    str += "您來自於:" + valTxt + "n";
    alert(str);
    // 設置表單提交的地址
    myform.action="http://www.baidu.com";
    // 提交表單
    myform.submit();
    return false;
} else {
    return false;
}