Dom、事件

問題

1.dom對象的innerText和innerHTML有什么區(qū)別？

innerText：
當使用innerText讀取值時，如果有HTML標簽规辱，它會過濾掉HTML標簽肥橙，并且按照由淺入深的順序?qū)⑺械奈谋酒唇悠饋怼?/li>
當使用innerText寫入值時，結(jié)果會刪除dom對象的所有子節(jié)點鹃骂，插入包含的相應(yīng)文本值的文本節(jié)點台盯。如果有HTML標簽，它會對HTML語法字符（小于號畏线、大于號静盅、引號及和號等）進行編碼，使HTML標簽以正常的文本形式出現(xiàn)在dom對象中象踊。
舉例：

<body>
    <div id="content">
        <p>This is a <strong>test</strong> paragraph</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script>
    var oDiv = document.getElementById("content");
    console.log(oDiv.innerText);
    oDiv.innerText = "<h2>Hello & <strong>hunger</strong></h2>";

innerText運行結(jié)果

innerHTML
當使用innerHTML讀取值時温亲，返回dom對象的所有子節(jié)點（包括元素棚壁、注釋和文本節(jié)點）對應(yīng)的HTML標記。
當使用innerHTML寫入值時栈虚，會根據(jù)寫入的值創(chuàng)建新的DOM樹袖外，然后用這個DOM樹完全替換原先所有的子節(jié)點。
舉例:

<body>
    <div id="content">
        <p>This is a <strong>test</strong> paragraph</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script>
    var oDiv = document.getElementById("content");
    console.log(oDiv.innerHTML);
    oDiv.innerHTML = "<h2>Hello & <strong>hunger</strong></h2>";

innerHTML運行結(jié)果.png

那么總而言之：innerHTML是一種插入HTML字符的方法魂务，所以它會根據(jù)標簽生成DOM樹曼验，而innerText是一種插入文本的方法，所以它會過濾掉標簽粘姜。

2.elem.children和elem.childNodes的區(qū)別鬓照？

elem.children
每個節(jié)點都會有一個childNodes屬性，其中保存著一個NodeList對象孤紧。而NodeList是一個類數(shù)組豺裆，用于保存節(jié)點中所有的子節(jié)點（共12中，Element元素節(jié)點只是其中一種号显，具體哪12種可以參考深入理解DOM節(jié)點類型第一篇——12種DOM節(jié)點類型概述）臭猜。這組節(jié)點是有序的，可以通過位置來訪問押蚤。
舉例：

<body>
        <ul id="test">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    console.log(oUl.children.length);//返回7,包括3個元素節(jié)點和4個空白字符的文本節(jié)點
</script>

而elem.children只會返回節(jié)點的元素子節(jié)點蔑歌，除此之外，與elem.childNodes沒什么區(qū)別揽碘。
舉例：

<body>
        <ul id="test">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    console.log(oUl.children.length);//返回3
</script>

3.查詢元素有幾種常見的方法次屠？

querySelector 方法接受一個CSS選擇器作為參數(shù)，返回匹配該選擇器的元素節(jié)點雳刺。
如果有多個節(jié)點滿足匹配條件劫灶，則返回第一個匹配的節(jié)點。
如果沒有發(fā)現(xiàn)匹配的節(jié)點煞烫，則返回null浑此。
該方法在HTML文檔上和HTML元素上都能調(diào)用。

