久久婷婷人妻在线观看,在线天堂亚洲,一二三区在线

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

innerText：返回元素內(nèi)包含的文本內(nèi)容，在多層次的時候會按照元素由淺到深的順序拼接其內(nèi)容。
innerHTML：類似innerText，但是返回的是元素的HTML結(jié)構(gòu)，在寫入的時候會自動構(gòu)建DOM。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    測試
  </div>
  <div id="div2">
    測試
  </div>
  <script>
    var div1=document.getElementById('div1');
    var div2=document.getElementById('div2');
  </script>
</body>
</html>

innerHTML和innerText

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

elem.children：子列表元素（HTMLCollention）獲取標(biāo)簽
elem.childNodes:（NodeList）獲取所有子節(jié)點，包括空白的所有字段

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    <p>測試</p>
  </div>
  <script>
    var div1=document.getElementById('div1');
  </script>
</body>
</html>

children和childNodes

查詢元素有幾種常見的方法？

document.getElementById()：獲得id元素
document.getElementsByClassName()：獲得class元素
document.getElementsByTagName()：返回帶有指定標(biāo)簽名的對象的集合。
document.querySelector()：返回當(dāng)前文檔中第一個匹配特定選擇器的元素
document.querySelectorAll()：返回當(dāng)前文檔中匹配一個特定選擇器的所有的元素

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

創(chuàng)建元素：

createElement()：創(chuàng)建元素節(jié)點
createTextNode()：創(chuàng)建文本節(jié)點
createDocumentFragment()：生成一個DocumentFragment對象。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    
  </div>
  <script>
    var para=document.createElement('p');
    var div=document.getElementById('div1');
    div.appendChild(para);
    var text=document.createTextNode('段落');
    para.appendChild(text);
  </script>
</body>
</html>

創(chuàng)建元素

JSbin

設(shè)置元素屬性：

getAttribute()：獲取屬性
createAttribute()：生成一個新的屬性對象節(jié)點，并返回它
setAttributeNode()：添加屬性節(jié)點
setAttribute()：設(shè)置元素屬性
removeAttitbute()：刪除屬性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
   <a class='link' href="#">鏈接</a>
  </div>
  <script>
    var div=document.querySelector('#div1');
    console.log(div1.getAttribute('id'));
    var link=document.querySelector('.link');
    link.setAttribute('title','測試');
    link.removeAttribute('href');
  </script>
</body>
</html>

設(shè)置元素

JSbin

元素的添加、刪除？

newDiv.appendChild(newContent)：在元素末尾添加元素
newDiv .insertBefore(newContent，newDiv.firstChild)：在某個元素之前添加元素
newDiv.replaceChild(newElement, oldElement)：接收兩個元素，要添加的元素和要替換的元素
parentNode.removeChild(childNode)：刪除元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    <p class="para">段落</p>
    <p class='para'>段落2</p>
  </div>
  <script>
    var div1=document.querySelector('#div1');
    var text1=document.createTextNode("append");
    div1.appendChild(text1);
    var para=document.querySelectorAll('.para');
    var text2=document.createTextNode('insert');
    div1.insertBefore(text2,div1.children[0]);
    var text3=document.createTextNode("replace");
    para[0].replaceChild(text3,para[0].childNodes[0]);
    div1.removeChild(para[1]);
  </script>
</body>
</html>

元素的添加、刪除

JSbin

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

DOM0級事件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button class="btn" onclick='console.log(1)'>點擊</button>
  <script>
    var btn=document.querySelector('.btn');
    btn.onclick=function(){
      console.log('DOM0');
    };
  </script>
</body>
</html>

JSbin
綁定方式：

HTML內(nèi)聯(lián)方式
JS指定事件處理程序

DOM2級事件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button class="btn">點擊</button>
  <script>
    var btn=document.querySelector('.btn');
    btn.addEventListener('click',function(){
      console.log('DOM2');
    });
    btn.addEventListener('click',function(){
      console.log('DOM2.2');
    });
  </script>
</body>
</html>

DOM2級事件

JSbinDOM2
addEventListener接收三個參數(shù)：

事件類型
事件處理函數(shù)
布爾參數(shù)，如果是true表示在捕獲階段調(diào)用事件處理程序，如果使false則是冒泡階段處理程序，默認(rèn)是false。

DOM0級和DOM2級區(qū)別

同樣的事件，DOM2級可以綁定多種處理方式，而DOM0級綁定多種處理方式會被覆蓋
DOM2級事件可以指定是否在捕獲階段進(jìn)行程序處理

attachEvent與addEventListener的區(qū)別？

