前端基礎之BOM和DOM

時間 2019-11-30

標籤前端基礎 bom dom 欄目 HTML 简体版

原文原文鏈接

核心知識點:html

1.BOM(瀏覽器窗口對象模型) DOM(文本對象模型)node

2.window對象是客戶端JavaScript最高層對象之一,屬於全局對象,通常書寫能夠省略編程

3.window對象經常使用的方法數組

　　(1)窗口對象方法瀏覽器

　　(2)子對象方法app

　　　　a.navigator對象(通常用於讀取瀏覽器信息)編程語言

　　　　b.screen對象ide

　　　　c.history對象(forward back go)函數

　　　　d.location對象(reload href)ui

4.DOM:是一套對文檔抽象和概念化的一種方法,能夠說是一個應用程序接口

5.節點種類:文檔、元素、文本、屬性、註釋

6.查找標籤：

　　a.直接查找（經過ID、className、Name、TagName）

　　b.間接查找（父-子-兄）

7.屬性節點操做方法：

　　a.attributes、getAttribute、setAttribute

8.文本節點操做方法：

　　a.修改文本信息

　　　　ele.innerText 獲取文本節點內容

　　　　ele.innerText="字符串" 修改標籤的文本信息

　　b.文檔內容（HTML內容）

　　　　ele.innerHTML 獲取文檔內容

　　　　ele.innerHTML="<h1>hao</h1>" 賦值HTML內容

9.樣式操做：

　　a.操做class類（className/calssList.[remove/add/contains/toggle]）

　　b.指定CSS操做：obj.style.backgroundColor = "red"直接指定元素進行修改

10.事件

　　a.經常使用事件（onclick onfocus onchange onkeydown onload onselect ）

　　b.事件的綁定　　　

　　　　（1）在標籤裏面直接寫on動做=func();
　　　　（2）經過JS代碼綁定事件 ele.click=function(){alert(123);}
　　　　（3）基於已經存在的父標籤來給子標籤綁定事件， --> 事件委託的方式

以前咱們已經學過了JavaScript的一些簡單的語法。可是這些簡單的語法並無和瀏覽器有任何交互，本章將介紹一些DOM和BOM的相關知識。

JavaScript分爲ECMAScript、DOM、BOM。

BOM（Browser Object Model）是指瀏覽器窗口對象模型，頂級對象是window。

DOM（Document Object Model）是指文檔對象模型，並不是一個對象。

window、document都是一個實例對象，他們都屬於Object，表示瀏覽器中打開窗口。

Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，

在調用window對象的方法和屬性時，能夠省略window對象的引用。例如：window.document.write()能夠簡寫成：document.write().

1、BOM——window對象

window對象表示一個瀏覽器窗口。

在客戶端JavaScript中，window對象是全局對象，全部的表達式都是在當前的環境中計算。

也就是說，要引用當前窗口根本不須要特殊的語法，能夠把那個窗口的屬性做爲全局變量來使用。例如，能夠只寫document，而沒必要寫window.document。

1.窗口對象經常使用方法

一樣，能夠把當前窗口對象的方法看成函數來使用，如只寫alert()，而沒必要寫window.alert()。

window窗口對象經常使用方法
方法	功能
alert()	顯示帶有一段消息和一個確認按鈕的警告框
setInterval()	按照指定的週期（以毫秒計）來調用函數或計算表達式
clearInterval()	取消由setInterval()設置的timeout
setTimeout()	在指定的毫秒數後調用函數或計算表達式
clearTimeout()	取消由setTimeout()方法設置的timeout
scrollTo()	把內容滾動到指定的座標
confirm()	顯示帶有一段消息以及確認按鈕的對話框。
prompt()	顯示可提示用戶輸入的對話框
open()	打開一個新的瀏覽器窗口或查找一個已命名的窗口
close()	關閉瀏覽器窗口

2.window的子對象

1）navigator對象

navigator.appName：Web瀏覽器全稱
navigator.appVersion：Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent：客戶端絕大部分信息
navagator.platform：瀏覽器運行所在的操做系統