querySelectorAll 方法與querySelector用法類似滞详。
區(qū)別是返回一個靜態(tài)的NodeList對象（NodeList 本質(zhì)上是一個動態(tài)的 Node 集合凛俱，只是規(guī)范中對 querySelectorAll 有明確要求，規(guī)定其必須返回一個靜態(tài)的 NodeList 對象）料饥，包含所有匹配給定的選擇器的節(jié)點蒲犬。
該方法在HTML文檔上和HTML元素上都能調(diào)用。
getElementById 方法返回匹配指定的id屬性的元素節(jié)點岸啡。
如果沒有發(fā)現(xiàn)匹配的節(jié)點原叮，則返回null。
該方法只能在HTML文檔上調(diào)用，不能在HTML元素上調(diào)用奋隶。
getElementsByTagName 方法接受一個元素的標簽名為參數(shù)擂送，返回一個實時的NodeList對象，包含所有匹配的子節(jié)點唯欣。
該方法在HTML文檔上和HTML元素上都能調(diào)用嘹吨。
特殊的是，在HTML文檔中境氢，也就是使用document.getElementsByTagName時蟀拷，會返回一個HTMLCollection對象（與NodeList很像），這是一個“動態(tài)”的合集萍聊，可以實時反映 HTML文檔的變化问芬。
getElementsByClassName方法類似getElementsByTagName，只不過它接受的參數(shù)為元素的class屬性值組成的字符串寿桨。
如果參數(shù)是一個空格分隔的字符串此衅，元素的class必須符合所有的字符串之中的class才能匹配。

剛開始接觸HTMLCollection和NodeList時亭螟，對它們之間關(guān)系挺莫名其妙的炕柔，后來查閱了下資料才稍微有些明白。
具體可以參考這個回答：NodeList 和 HTMLCollection之間的關(guān)系媒佣？
簡單來說就是由于歷史原因，DOM規(guī)范分為2個部分：Core（最基礎(chǔ)的XML解析說明）和HTML（HTML的特有API解析說明）陵刹。而NodeList是屬于Core的默伍，HTMLCollection 是屬于HTML的。
它們返回的都是實時的Node合集衰琐，并且可以Node[取索引]來返回子節(jié)點也糊。
不同的是NodeList是node節(jié)點集合（即包含元素節(jié)點，文檔節(jié)點和注釋節(jié)點等12種節(jié)點類型）羡宙，而HTMLCollection只包含元素節(jié)點集合狸剃，所以在HTML文檔中，getByElement系列都是HTMLCollection集合狗热。
而有的書上說這些查詢元素的方法都是NodeList集合钞馁，有的說是HTMLCollection合集，看起來很矛盾匿刮，其實是討論的使用環(huán)境不一樣罷了僧凰。
另外動態(tài)集合雖然很實用，但是在循環(huán)它們的時候要特別小心熟丸，不要因為忽略了實時變化而造成死循環(huán)训措。
參考：深入理解javascript中的動態(tài)集合——NodeList、HTMLCollection和NamedNodeMap

4.如何創(chuàng)建一個元素？如何給元素設(shè)置屬性绩鸣？

document.createElement()方法可以創(chuàng)建新的元素節(jié)點怀大，這個方法只接受一個參數(shù)，就是創(chuàng)建元素的標簽名呀闻。
document.createTextNode()方法可以用來創(chuàng)建新的文本節(jié)點化借，這個方法方法值接受一個參數(shù)，就是要插入節(jié)點的文本总珠。
setAttribute()用來給元素設(shè)置屬性屏鳍，這個方法接收2個參數(shù)，需要設(shè)置的屬性名和屬性值局服。
舉例：

<body>
    <div></div>
</body>
<script>
    var oDiv = document.getElementsByTagName("div")[0];
    var oImg = document.createElement("img");
    var txt = document.createTextNode("my images")
    oImg.setAttribute("alt","A cup of coffee");
    oImg.setAttribute("src","images/coffee.jpg");
    oDiv.appendChild(oImg);
    oDiv.appendChild(txt);
</script>

運行結(jié)果

5.元素的添加钓瞭、刪除。

元素的添加：
appendChild()方法淫奔，讓指定元素成為某個現(xiàn)有元素的最后一個子元素山涡。
用語法表示：parent.appendChild(child);
舉例：

<body>
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    var oLi = document.createElement("li");
    oUl.appendChild(oLi);
</script>

運行結(jié)果

insertBefore()方法；讓指定的元素插入到某個現(xiàn)有元素的前面唆迁。調(diào)用此方法鸭丛，必須告訴它三件事：
1.新元素：你想插入的元素（newElement）
2.目標元素：你想把這個新元素插入到哪個元素（targetElement）之前。
3.父元素：目標元素的父元素（parentElement）
下面是該方法的調(diào)用語法：parentElment.insertBefore(newElement,targetElement)
舉例：