IE瀏覽器支持attachEvent，addEventListener支持多種主流瀏覽器
參數(shù)的個數(shù)不同
對this的引用不同，在attachEvent中this的環(huán)境是window，而addEventListener中this的環(huán)境是調(diào)用的元素
第一個參數(shù)意義不同，addEventListener第一個參數(shù)是事件類型（比如click，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）

解釋IE事件冒泡和DOM2事件傳播機(jī)制？

事件冒泡：從最具體的元素（事件發(fā)生的元素）接收，一層層向上傳遞到不具體的節(jié)點。所有的瀏覽器都支持事件冒泡，IE只支持事件冒泡。
DOM2事件傳播機(jī)制：DOM2事件規(guī)定的事件流包括三個階段：首先發(fā)生的是事件捕獲，為截取的事件提供機(jī)會，然后實際目標(biāo)接收事件，最后再進(jìn)行事件冒泡。

如何阻止事件冒泡？如何阻止默認(rèn)事件？

在主流瀏覽器中只要調(diào)用stopPropagation()，而在IE瀏覽器中要用cancelBubble。阻止默認(rèn)事件主流瀏覽器中使用preventDefault()，而在IE瀏覽器中要用returnValue

function stopPropagation(e){
  var event=e||window.event;//在IE瀏覽器中 事件是window.event
  if(event.stopPropagation){
    event.stopPropagation();
  }else{
    event.cancleBubble=false;//IE瀏覽器中的阻止冒泡
  }
}
function prevenDefault(e){
  var event=e||window.event;
  if(event.preventDefault){
    event.preventDefault();
  }else{
    event.returnValue=false;
  }
}

代碼

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

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

實現(xiàn)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
  </ul>
  <script>
    var ct=document.querySelector('.ct');
    ct.addEventListener('click',function(e){
      console.log(e.target.innerText);
    });
  </script>
</body>
</html>

JSbin

補(bǔ)全代碼，要求：

當(dāng)點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點擊結(jié)尾添加時在<li>前端6班</li>后添加用戶輸入的非空字符串.
當(dāng)點擊每一個元素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>

實現(xiàn)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</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 ct=document.querySelector('.ct');
  var iptAdd=document.querySelector('.ipt-add-content');
  var btnAddStart=document.querySelector('#btn-add-start');
  var btnAddEnd=document.querySelector('#btn-add-end');

  btnAddStart.addEventListener('click',function(){
    if(iptAdd.value){
      var text=document.createTextNode(iptAdd.value);
      var li=document.createElement('li');
      li.appendChild(text);
      ct.insertBefore(li,ct.children[0]);
      console.log(li.innerText);
    }
  });
  btnAddEnd.addEventListener('click',function(){
    if(iptAdd.value){
      var text=document.createTextNode(iptAdd.value);
      var li=document.createElement('li');
      li.appendChild(text);
      ct.appendChild(li);
      console.log(li.innerText);
    }
  });
  ct.addEventListener('click',function(e){
    console.log(e.target.innerText);
  });
/*
  btnAddEnd.addEventListener('click', function(){
     var li = document.createElement('li');
     li.innerText = ipt.value;
     ct.appendChild(li);
  });
*/
  </script>
</body>
</html>

JSbin

補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

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

實現(xiàn)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
    <li data-img="http://img3.imgtn.bdimg.com/it/u=2744235171,1121575194&fm=21&gp=0.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="http://img3.imgtn.bdimg.com/it/u=954554677,3720466482&fm=21&gp=0.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="http://img0.imgtn.bdimg.com/it/u=2657893920,4044129460&fm=21&gp=0.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
  var ct=document.querySelector('.ct');
  var imgPre=document.querySelector('.img-preview');
  var li=document.querySelectorAll('li');
  // for(var i=0;i<li.length;i++){
  //   li[i].addEventListener('mouseover',function(){
  //     var data=this.getAttribute('data-img');
  //     console.log(data);
  //     imgPre.innerHTML='<img src="' + data + '">';
  //   });
  // }
  ct.addEventListener('mouseover',function(e){
    var data=e.target.getAttribute('data-img');
    if(data){
      imgPre.innerHTML='<img src="'+data+'">';
    }
  });
</script>
</body>
</html>

JSbin

實現(xiàn)如下圖Tab切換的功能