navigator.appName
"Netscape"    <--通常是網景公司-->

navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36"

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36"

navigator.platform
"Win32"

navigator示例

2）screen對象（屏幕對象，不經常使用）

3）history對象

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠用來前進或後退一個頁面。

history.forward()：前進一頁
history.back：後退一頁
history.go(n)：前進n頁

4）location對象

location.href：獲取URL
location.href="URL"：跳轉到指定頁面
location.reload()：從新加載頁面

2、DOM

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。

它是一個與系統平臺和編程語言無關的接口，程序和腳本能夠經過這個接口動態地對文檔的內容、結構和樣式進行訪問和修改。

簡單來說，DOM是一種API（應用程序接口）。

JavaScript對DOM進行了實現，對應於JavaScript中的document對象，經過對象對DOM文檔進行程序級別的控制。

DOM標準規定HTML文檔中的每一個成分都是一個節點（node）：

文檔節點（document對象）：表明整個文檔
元素節點（element對象）：表明一個元素（標籤）
文本節點（text對象）：表明元素（標籤）中的文本
屬性節點（attribute對象）：表明一個屬性，元素（標籤）纔有屬性
註釋是註釋節點（comment對象）

1.查找標籤

document.getElementById
document.getElementsByName
document.getElementsByClassName
document.getElementsByTagName

<--源碼-->
<div class="c1">
    <div><p id="p1">標籤1</p></div>
    <div class="c2">標籤2</div>
    <div class="c3">標籤3</div>
</div>