<body>
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    var oLi = document.createElement("li");
    oUl.insertBefore(oLi,oUl.firstChild);
</script>

運行結(jié)果

元素的刪除：
removeChild()方法：刪除某個元素唐责，不過要注意的是鳞溉，該方法不是在待刪除的元素上調(diào)用，而是在其父元素上調(diào)用鼠哥。
用語法表示就是：parent,removerChild(child).
舉例：

<body>
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    var oLi = document.querySelectorAll("li")[0];
    oUl.removeChild(oLi);
</script>

運行結(jié)果

6.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別熟菲？

DOM0級事件就是將一個函數(shù)賦值給一個事件處理程序?qū)傩浴?br> 這些屬性通常都是小寫，例如onclick朴恳，來看一個例子:

<body>
<input id="myBtn" type="button" value="點擊我"/>
</body>
<script>
    var oBtn = document.getElementById("myBtn");
    oBtn.onclick = function(){
        console.log(this.id);
    }
</script>

運行結(jié)果

使用DOM0 級方法指定的事件處理程序被認為是元素的方法抄罕，因此，這個時候的事件處理程序是在元素的作用域中運行于颖，換句話說呆贿，程序中的this引用當前元素，所以森渐，上述例子點擊按鈕后顯示的是元素的ID做入。
另外如果要刪除DOM0 級事件處理程序，只要將事件處理程序設(shè)置為null即可章母。

DOM2 級定義了兩個方法母蛛，用于處理指定和刪除事件處理程序的操作：addEventListener()和removerEventListerner(）。
所有DOM節(jié)點都包含這兩個方法乳怎，并且都接受3個參數(shù)：
1.要處理的事件名
2.作為事件處理程序的函數(shù)
3.一個布爾值彩郊，布爾值如果是true前弯，表示在捕獲階段調(diào)用事件處理程序，如果是flase秫逝，表示在冒泡階段調(diào)用事件處理程序恕出。

看例子：

<body>
<input id="myBtn" type="button" value="點擊我"/>
</body>
<script>
    var oBtn = document.getElementById("myBtn");
    oBtn.addEventListener("click",function(){
        console.log(this.id);
    },false);
    oBtn.addEventListener("click",function(){
        console.log("Hello world")
    },false);
</script>

運行結(jié)果

與DOM0 級的區(qū)別在于，使用DOM2 級方法可以添加多個事件處理程序违帆。

另外浙巫，通過addEventListener()添加的事件只能通過removeEventListener()來刪除，刪除時傳入的參數(shù)與添加時相同刷后，這也就意味著添加的匿名函數(shù)是無法刪除的的畴。

7.attachEvent與addEventListener的區(qū)別？

1.接受的參數(shù)：
attachEvent接受2個參數(shù)：事件名稱尝胆，事件處理函數(shù)丧裁，只支持事件冒泡。
addEventListener接受3個參數(shù)：事件名稱含衔，事件處理函數(shù)煎娇，布爾值

2.事件名稱：
attachEvent事件名稱前面要加“on”，如“onclick”贪染，
addEventListener不需要缓呛，如“click”。

3.作用域：
attachEvent會在全局作用域中運行杭隙，即this = window哟绊。
addEventListener是在元素作用域中運行，this指的是當前元素痰憎。

4.事件處理程序的順序：
addEventListener是按照添加順序執(zhí)行匿情。
attachEvent是按照添加順序相反執(zhí)行。

5.刪除方法：
attachEvent使用detachEvent刪除添加事件信殊。
addEventListener使用removeEventListener刪除添加事件。

6.兼容：
IE8以及IE8以下只支持attachEvent汁果，
IE9開始支持addEventListener涡拘。

8.解釋IE事件冒泡和DOM2事件傳播機制？

IE事件冒泡：指的是IE的事件流据德，事件開始時由最具體的元素（文檔嵌套層次最深的那個節(jié)點）接受鳄乏，然后逐漸向上傳播到較為不具體的節(jié)點（文檔）
DOM2的事件傳播機制：指的是DOM2級事件的事件流，包括三個階段：事件捕獲階段棘利、處于目標階段和事件冒泡階段橱野。首先發(fā)生的是事件捕獲，為截獲事件提供了機會善玫。然后是實際的目標收到事件水援。最后一個是冒泡階段，事件作出相應(yīng)。

9.如何阻止事件冒泡蜗元？如何阻止默認事件或渤？

stopPropagation()方法可以阻止事件冒泡，如果bubbles（表明事件是否冒泡）為ture奕扣，則可以使用這個方法薪鹦。
舉例：

<body>
    <div id="test">
        <input id="myBtn" type="button" value="點擊我"/>
    </div>
</body>
<script>
    var oDiv = document.getElementById("test");
    var oBtn = document.getElementById("myBtn");
    oDiv.addEventListener("click",function(){
        console.log(this.id+"我被冒泡了");
    },false);
    oBtn.addEventListener("click",function(ev){
        console.log(this.id);
        ev.stopPropagation();
    },false);
</script>

運行結(jié)果

preventDefault()方法可以阻止默認事件，如果cancelable（表明是否可取消事件的默認行為）為ture惯豆，則可以使用這個方法池磁。
舉例：

<body>
    <div id="test">
        <a id="myLink" >點擊我</a>
    </div>
</body>
<script>
    var link = document.getElementById("myLink");
    link.addEventListener("click",function(ev){
        ev.preventDefault();//取消a鏈接點擊轉(zhuǎn)跳到指定的URL的默認行為。
    },false);
</script>

運行結(jié)果

代碼

1.有如下代碼楷兽，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容地熄。不考慮兼容

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

解答代碼：
方法一，循環(huán)子元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)1</title>
</head>
<body>
<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)6班</li>
</ul>
<script>
    var oUl = document.getElementsByClassName("ct");
    var aLi = oUl[0].getElementsByTagName("li");
    for(var i=0,len=aLi.length; i<len; i++){
        aLi[i].addEventListener("click",function(){
            console.log(this.innerText);
        },false);
    }
