Dom、事件

一、dom对象的innerText和innerHTML有什么区别？

1.innerText:是一个可写属性,返回元素内容包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容;

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>
<script>
    var div=document.getElementsByTagName("div")[0];
    div.innerText;
    div.innerText="<a href='#'>link</a>";
</script>
输出结果

2.innerHTML:属性作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构,在写入的时候也会自动构建DOM;

<div> 
    <p> 
      123 
      <span>456</span> 
    </p>
</div>
<script> 
    var div=document.getElementsByTagName("div")[0]; 
    div.innerHTML; 
    div.innerHTML="<a href='#'>link</a>";
</script>
输出内容

二、elem.children和elem.childNodes的区别？

1.element.children只返回父元素的所有HTML标签子元素;
2.element.childNodes返回父元素的所有HTML标签子元素子元素和文本节点(空格,换行符等);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="div1">
        <p>
            123
            <a href="#">链接</a>
            <span>456</span>
        </p>
    </div>
</body>
</html>
输出结果

三、查询元素有几种常见的方法？

1.getElementById()：返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="div1">
        <p>
            123
            <span>456</span>
        </p>
    </div>
</body>
</html>
输出结果

2.getElementsByClassName()：返回一个类似数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回的结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div class="div1">
        <p>
            <span>456</span>
        </p>
    </div>
</body>
</html>
输出结果

3.getElementsByTagName()：返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="">
        <input type="text" name="password" placeholder="请输入密码">
    </form>
</body>
</html>
输出结果

4.getElementsByName()：用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div class="div1">
        <p>
            <span>456</span>
        </p>
    </div>
</body>
</html>
输出结果

5.querySelector()：返回匹配指定的CSS选择器的元素节点。如果多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="div1">
        <p>
            <span>456</span>
        </p>
    </div>
</body>
</html>
输出结果

6.querySelectorAll()：方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所有元素节点的变化无法实时反映在返回结果中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="div1">
        <p>
            <span>456</span>
        </p>
    </div>
</body>
</html>
输出结果

四、如何创建一个元素？如何给元素设置属性？

1.createElement方法用来生成HTML元素节点。参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

var newDiv = document.createElement("div")

2.setAttribute()方法用于设置元素属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="div1">
        123
        <p>
            <span>456</span>
        </p>
    </div>
</body>
</html>
输出结果

五、元素的添加、删除？

1.appendChild()：在元素末尾添加元素；
2.insertBefore()：在某个元素之前插入元素；
3.replaceChild()：接受两个参数，要插入的元素和要替换的元素；
4.removeChild()：删除元素；

六、DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

1.DOM0级事件处理程序通过JS制定事件处理程序的传统方法，将一个函数赋值给一个事件处理程序属性进行事件监听；DOM2级事件处理程序是通过定义了 addEventListener()和 removeEventListener()来进行事件监听。
2.DOM0级事件处理程序不能添加多个事件处理程序，而DOM2级事件处理程序可以。
3.DOM0级事件处理程序不能选择是在事件捕获阶段调用事件处理程序还是在冒泡阶段调用事件处理程序，而DOM2级事件处理程序可以。

<body>
    <div id="ct">
        <a href="#" class="btn">点击</a>
    </div>
    <script>
        //DOM0级事件处理程序
        document.querySelector(".btn").onclick=function(){
            console.log("DOM0级事件处理程序");
        };
        //DOM2级事件处理程序
        var handler1=function(){
            console.log("DOM2级事件处理程序1");
        };
        var handler2=function(){
            console.log("DOM2级事件处理程序2");
        };
        document.querySelector(".btn").addEventListener("click",handler1,true);
        document.querySelector(".btn").addEventListener("click",handler2,true);
    </script>
</body>
输出结果

七、attachEvent与addEventListener的区别？

1.参数个数不相同。这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理。
2.第一个参数意义不同。addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）。
3.事件处理程序的作用域不相同。addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id。
4.为一个事件添加多个事件处理程序时，执行顺序不同。addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理时顺序无规律（添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了），所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理不要指望浏览器。

八、解释IE事件冒泡和DOM2事件传播机制？

1.IE事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
2.DOM2级事件：其规定事件流包括三个阶段（事件捕获阶段、处于目标阶段、事件冒泡阶段），首先发生的是事件捕获，为截获事件提供了机会，然后是实际的目标接受到了事件，最后是冒泡阶段，这个阶段对事件做出响应。

九、如何阻止事件冒泡？ 如何阻止默认事件？

1.阻止事件冒泡：IE:event.cancleBuble = true; //默认：false
大多数浏览器：event.stopPropagation();
2.阻止默认事件：IE:event.returnvalue = false; //默认:true
大多数浏览器：event.preventDefault();

代码练习

十、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

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

方法一:DOM2级事件处理