<--查找-->
document.getElementById("p1")
<p id="p1">標籤1</p>
document.getElementsByClassName("c2")
[div.c2]
document.getElementsByTagName("P")
[p#p1, p1: p#p1]

查找示例

2.間接查找

命令	功能
parentNode	父節點
childNodes	全部子節點
firstChild	第一個子節點
lastChild	最後一個子節點
nextSibling	下一個兄弟節點
previousSibling	上一個兄弟節點
parentElement	父節點標籤元素
children	全部子標籤
firstElementChild	第一個子標籤元素
lastElementChild	最後一個子標籤元素
nextElementSibling	下一個兄弟標籤元素
previousElementSibling	上一個兄弟標籤元素

<--代碼-->
<hl>DOM文檔結構</hl>
<div class="c1">
    <div><p id="p1">標籤1</p></div>
    <div class="c2">標籤2</div>
    <div class="c3">標籤3</div>
</div>222
    <div class="c4">標籤4</div>

<--間接查找-->
<--獲取c1對象-->
var eleC1 = document.getElementsByClassName("c1")[0];

eleC1
<div class="c1">…</div>

<--父節點-->
eleC1.parentNode
<body>…</body>

<--全部子節點-->
eleC1.childNodes
(7) [text, div, text, div.c2, text, div.c3, text]

<--第一個子節點-->
eleC1.firstChild
#text

<--最後一個子節點-->
eleC1.lastChild
#text

<--下一個兄弟節點-->
eleC1.nextSibling
"222
    "

<--上一個兄弟節點-->
eleC1.previousSibling
#text

<--父節點標籤元素-->
eleC1.parentElement
<body>…</body>

<--全部子標籤-->
eleC1.children
(3) [div, div.c2, div.c3]

<--第一個子標籤元素-->
eleC1.firstElementChild
<div>…</div>

<--最後一個子標籤元素-->
eleC1.lastElementChild
<div class="c3">標籤3</div>

<--下一個兄弟標籤元素-->
eleC1.nextElementSibling
<div class="c4">標籤4</div>

<--上一個兄弟標籤元素-->
eleC1.previousElementSibling
<hl>DOM文檔結構</hl>

間接查找示例

3、document對象的屬性和操做

1.屬性節點

attributes	獲取全部標籤屬性
getAttributes()	獲取全部標籤屬性
setAttributes()	設置指定標籤屬性
removeAttribute()	移除指定標籤屬性
var s= document.creatAttribute("age") s.nodeValue = "18"	建立age屬性，設置屬性值爲18

eleC1.attributes
NamedNodeMap {0: class, length: 1}

<--查看指定的標籤屬性-->
eleC1.getAttribute("class")
"c1"

<--修改標籤屬性-->
eleC1.setAttribute("class",'c11');
undefined

eleC1.getAttribute("class")
"c11"

<--移除標籤屬性-->
eleC1.removeAttribute("class");
undefined

eleC1.attributes
NamedNodeMap {length: 0}

示例

2.文本節點

innerText	全部的純文本內容，包含子標籤中的文本
outerText	與innerText相似
innerHTML	全部子節點（包括元素、註釋與文本節點）
outerHTML	返回自身節點與全部子節點

textContent	與innerText相似，返回的內容帶樣式
data	文本內容
length	文本長度
createTextNode()	建立文本
normalize()	刪除文本與文本之間的空白
splitText()	分割
appendData()	追加
deleteData(offset,count)	從offset指定的位置開始刪除count個字符
insertDara(offset,text)	在offset指定的位置插入text
replaceDate(offset,count,text)	替換，從offset開始到offscount處的文本被text替換
substringData(offset,count)	提取從offset開始到offscount處的文本

注意：加粗的部分爲經常使用的部分

eleC1.innerText
"標籤1

標籤2
標籤3
"
eleC1.outerText
"標籤1

標籤2
標籤3
"
eleC1.innerHTML
"
    <div><p id="p1">標籤1</p></div>
    <div class="c2" style="color: #CC0000">標籤2</div>
    <div class="c3">標籤3</div>
"
eleC1.outerHTML
"<div class="c1">
    <div><p id="p1">標籤1</p></div>
    <div class="c2" style="color: #CC0000">標籤2</div>
    <div class="c3">標籤3</div>
</div>"

經常使用方法舉例

3.樣式操做

1）操做class類

className：獲取全部樣式類名（字符串）
classList.remove(cls)：刪除指定類
classList.add(cls)：添加類
classList.contains(cls)：存在返回true，不然返回false
classList.toggle(cls)：存在就刪除，不然就添加

eleC1.classList
(4) ["c1", "c12", "c13", "c14", value: "c1 c12 c13 c14"]
eleC1.classList.remove("c13")
undefined
eleC1.classList
(3) ["c1", "c12", "c14", value: "c1 c12 c14"]
eleC1.classList.add("c15");
undefined
eleC1.classList
(4) ["c1", "c12", "c14", "c15", value: "c1 c12 c14 c15"]
eleC1.classList.contains("c14");
true
eleC1.classList.toggle("c16");
true
eleC1.classList
(5) ["c1", "c12", "c14", "c15", "c16", value: "c1 c12 c14 c15 c16"]

示例

實例1:來回切換的功能的實現

    <style>
        .c1 {
            height: 300px;
            width: 300px;
            border-radius: 150px;
            background-color: red;
        }
        .c2 {
            height: 300px;
            width: 300px;
            border-radius: 150px;
            background-color: yellow;
        }
    </style>
    <script>
        function change() {
            //找標籤，改變顏色
             var d1 = document.getElementById("d1");
             //有這個屬性就刪除，沒有就添加，這樣就能實現無限切換
            d1.classList.toggle("c2")
        }
    </script>
</head>
<body>
    <div id="d1" class="c1"></div>
    <input type="button" value="切換" onclick=change()>
</body>
</html>

兩個顏色隨意切換

效果:

點擊切換

能夠無限切換,只是暫時改變對象的屬性

實例2:簡單菜單打印:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        .left {
            position: fixed;
            left: 0;
            top: 0;
            width: 20%;
            background-color: #2559a2;
            height: 100%;
        }

        .right {
            width: 80%;
        }
        .tital {
            text-align: center;
            padding: 8px 15px;
            border-bottom: 1px solid red;
        }

        .content > div {
            padding: 7px;
            background-color: rebeccapurple;
            color: white;
            border-bottom: 1px solid black;
        }

        .hide {
            display: none;
        }
    </style>
    <script>
        //定義一個函數
        function show(ths) {
            //隱藏全部的.content標籤  --> classList.add("hide")
            //1.找標籤（全部.content標籤），經過class找
            var contentEles = document.getElementsByClassName("content");
            //節點對象屬性
            //遍歷上面的標籤數組
            for (var i = 0; i < contentEles.length; i++) {
                contentEles[i].classList.add("hide")
            }

            //如何讓函數知道我點的那個菜單（傳參數）
            //顯示我下面的content標籤 -->classlist.remove("hide")
            //1.找這個標籤下面的content標籤，經過查找兄弟標籤的方法來進行
            var nextEle = ths.nextElementSibling;
            //2.顯示這個content標籤
            //有就刪除，沒有就添加
            nextEle.classList.toggle("hide");
            console.log(nextEle)
        }
    </script>
</head>
<body>
<div class="left">
    <div class="item1">
        <div class="tital" onclick="show(this)">菜單一</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
    <!--總結一下思路，當你點擊一個菜單的時候，它會把全部content隱藏-->
    <!--而後根據你點的，查找他們下面的content，然他們顯示出來-->
    <div class="item2">
        <div class="tital" onclick="show(this)">菜單二</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>

    <div class="item3">
        <div class="tital" onclick="show(this)">菜單三</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
</div>
<div class="right"></div>
</body>
</html>

簡單的菜單打印

效果:指到誰顯示誰

2)指定CSS操做