</script>
</body>
</html>

代碼1-方法1效果預(yù)覽
方法二拄养，事件代理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)1</title>
</head>
<body>
<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)6班</li>
</ul>
<script>
    var oUl = document.getElementsByClassName("ct")[0];
    oUl.addEventListener("click",function(ev){
        console.log(ev.target.innerText)
    })
</script>
</body>
</html>

代碼1-方法2效果預(yù)覽

2.補全代碼离斩，要求：

1.當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串瘪匿；當點擊結(jié)尾添加時在<li>前端6班</li>后添加用戶輸入的非空字符串.
2.當點擊每一個元素li時跛梗，控制臺展示該元素的文本內(nèi)容。

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
//todo ...
</script>

解決代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)2</title>
</head>
<body>
<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
    var oUl = document.getElementsByClassName("ct")[0];
    var oLi = document.getElementsByTagName("li");
    var startBtn = document.getElementById("btn-add-start");
    var endBtn = document.getElementById("btn-add-end");
    var addContent = document.getElementsByClassName("ipt-add-content")[0];
    startBtn.addEventListener("click",function(){
        if(!addContent.value){
            alert("請輸入內(nèi)容");
        }
        else {
            var newLi = document.createElement("li");//注意邏輯順序棋弥，是點擊之后再創(chuàng)建一個新的li元素
            newLi.innerText = addContent.value;
            oUl.insertBefore(newLi,oLi[0]);
        }
    },false)
    endBtn.addEventListener("click",function(){
        if(!addContent.value){
            alert("請輸入內(nèi)容")
        }
        else{
            var newLi = document.createElement("li");
            newLi.innerText = addContent.value;
            oUl.appendChild(newLi);
        }
    },false)
    oUl.addEventListener("click",function(ev){
        console.log(ev.target.innerText);
    },false)
</script>
</body>
</html>

代碼2效果預(yù)覽

3.補全代碼核偿，要求：當鼠標放置在`li`元素上，會在img-preview里展示當前`li`元素的date-img對應(yīng)的圖片顽染。