<body>
    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>任务6班</li>
    </ul>
    <script>
        var lis=document.getElementsByTagName('li');
        for(var i=0;i<lis.length;i++){
            lis[i].addEventListener("click",function(){
                console.log(this.innerText);
            });
        }
    </script>
</body>

方法一

预览地址

方法二:DOM2级事件处理

<body>
    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>任务6班</li>
    </ul>
    <script>
        var oul=document.querySelector(".ct");
        function handler(event){
            console.log(event.target.innerText);
        }
        oul.addEventListener("click",handler);
    </script>
</body>

方法二

预览地址

方法三:DOM0级事件处理

<body>
    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>任务6班</li>
    </ul>
    <script>
        var oul=document.getElementsByTagName('li');
        for(var i=0;i<oul.length;i++){
            oul[i].onclick=function(){
                console.log(this.innerText);
            }
        }
    </script>
</body>

方法三

预览地址

十一、补全代码，要求：

  • 1.当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串。

  • 2.当点击每一个元素li时控制台展示该元素的文本内容。

<ul class="ct"> 
      <li>这里是</li> 
      <li>饥人谷</li> 
      <li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//todo ...
</script>

做法:DOM0级事件处理程序

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
</head>
<body>
<ul id="ct">
   <li>这里是</li>
   <li>饥人谷</li>
   <li>任务6班</li>
</ul>
<input id="txt" placeholder="添加内容"/>
<button id="btns">开头添加</button>
<button id="btne">结尾添加</button>
</body>
<script>

   window.onload=function() {
       var oBtns = document.getElementById("btns");
       var oBtne = document.getElementById("btne");
       var oUl = document.getElementById("ct");
       var oTxt = document.getElementById("txt");
       var aLi = oUl.getElementsByTagName("li");
       oBtns.onclick = function () {
           var oLi = document.createElement("li");
           oLi.innerHTML = oTxt.value;
           oUl.insertBefore(oLi, aLi[0]);
           for (var i = 0; i < aLi.length; i++) {
               aLi[i].onclick = function () {
                   console.log(this.innerText);
               }
           }
       };
       oBtne.onclick = function () {
           var oLi = document.createElement("li");
           oLi.innerHTML = oTxt.value;
           oUl.appendChild(oLi);

           for (var i = 0; i < aLi.length; i++) {
               aLi[i].onclick = function () {
                   console.log(this.innerText);
               }
           }
       };
       for (var i = 0; i < aLi.length; i++) {
           aLi[i].onclick = function () {
               console.log(this.innerText);
           }
       }
   }
</script>
</html>

输出结果

预览地址

做法二:DOM2级事件处理程序

<body>
    <ul id="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>任务6班</li>
    </ul>
    <input id="txt" placeholder="添加内容"/>
    <button id="btns">开头添加</button>
    <button id="btne">结尾添加</button>
</body>
<script>
    var oBtns=document.getElementById("btns");
    var oBtne=document.getElementById("btne");
    var oUl=document.getElementById("ct");
    var oTxt=document.getElementById("txt");
    var aLi=oUl.getElementsByTagName("li");
    
    function oBtn1(){
        var oLi=document.createElement("li");
        oLi.innerHTML=oTxt.value;
        oUl.insertBefore(oLi,aLi[0]);
        for (var i = 0; i < aLi.length; i++) {
           aLi[i].onclick = function () {
               console.log(this.innerText);
           }
       }
    }

    function oBtn2(){
        var oLi=document.createElement("li");
        oLi.innerHTML=oTxt.value;
        oUl.appendChild(oLi);
        for (var i = 0; i < aLi.length; i++) {
           aLi[i].onclick = function () {
               console.log(this.innerText);
           }
       }
    }

    oBtns.addEventListener("click",oBtn1,false);
    oBtne.addEventListener("click",oBtn2,false);
    
    for (var i = 0; i < aLi.length; i++) {
           aLi[i].onclick = function () {
               console.log(this.innerText);
           }
       }
</script>

输出结果

预览地址

十二、补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

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

1.做法一:DOM0级事件处理程序

<body>
    <ul class="ct">
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
        var ct=document.querySelector(".ct");
        var childs=ct.querySelectorAll("li");
        var preview=document.querySelector(".img-preview");
        for(var i=0;i<childs.length;i++){
            childs[i].onmouseover=function (){
                var dataImg = this.getAttribute('data-img');
                preview.innerHTML = '<img src="' + dataImg + '">'
            }
        }
    </script>
</body>

预览地址

2.做法二:DOM2级事件处理程序

<body>
    <ul class="ct">
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
        var ct=document.querySelector(".ct");
        var childs=ct.querySelectorAll("li");
        var preview=document.querySelector(".img-preview");
            for(var i=0;i<childs.length;i++){
                childs[i].addEventListener("mouseover",function(){
               var dataImg = this.getAttribute('data-img');
               preview.innerHTML = '<img src="' + dataImg + '">'
            });
        }
    </script>