object.style.backgroundColor="green";

JS操做CSS屬性的規律

(1).對於沒有中橫線的CSS屬性通常直接使用style屬性名便可.如:

obj.style.width
obj.style.left
obj.style.position

(2)對於含有中橫線的CSS屬性,將中橫線後面的第一個字母換成大寫便可:

obj.style.marginTop
obj.style.borderLeftWidth

4.事件

HTML DOM使JavaScript有能力對HTML事件作出反應。

咱們能夠在事件發生時執行Javascript，好比當用戶在HTML元素上點擊時。

命令	功能
onclick	單擊對象觸發
ondblclick	雙擊對象觸發
ofocus	元素得到焦點
onblur	元素失去焦點
onchange	域的內容被改變
onkeydown	某個鍵盤按鍵被按下
onkeypress	某個鍵盤按鍵被按下並鬆開
onkeyup	某個鍵盤按鍵被鬆開
onload	進入或離開界面
onselect	文本框中的文本被選中
onsubmit	確認按鈕被點擊，使用的對象是form
onmousedown	鼠標按鈕被按下
onmousemove	鼠標被移到
onmouseout	鼠標從某個元素移開
onmouseover	鼠標移到某個元素之上

（1）onclick：當用戶點擊某個對象時調用的事件句柄。

ondblclick：當用戶雙擊某個對象時調用的事件句柄。

例1：當用戶在<h1>元素上點擊時，會改變其內容：

<!--點擊文本以後就會彈出來一個框，它是直接調用了一個函數-->
<hl onclick="f1();">請點擊該文本</hl>
<script>
    function f1() {
        alert("你好！")
    }
</script>


<!-- 另外一種方式，不須要調用函數-->
<!--直接改變結果-->
<hl onclick="this.innerHTML='你好'">請點擊該文本</hl>

onclick

例2：雙擊一片區域，救護彈出內容：

<!--雙擊觸發事件--> 
   <style>
        .c1 {
            height: 300px;
            width: 300px;
            background-color: yellow;
        }
    </style>
    <script>
        function show() {
            alert(123)
        }
<body>
<div class="c1" ondblclick="show();"></div>
</body>

ondblclick

（2）onload事件

onload事件會在用戶進入或離開頁面時被觸發。

例1：當進入頁面就會彈出一個框。

<!DOCTYPE html>
<head>
    <script>
        function f1() {
            var i1Ele = document.getElementById("i1");
            alert(i1Ele);  //找到標籤，彈出框
        }
    </script>
</head>
<body onload="f1()">
<input type="text" value="哈哈" id="i1">
</body>
</html>

onload

（3）onmouseover和onmouseout事件（鼠標移動事件）

onmouseover和onmouseout事件可用於在用戶鼠標移至HTML元素上方或移除元素時觸發事件。