<ul class="ct">
    <li data-img="1.png">鼠標放置查看圖片1</li>
    <li data-img="2.png">鼠標放置查看圖片2</li>
    <li data-img="3.png">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//todo ...
</script>

解決代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)2</title>
</head>
<body>
<ul class="ct">
    <li data-img="1.jpg">鼠標放置查看圖片1</li>
    <li data-img="2.jpg">鼠標放置查看圖片2</li>
    <li data-img="3.jpg">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var oDiv = document.querySelector(".img-preview");
        newImg = document.createElement("img");
    oDiv.appendChild(newImg);
    //方法一：循環(huán)子元素漾岳，設(shè)置事件程序
    var oLi = document.getElementsByTagName("li");
    for(var i=0,len=oLi.length; i<len; i++){
        oLi[i].onmouseover = function(){
            var source = this.getAttribute("data-img");
            newImg.setAttribute("src",source);
        }
    }

    //方法2：對父元素進行事件監(jiān)聽
//    var oUl = document.querySelector(".ct");
//    oUl.addEventListener("mouseover",function(ev){
//        var source = ev.target.getAttribute("data-img");
//        newImg.setAttribute("src",source);
//    },false);
</script>
</body>
</html>

代碼3-方法1效果預(yù)覽
 代碼3-方法2效果預(yù)覽
4.實現(xiàn)如下圖Tab切換的功能
解決代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)2</title>
    <style type="text/css">
        body,ul,li,p{
            margin:0;
            padding:0;
        }
        .clearfix:after{
            content:'';
            display:block;
            clear:both;
        }
        .tab-switch *{
            box-sizing:border-box;
        }
        .tab-switch{
            width:600px;
            margin:auto;
            margin-top:40px;
            border:1px solid #ccc;
        }
        .tab li{
            list-style-type:none;
            float:left;
            width:200px;
            height:40px;
            line-height:40px;
            text-align:center;
            cursor:pointer;
            border-right:1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        .tab li:last-child{
            border-right:none;
        }
        .tab .active {
            background-color:#eee;
        }
        .tab-switch div{
            display:none;
            height:300px;
            padding:20px;
        }
        .tab-switch .content{
            display:block;
        }
    </style>
</head>
<body>
    <div class="tab-switch">
        <ul class="tab clearfix">
            <li class="active">tab1</li>
            <li>tab2</li>
            <li>tab3</li>
        </ul>
        <div class="content">內(nèi)容1</div>
        <div>內(nèi)容2</div>
        <div>內(nèi)容3</div>
    </div>
    <script>
        var oDiv = document.querySelector(".tab-switch");
            aLi = oDiv.getElementsByTagName("li");
            aDiv = oDiv.getElementsByTagName("div");
        for(var i=0,len=aLi.length; i<len; i++){
            aLi[i].index = i;//創(chuàng)建一個index屬性來表示div的序列號。
            aLi[i].addEventListener("click",function(){
                for(var i=0,len=aLi.length; i<len; i++){
                    aLi[i].className= "";
                    aDiv[i].style.display = "none";
                }
                this.className = "active";
                aDiv[this.index].style.display="block";
            },false);
        }
    </script>
</body>
</html>

代碼4效果預(yù)覽

5.實現(xiàn)下圖的模態(tài)框功能

方法1粉寞，直接修改顯示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)5</title>
    <style type="text/css">
        #modal-1{
            display:none;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        .cover{
            position:fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color: #000;
            opacity:0.4;
            z-index:99;
        }
        .modal-ct{
            position:fixed;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width:400px;
            border-radius: 3px;
            background-color:#fff;
            z-index:100;
        }
        .header {
            position:relative;
            height:36px;
            line-height:36px;
            border-bottom: 1px solid #ccc;
        }
        h3{
            margin: 0;
            padding-left: 10px;
            font-size: 16px;
        }
        .close{
            position:absolute;
            right:10px;
            top: 10px;
            line-height:1;
        }
        .content{
            padding:10px;
        }
        .footer{
            padding:10px;
            border-top:1px solid #eee;
        }
        .footer:after{
            content:'';
            display:block;
            clear:both;
        }
        .btn{
            float:right;
            margin-left:10px;
        }
    </style>