tab切換

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    ul,li{
      list-style:none;
      margin:0;
      padding:0;
    }
    .clearfix:after{
      content:'';
      display:block;
      clear:both;
    }
    #tab{
      box-sizing:border-box;
      border:1px solid lightgray;
    }
    .nav{
      border-bottom:1px solid lightgray;
      text-align: center;

    }
    .nav li{
      float:left;
      width:33.1%;
      height:30px;
      line-height:30px;
      border-left:1px solid lightgray;
    }
    .nav .show{
      background-color:lightgray;
    }
    .content{
      height:150px;
      display:none;
    }
    #tab .show{
      display:block;
    }
  </style>
</head>
<body>
  <div id="tab">
    <ul class="nav clearfix">
      <li class='show'>tab1</li>
      <li>tab2</li>
      <li>tab3</li>
    </ul>
    <div class="content show">內(nèi)容1</div>
    <div class="content">內(nèi)容2</div>
    <div class="content">內(nèi)容3</div>
  </div>
  <script>
    var li=document.querySelectorAll('li');
    var nav=document.querySelector('.nav');
    var content=document.querySelectorAll('.content');
    nav.addEventListener('click',function(e){
      var target=e.target,
          libs=nav.children;
      for(var i=0;i<li.length;i++){
        li[i].removeAttribute('class');
      }
      target.setAttribute('class','show');
      var index=[].indexOf.call(li,target);
      var cls=content[index].getAttribute('class');
      for(i=0;i<content.length;i++){
        content[i].setAttribute('class','content');
      }
      content[index].setAttribute('class',cls+' show');
    });
  </script>
</body>

JSbin

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

模態(tài)框

實現(xiàn)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    a{
        text-decoration: none;
        color:black;
    }
    h3{
        margin: 0px;
        padding:0px;
    }
    .clearfix:after{
        content: '';
        display: block;
        clear: both;
    }
    .modal-dialog{
        display: none;
    }
    .dialog{
        position:relative;
        top: 347px;
        left: 38%;
        width: 100%;
        height: 100%;
    }
    .header,.content,.footer{
        width:500px;
        border:1px solid lightgray;
        padding: 10px;
        background-color: white;
    }
    .footer{
        text-align: right;
    }
    .header h3{
        float: left;
    }
    .header .close{
        float: right;
    }
    .cover{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000;
        top: 0;
        left: 0;
        opacity: 0.4;
    }
  </style>
</head>
<body>
  <button class="btn-modal">點我</button>
  <div class="modal-dialog">
    <div class="cover"></div>
    <div class="dialog">
        <div class="header clearfix">
        <h3>我是標(biāo)題</h3>
        <a href="#" class="close">X</a>
        </div>
        <div class="content">
            <p>我是內(nèi)容1</p>
            <p>我是內(nèi)容2</p>
        </div>
        <div class="footer">
            <a href="#" class="btn-cancle">取消</a>
            <a href="#" class="btn">確定</a>
        </div>
    </div>
  </div>
  <script>
    var btnModal=document.querySelector('.btn-modal');
    var modalDialog=document.querySelector('.modal-dialog');
    var dialog=document.querySelector('.dialog');
    btnModal.addEventListener('click',function(e){
        modalDialog.style.display='block';
        e.stopPropagation();
    })
    document.body.addEventListener('click',function(){
        modalDialog.style.display='none';
    })
    dialog.addEventListener('click',function(e){
        e.stopPropagation();
        if (e.target.getAttribute('class')==='close'||e.target.getAttribute('class')==='btn-cancle') {
            modalDialog.style.display='none';
        }
    })
  </script>
</body>
</html>

JSbin

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

DOM、事件

DOM、事件

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

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

查詢元素有幾種常見的方法？

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

元素的添加、刪除？

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

attachEvent與addEventListener的區(qū)別？

解釋IE事件冒泡和DOM2事件傳播機(jī)制？

如何阻止事件冒泡？如何阻止默認(rèn)事件？

代碼

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

補(bǔ)全代碼，要求：

補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

實現(xiàn)如下圖Tab切換的功能

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

DOM、事件

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

elem.children和elem.childNodes的區(qū)別？

查詢元素有幾種常見的方法？

如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？

元素的添加、刪除？

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

attachEvent與addEventListener的區(qū)別？

解釋IE事件冒泡和DOM2事件傳播機(jī)制？

如何阻止事件冒泡？ 如何阻止默認(rèn)事件？

代碼

有如下代碼，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容

補(bǔ)全代碼，要求：

補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

實現(xiàn)如下圖Tab切換的功能

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

DOM、事件

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

查詢元素有幾種常見的方法？

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

元素的添加、刪除？

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

attachEvent與addEventListener的區(qū)別？

解釋IE事件冒泡和DOM2事件傳播機(jī)制？

如何阻止事件冒泡？如何阻止默認(rèn)事件？

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

補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。