例1：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        .c1 {
            height: 150px;
            width: 300px;
            background-color: green;
            text-align: center;
            line-height: 150px;
            font-size: 30px;
            color: white;
        }
    </style>
</head>
<body>
<div class="c1" onmouseover="mOver(this);" onmouseout="mOut(this);">請移動鼠標</div>
<script>
    function mOver(obj) {
        obj.innerHTML="謝謝";
    }
    function mOut(obj) {
        obj.innerHTML="請把鼠標移到上面";
    }
</script>
</body>
</html>

onmousever和onmouseout

效果：

(4)onfocus和onblur

onfocus：鼠標得到焦點；onblur：鼠標失去焦點

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>姓名：
<input type="text" value="請輸入姓名" onfocus="f1(this);" onblur="f2(this);">
<script>
    function f1(ths) {
        ths.setAttribute("value","")
    }
    function f2(ths) {
        ths.setAttribute("value","請輸入姓名")
    }
</script>
</body>
</html>

焦點

效果：

（5）onkeydown：某個鍵盤按鍵被按下

應用場景：當用戶在最後一個輸入框按下回車鍵時，表單提交

<body onkeydown="f1(event);">
<script>
    function f1(evt) {
        alert(evt.keyCode);  //按下某個鍵時，彈出某個代碼
    }
</script>
</body>

onkeydown事件

（6）onselect：在文本框種的內容被選中時發生

<body>
<input type="text" value="紅燒茄子" onselect="f1();">
<textarea name="" id="" cols="30" rows="10" onselect="f2()">
</textarea>
<script>
    function f1() {
        alert("真香啊");
    }
    function f2() {
        alert("再來一盤");
    }
</script>
</body>

onselect事件

（7）onchange：域的內容被改變

應用場景：用於表達元素，當元素內容被改變時觸發

<!--自動讓輸入的字符大寫-->
請輸入英文字符：<input type="text" id="d1" onchange="f1();">
<script>
    function f1() {
        var x = document.getElementById("d1");
        x.value=x.value.toUpperCase();
    }
</script>

onchange事件

5.文檔標籤經常使用的增刪改查

（1）增

createElement(name) 建立節點標籤
appendChild() 末尾添加節點，並返回新增節點
insertBefore() 參照節點以前插入節點，兩個參數：要插入的節點和參照節點。

示例1：

<!--已有無序列表-->
<div id="d1">
    <u1 type="disc" class="c1">
    <li>第一項</li>
    <li>第二項</li>
</u1>
</div>

原有列表

如今添加第三項

//先找到c1標籤對象
var c1Ele = document.getElementsByClassName("c1")[0]
undefined

//建立一個新的li標籤
var liEle = document.createElement("li");
undefined

//從新賦值
liEle.innerText="第三項";
"第三項"

//添加到列表之中
c1Ele.appendChild(liEle);

建立文檔標籤

根據位置來添加

<!--建立須要添加的標籤-->
var li2Ele = document.createElement("li");
undefined
li2Ele.innerText = "選項";
"選項"

<!--選取參照物-->
var li1 = c1Ele.firstElementChild;

<!--添加-->
c1Ele.insertBefore(li2Ele,li1)

根據位置添加

（2）刪：查找到要刪除的元素，獲取它的父元素，使用removeChild()方法刪除

c1Ele.lastChild
<li>第三項</li>
var ss = c1Ele.lastChild
undefined
c1Ele.removeChild(ss);
<li>第三項</li>

刪除

（3）改

　　第一種方式：使用setAttribute();方法修改屬性；

　　第二種方式：使用innerHTML屬性修改元素的內容。

綜合示例1：select聯動

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<select name="" id="s1" onclick="loadDate();">
    <option value="">請選擇省份</option>
</select>

<select name="" id="s2">
    <option value="">請選擇省份</option>
</select>