</head>
<body>
    <button class="btn-modal">點我尼荆！</button>
    <div id="modal-1" class="modal-dialog">
        <div class="cover"></div>
        <div class="modal-ct">
            <div class="header">
                <h3>我是標題3</h3>
                <a class="close" href="#">X</a>
            </div>
            <div class="content">
                <p>我是內(nèi)容1</p>
                <p>我是內(nèi)容2</p>
            </div>
            <div class="footer">
                <a class="btn btn-confirm" href="#">確定</a>
                <a class="btn btn-cancel" href="#">取消</a>
            </div>
        </div>
    </div>
    <script>
        var btn = document.querySelector(".btn-modal"),
                modal = document.querySelector("#modal-1"),
                modalCt= document.querySelector("#modal-1 .modal-ct");
        btn.addEventListener("click",function(ev){
            ev.stopPropagation();
            showModal(modal);
        });
        modalCt.addEventListener("click",function(ev){
            ev.stopPropagation();
            if(hasClass(ev.target,"close") || hasClass(ev.target,"btn-cancel")){
                hideModal(modal);
            }
        });
        document.body.addEventListener("click",function(){
            hideModal(modal);
        })
        function showModal(modal){
            modal.style.display = "block";
        }
        function hideModal(modal) {
            modal.style.display = "none";
        }
        function hasClass(ele, cls){
            return ele.className.match(new RegExp('\\b'+cls+'\\b'));
        }
    </script>
</body>
</html>

代碼5-方法1效果預(yù)覽
方法2，通過添加和刪除類名來改變顯示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)5-2</title>
    <style type="text/css">
        a{
            text-decoration: none;
            color: #333;
        }
        .cover{
            position:fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color: #000;
            opacity:0.4;
            z-index:99;
            display:none;
        }
        .modal-ct{
            position:fixed;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width:400px;
            border-radius: 3px;
            background-color:#fff;
            z-index:100;
            display:none;
        }
        .header {
            position:relative;
            height:36px;
            line-height:36px;
            border-bottom: 1px solid #ccc;
        }
        h3{
            margin: 0;
            padding-left: 10px;
            font-size: 16px;
        }
        .close{
            position:absolute;
            right:10px;
            top: 10px;
            line-height:1;
        }
        .content{
            padding:10px;
        }
        .footer{
            padding:10px;
            border-top:1px solid #eee;
        }
        .footer:after{
            content:'';
            display:block;
            clear:both;
        }
        .btn{
            float:right;
            margin-left:10px;
        }
        .active{
            display:block;
        }
    </style>
</head>
<body>
    <button class="btn-modal">點我唧垦！</button>
    <div id="modal-1" class="modal-dialog ">
        <div class="cover"></div>
        <div class="modal-ct">
            <div class="header">
                <h3>我是標題3</h3>
                <a class="close" href="#">X</a>
            </div>
            <div class="content">
                <p>我是內(nèi)容1</p>
                <p>我是內(nèi)容2</p>
            </div>
            <div class="footer">
                <a class="btn btn-confirm" href="#">確定</a>
                <a class="btn btn-cancel" href="#">取消</a>
            </div>
        </div>
    </div>
    <script>
        var oBtn = document.querySelector(".btn-modal"),
            oCover = document.querySelector(".cover"),
            oModalCt= document.querySelector("#modal-1 .modal-ct");
        oBtn.addEventListener("click",function(ev){
            ev.stopPropagation();
            addClass(oCover,"active");
            addClass(oModalCt,"active");
        });
        oModalCt.addEventListener("click",function(ev){
            ev.stopPropagation();
            if(hasClass(ev.target,"close") || hasClass(ev.target,"btn-cancel")){
                removeClass(oCover,"active");
                removeClass(oModalCt,"active");
            }
        });
        document.body.addEventListener("click",function(ev){
            removeClass(oCover,"active");
            removeClass(oModalCt,"active");
        });
        function hasClass(ele, cls){
            var reg = new RegExp('\\b'+cls+'\\b','g');
            return reg.test(ele.className);
        };
        function addClass(ele, cls){
            if(!hasClass(ele,cls)){
                ele.className += " "+cls
            }
        };
        function removeClass(ele,cls){
            if(hasClass(ele,cls)){
                ele.className = ele.className.replace(cls,"")
            }
        };
    </script>