</body>

预览地址

十三、实现如下图Tab切换的功能?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        html,body,ul,li{
            margin: 0;
            padding: 0;
        }
        .mod-tab{
            border:1px solid;
        }
        .mod-tab * {
            box-sizing: border-box;
        }
        .mod-tab li{
            float: left;
            list-style: none;
            width: 33.33%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-size: 22px;
            border-right: 1px solid;
            border-bottom: 1px solid;
            cursor: pointer;
        }
        .mod-tab li:last-child{
            border-right: none;
        }
        .tabs:after{
            content: "";
            display: block;
            clear: both;
        }
        .mod-tab .tabs .active{
            background: #eee;
        }
        .mod-tab .panel{
            height: 180px;
            padding: 20px;
            display: none;
        }
        .mod-tab .active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="mod-tab">
        <ul class="tabs">
            <li class="active">tab1</li>
            <li>tab2</li>
            <li>tab3</li>
        </ul>
        <div class="panel active panel1">内容1</div>
        <div class="panel">内容2</div>
        <div class="panel">内容3</div>
    </div>
    <script>
    var oUl=document.querySelector(".tabs");
    var oDiv=document.querySelector(".panel");
    oUl.addEventListener("click",function(event){
        var txt=event.target.innerText;
        for(var i=0;i<oUl.children.length;i++){
            oUl.children[i].style.backgroundColor="#fff";
        }
        event.target.style.backgroundColor="#eee";
        oDiv.innerText="内容"+txt[txt.length-1];
    })
    </script>
</body>
</html>

预览地址

十四、实现下图的模态框功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    html,body,h3,p,ul,li{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    #div1{
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
        margin: 0 auto;
        border-radius: 5px; 
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -150px 0 0 -150px;
        display: none;
    }
    #header h3{
        padding: 10px;
    }
    span{
        position: absolute;
        right: 0;
        top: 0;
        padding: 10px;
        font-size: 20px;
        color: black;
        cursor: pointer;
    }
    #cover{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.4;
        background:#000;
        display: none;
    }
    #header,#content{
        border-bottom: 1px solid #ccc;
    }
    #content{
        height: 100px;
        line-height: 40px;
        padding: 10px;
    }
    #footer ul li{
        float: left;
        margin-right: 5px;
        padding: 8px 0;
    }
    #footer ul li button{
        columns: pointer;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }
    #footer ul{
        float: right;
    }
    </style>
</head>
<body>
    <input id="btn" type="button" value="点我1">
    <div id="cover"></div>
    <div id="div1">
        <div id="header">
            <h3>我的标题1</h3>
            <span>×</span>
        </div>
        <div id="content">
            <p>我的内容1</p>
            <p>我的内容2</p>
        </div>
        <div id="footer">
            <ul>
                <li><button id="btn1">取消</button></li>
                <li><button>确定</button></li>
            </ul>
        </div>
    </div>
    <script>
    var oDiv1=document.querySelector("#div1"),
        aBtn=document.querySelector("#btn"),
        aBtn1=document.querySelector("#btn1"),
        aSpan=document.querySelector("span"),
        aCover=document.querySelector("#cover");
        function handler1(){
            oDiv1.style.display="none";
            aCover.style.display="none";
        }
        function handler2(){
            oDiv1.style.display="block";
            oDiv1.style.backgroundColor="#fff";
            aCover.style.display="block";

        }
        aBtn.addEventListener("click",handler2);
        aSpan.addEventListener("click",handler1);
        aBtn1.addEventListener("click",handler1);
        aCover.addEventListener("click",handler1);
    </script>
</body>
</html>

预览地址

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,905评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,140评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,791评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,483评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,476评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,516评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,905评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,560评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,778评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,338评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,925评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2赞 342

推荐阅读更多精彩内容

  • Dom、事件
    一、问答 1. dom对象的innerText和innerHTML有什么区别？ innerHTML： 也就是从对象...
    饥人谷_罗伟恩阅读 586评论 0赞 2
  • 任务二十二~Dom、事件
    问答部分 一、dom对象的innerText和innerHTML有什么区别？ innerText~是一个可写属性，...
    dengpan阅读 421评论 1赞 0
  • DOM、事件
    一、dom对象的innerText和innerHTML有什么区别？ innerHTML返回的是从对象起始位置到终止...
    __Qiao阅读 405评论 0赞 0
  • 22.Dom、事件
    问答 1、dom对象的innerText和innerHTML有什么区别？ innerText属性①innerTex...
    鸿鹄飞天阅读 621评论 0赞 1
  • Dom、事件
    问题 1.dom对象的innerText和innerHTML有什么区别？ innerText： 当使用innerT...
    饥人谷_任磊阅读 619评论 0赞 1