<script>  //script標籤通常寫在body標籤下面，除非是文檔加載以前就要運行的代碼要放在head標籤裏
    var data = {"河北":["保定","滄州","廊坊"],"湖南":["長沙","湘潭"],"湖北":["武漢","黃石","襄陽"]};
    //拿出全部key
    var str
    for (var key in data){
        var s = "<option>"+key+"</option>";  //使用字符串拼接的方式來建立新的標籤
        str+=s;          //整個select標籤累加
        var seEle = document.getElementById("s1");  //找到是標籤
        seEle.innerHTML = str;  //給它賦值，省份就顯示出來了
    }
    function loadDate() {
        var s2Ele = document.getElementById("s2");
        s2Ele.options.length=0;  //首先將每一個對象下的文本清空
        var indexValue = seEle.selectedIndex;  //根據點擊的元素去取索引
        var optionEles = seEle.options;   //全部的省份
        var key = optionEles[indexValue].innerText;  //獲得具體的省份
        var data2 = data[key];    //根據省份取下面的市區

        for (var i=0;i<data2.length;i++) {
            var optionEle = document.createElement("option");  //生成一個標籤
            optionEle.innerText = data2[i];  //給新的標籤賦值
            s2Ele.appendChild(optionEle);  //添加進去
        }
    }
</script>
</body>
</html>

<!--思路整理-->
給你一個多重字典，你要把它分級把其中的內容顯示出來，
能夠循環建立標籤，而後加入，最後就會把標籤顯示出來，
難點就是如何在點其中一個能顯示下面的標籤，經過什麼來練習，
能夠知道，系統取元素的時候也是用的索引

select聯動

綜合示例2：事件綁定

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<ul id="d1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>

<script>
    //傳統寫法：點擊元素，彈出表明相應元素的框
//    var liEles = document.getElementsByTagName("li");
//    for (var i=0;i<liEles.length;i++) {
//        liEles[i].onclick=function () {
//            alert(this.innerText)
//        }
//    }
    //更好的作法
    var ulEle = document.getElementById("d1");
    ulEle.onclick=function (event) {
//        console.log(event.target);
        var targetEle = event.target;
        alert(targetEle.innerText);
    }
</script>
</body>
</html>

事件綁定

綜合示例3：定時器示例（在一個input框裏面讓時間本身跳動，你說停就停，你說開始就開始）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定時器示例</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<input type="text" id="i1">
<input type="button" value="開始" onclick="start();">
<input type="button" value="結束" onclick="stop();">

<script>
    var t;
    function f1() {
        //建立一個時間對象
        var dateObj = new Date();
        //找到ID爲i1的那個對象
        var ilEle = document.getElementById("i1");
        //給它賦值
        ilEle.value = dateObj.toLocaleString();
    }
    //每隔一秒就執行一次
    function start() {
        f1();
        //只建立一個定時器，避免能同時建立多個定時器，這樣會致使停不下來
        //怎麼解決這個問題了？判斷
        if (t === undefined) {
            //指定週期來調用函數，每隔一秒來執行一次，然你感受時間本身在跳動
            t = setInterval(f1, 1000);
        }
    }
    //中止定時
    function stop() {
        //中止函數週期性調用
        clearInterval(t);
        //若是這裏不清空，下一次就開始不了
        t = undefined;
    }
</script>
</body>
</html>

定時器

綜合示例4：多個事件的綁定

若是你想在一個觸發上綁定多個事件，你也許會順序執行，可是可能你不會獲得你想要獲得的結果。

就像這樣：

<input type="button" value="點擊" id="d1">
<script>
    function f1() {
        alert("你好");
    }
    function f2() {
        alert("朋友！");
    }
    var c1Ele = document.getElementById("d1");
    c1Ele.onclick = function () {
        f1();
    };
    c1Ele.onclick = function () {
        f2();
    };
</script>

一個觸發綁定一個事件被覆蓋

你會發現只能執行一個事件，那麼該如何作才能按照你的意願來了，你應該這樣：

<input type="button" value="點擊" id="d1">
<script>
    function f1() {
        alert("你好");
    }
    function f2() {
        alert("朋友！");
    }
    var c1Ele = document.getElementById("d1");
    addEventListener("click",f1);
    addEventListener("click",f2);
</script>

一次觸發綁定多個事件