</body>
</html>

代碼5-方法2效果預(yù)覽

本文版權(quán)歸本人和饑人谷所有捅儒，轉(zhuǎn)載請注明來源。

最后編輯于：2017.12.04 04:05:20

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末振亮，一起剝皮案震驚了整個濱河市巧还，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌坊秸，老刑警劉巖麸祷，帶你破解...
沈念sama閱讀 218,036評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異褒搔，居然都是意外死亡阶牍，警方通過查閱死者的電腦和手機喷面，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,046評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來荸恕，“玉大人乖酬，你說我怎么就攤上這事∪谇螅” “怎么了咬像？”我有些...
開封第一講書人閱讀 164,411評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長生宛。經(jīng)常有香客問我县昂，道長，這世上最難降的妖魔是什么陷舅？我笑而不...
開封第一講書人閱讀 58,622評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任倒彰，我火速辦了婚禮，結(jié)果婚禮上莱睁，老公的妹妹穿的比我還像新娘待讳。我一直安慰自己，他們只是感情好仰剿，可當我...
茶點故事閱讀 67,661評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布创淡。她就那樣靜靜地躺著，像睡著了一般南吮。火紅的嫁衣襯著肌膚如雪琳彩。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,521評論 1贊 304
城市分裂傳說
那天部凑，我揣著相機與錄音露乏，去河邊找鬼。笑死涂邀，一個胖子當著我的面吹牛瘟仿，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播比勉，決...
沈念sama閱讀 40,288評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼猾骡，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了敷搪？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,200評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤幢哨，失蹤者是張志新（化名）和其女友劉穎赡勘，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捞镰，經(jīng)...
沈念sama閱讀 45,644評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡闸与，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,837評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年毙替，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片践樱。...
茶點故事閱讀 39,953評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡厂画，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出拷邢，到底是詐尸還是另有隱情袱院，我是刑警寧澤，帶...
沈念sama閱讀 35,673評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布瞭稼，位于F島的核電站忽洛，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏环肘。R本人自食惡果不足惜欲虚，卻給世界環(huán)境...
茶點故事閱讀 41,281評論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望悔雹。院中可真熱鬧复哆，春花似錦、人聲如沸腌零。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,889評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽莱没。三九已至初肉，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間饰躲，已是汗流浹背牙咏。一陣腳步聲響...
開封第一講書人閱讀 33,011評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留嘹裂，地道東北人妄壶。一個月前我還...
沈念sama閱讀 48,119評論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像寄狼，于是被迫代替她去往敵國和親丁寄。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,901評論 2贊 355

Dom、事件

問題

1.dom對象的innerText和innerHTML有什么區(qū)別？

2.elem.children和elem.childNodes的區(qū)別鬓照？

3.查詢元素有幾種常見的方法次屠？

4.如何創(chuàng)建一個元素？如何給元素設(shè)置屬性绩鸣？

5.元素的添加钓瞭、刪除。

6.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別熟菲？

7.attachEvent與addEventListener的區(qū)別？

8.解釋IE事件冒泡和DOM2事件傳播機制？

9.如何阻止事件冒泡蜗元？如何阻止默認事件或渤？

代碼

1.有如下代碼楷兽，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容地熄。不考慮兼容

2.補全代碼离斩，要求：

3.補全代碼核偿，要求：當鼠標放置在li元素上，會在img-preview里展示當前li元素的date-img對應(yīng)的圖片顽染。

5.實現(xiàn)下圖的模態(tài)框功能

推薦閱讀更多精彩內(nèi)容

3.補全代碼核偿，要求：當鼠標放置在`li`元素上，會在img-preview里展示當前`li`元素的date-img對應(yīng)的圖片顽染。