綜合示例5：表格的編輯

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>週末做業</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        table {
            text-align: center;
        }

        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 999;
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            background-color: whitesmoke;
            height: 300px;
            width: 500px;
            z-index: 1000;
            margin-left: -250px;
            margin-top: -150px;
            z-index: 1000;
        }

        .hide {
            display: none;
        }
    </style>

</head>
<body>

<input type="button" id="btn" onclick="showModal();" value="新增">
<div class="cover hide"></div>
<div class="modal hide">
    <input type="text" class="name">&nbsp;
    <input type="text" class="sex">&nbsp;
    <input type="button" value="提交" onclick="summitValue();">&nbsp;
    <input type="button" value="取消" onclick="modalCancel();">
</div>

<table border="1" width="250px">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>性別</th>
        <th>操做</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>科比</td>
        <td>男</td>
        <td><input type="button" value="編輯" onclick="edit()">&nbsp;&nbsp;<input type="button" value="刪除"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>毛線</td>
        <td>男</td>
        <td><input type="button" value="編輯" onclick="edit()">&nbsp;&nbsp;<input type="button" value="刪除"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>小鳥</td>
        <td>女</td>
        <td><input type="button" value="編輯" onclick="edit()">&nbsp;&nbsp;<input type="button" value="刪除"></td>
    </tr>
    </tbody>
</table>

<script>
    var modalEle = document.getElementsByClassName("modal")[0];
    var coverEle = document.getElementsByClassName("cover")[0];
    //輸入框對象
    var eleName = document.getElementsByClassName("name")[0];
    var eleSex = document.getElementsByClassName("sex")[0];

    //新增
    function showModal() {
        //顯示背景色
        coverEle.classList.remove("hide");
        modalEle.classList.remove("hide");
    }

    //取消
    function modalCancel() {
        coverEle.classList.add("hide");
        modalEle.classList.add("hide");
        eleName.value = "";
        eleSex.value = ""
    }

    //提交
    var val;
    var n = 4;

    function summitValue() {
        if (val === undefined) {
            //獲取tbody這個標籤
            var eleTbody = document.getElementsByTagName("tbody")[0];
            //建立45個標籤
            var newTr = document.createElement("tr");
            var new1 = document.createElement("td");
            var new2 = document.createElement("td");
            var new3 = document.createElement("td");
            var new4 = document.createElement("td");
            //賦值
            new1.innerText = n;
            new2.innerText = eleName.value;
            new3.innerText = eleSex.value;
            new4.innerHTML = "<input type=\"button\" value=\"編輯\" onclick=\"edit()\">&nbsp;&nbsp;<input type=\"button\" value=\"刪除\">"
            //添加標籤
            newTr.appendChild(new1);
            newTr.appendChild(new2);
            newTr.appendChild(new3);
            newTr.appendChild(new4);
            eleTbody.appendChild(newTr);
            n++;
        } else {
            upEles.innerText = eleSex.value;
            upUpEles.innerText = eleName.value;
            val = undefined;
        }
        modalCancel();
    }

    //編輯和刪除
    //事件綁定
    function editDel() {
        var tbodyEles = document.getElementsByTagName("tbody")[0];
        tbodyEles.onclick = function (eve) {
            var targetEle = eve.target;
            if (targetEle.value === "刪除") {
                //刪除
                var tdEles = targetEle.parentElement;
                var trEles = tdEles.parentElement;
                //找到這行的標籤，直接移除
                tbodyEles.removeChild(trEles);
            } else {
                //編輯
                showModal();
                //找到標籤，先找父標籤，而後，找到前面兩個字段的值
                var ftEles = targetEle.parentElement;
                upEles = ftEles.previousElementSibling;
                upUpEles = upEles.previousElementSibling;
                eleName.value = upUpEles.innerText;
                eleSex.value = upEles.innerText;
                //賦值以後，點擊提交又會觸發提交那個函數
                //這裏var隨便賦一個值
                val = 1;
            }
        }
    }

    editDel();
</script>
</body>
</html>

實現新增、編輯、刪除等功能

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。