Dom 、事件

作者: 黑色的五叶草 | 来源:发表于2018-02-08 13:07 被阅读0次

1.dom对象的innerText和innerHTML有什么区别？

innerText只提取文本（替换文本），innerHTML会提取内部所有的标签和文本（替换标签）

2.elem.children和elem.childNodes的区别？

elem.children获取文本节点以外的标签（不包含文本仅标签），elem.childNodes获取所有的子节点

3. 查询元素有几种常见的方法？

通过id查找：document.getElementById();
得到对应id的元素
通过类名查找：document.getElementsByClassName();
得到包含此类的所有元素的数组
通过标签名查找：docunment.getElementsByTagName();
得到该标签的数组
通过新方法查找：document.querySeletor();
得到匹配到的第一个元素
通过新方法查找：document.querySeletorAll();
得到所有匹配元素的数组

4. 如何创建一个元素？如何给元素设置属性？

document.createElement(); 创建元素
document.createTextNode(); 创建一个新的文本节点
Node.appendChild(child); 方法将一个节点添加到指定父节点的子节点列表末尾
element.setAttribute(name, value); name设置属性，value设置对应的值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      var para = document.createElement('p'),
          txt = document.createTextNode('新增段落');
      para.appendChild(txt);
      document.body.appendChild(para);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a id="anchor" href="#">点我</a>
    <script>
      var el = document.getElementById('anchor');
      el.setAttribute('href', 'http://www.baidu.com');
    </script>
  </body>
</html>

5.元素的添加、删除

el.appendChild(name); 将子元素（节点）放在父元素的尾部
el.insertBefore(name, brother); 方法在参考节点之前插入一个节点作为一个指定父节点的子节点(将元素放在兄弟元素前面)
el.removeChild(name); 移除元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>添加和删除</title>
  </head>
  <body>
    <p>1</p>
    <p>3</p>
    <p>2</p>
    <script>
      var el = document.getElementsByTagName('p'),
            para = document.createElement('p'),
            txt = document.createTextNode('new text');
            P = para.appendChild(txt);
      document.body.insertBefore(P, el[0]);  //el是个数组，取得第一个即第0位的el
    </script>
  </body>
</html>
总结：
1. el 获取到了3个p，用insertBefore时，要传具体是哪个p
2. 剩下的全是拼写错误

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

DOM0事件和DOM2级事件都是通过给元素节点注册特定的事件处理程序（即事件监听器）来对事件进行处理
DOM0事件只能给事件注册一种处理方式，DOM2事件可以注册多个处理方式
DOM2事件可以选择在捕获阶段还是冒泡阶段进行监听器触发，DOM0视浏览器设置而定
IE9之前不支持DOM2即事件，而DOM0则跨浏览器且无兼容问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">Click Me</button>
  <script>
    //DOM0 .onclick = function (){}
    var btn = document.getElementById('btn');
    btn.onclick = function showMessage(){
      console.log('This is DOM0');
    }

    //DOM2 .addEventListener('type', function(){});
    function handler1(){
      console.log('This is DOM2');
    }
    function handler2(){
      console.log('This is another DOM2');
    }
    btn.addEventListener('click', handler1);
    btn.addEventListener('click', handler2);
  </script>
</body>
</html>

7. attachEvent与addEventListener的区别？

attachEvent：是IE的事件监听器，类似DOM2级事件，但是从IE11后不在支持。
接受两个参数：第一个是事件类型，格式为'on + type'；第二个为事件处理的程序（function），默认为冒泡事件
addEventListener：是W3C标准的事件监听器，IE9之前不支持。
接受三个参数：第一个为事件类型，格式为'type'，例如'click'；第二个为事件处理程序（function）；第三个参数默认为flase，即冒泡事件，设置为true为捕获阶段事件

8. 解释IE事件冒泡和DOM2事件传播机制？

事件冒泡简单的说就是，在冒泡路径上所有绑定了相同事件类型的元素上都会触发这些类型的事件。
IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素(从内到外)
Netscape的事件捕获：不太具体的节点更早接受事件，而最具体的元素最后接受事件，和事件冒泡相反(从外到内)
DOM事件流：DOM2级事件规定事件流包括三个阶段。首先发生的是事件捕获，为截取事件提供机会；然后是实际目标接收事件；最后是冒泡阶段
DOM2事件传播机制属于DOM事件流，并且DOM2事件的事件处理程序支持第三个参数设置具体传播机制，即捕获或冒泡

9. 如何阻止事件冒泡？如何阻止默认事件？

阻止事件冒泡：
DOM2级：event.stopPropagation();
IE中：event.cancelBubble = true;
阻止默认事件：
DOM2级：event.preventDefault(); 例如a链接跳转
IE中：event.returnValue = false;

代码：

给元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 给元素绑定事件 -->
    <ul class="ct">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    <script>
        //方法1：利用for循环直接给元素绑定事件
        var liArr = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
        console.log(liArr);
        for (var i=0; i<liArr.length; i++){
            liArr[i].addEventListener('click', function(){
                console.log(this.innerText);
            })
        }
        // //方法2：使用事件代理，把事件监听绑定到父容器上，根据事件的来源(e.target)进行处理
        // var ct = document.querySelector('.ct');
        // ct.addEventListener('click', function(e){
        //     console.log(e.target.innerText);
        // })
    </script>
</body>
</html>

补全代码，要求：当点击按钮开头添加时在<li>列表1</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>列表3</li>后添加用户输入的非空字符串；当点击每一个元素li元素时控制台展示该元素的文本内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ct{
            background: pink;
            padding: 20px;
        }
    </style>
</head>
<body>
    <ul class="ct">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    <input type="text" id="ipt-add-content" placeholder="添加内容">
    <button id="btn-add-start">开头添加</button>
    <button id="btn-add-end">结尾添加</button>
    <script>
        var ct = document.querySelector('.ct'),
            ipt = document.querySelector('#ipt-add-content'),
            addStartBtn = document.querySelector('#btn-add-start'),
            addEndBtn = document.querySelector('#btn-add-end');
        ct.addEventListener('click', function(e){
            if (e.target.tagName.toLowerCase() === 'li'){
                console.log(e.target.innerText);
            }
        }); //用事件代理绑定点击内部子元素事件

        // var li = document.createElement('li');
        // li.innerText = ipt.value;   
        //写在外部在多次调用时会被后面调用的函数覆盖先一次调用的结果
        addStartBtn.addEventListener('click', function(){
            var li = document.createElement('li');
            li.innerText = ipt.value;              
            ct.insertBefore(li, ct.firstChild);          
        })

        addEndBtn.addEventListener('click', function(){
            var li = document.createElement('li');
            li.innerText = ipt.value;
            ct.appendChild(li);
            console.log(li);
        })
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<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'),
            childs = ct.querySelectorAll('li'),
            preview = document.querySelector('.img-preview');
        for (var i=0; i<childs.length; i++){
            childs[i].addEventListener('mouseenter', function(){
                var dataImg = this.getAttribute('data-img');    //得到属性
                // console.log(this);
                preview.innerHTML = '<img src="' + dataImg +'">'  //把变量dataImg的data-img属性作为值传入到src路径中
            });
        }
    </script>
</body>
</html>

Tab切换功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tab切换-22-5 44:00</title>
    <style>
        .mod-tab {
            border: 1px solid #ccc;
        }
        .mod-tab * {
            box-sizing: border-box;
        }   /*没有这行代码三个li不能实现同行排列*/
        .mod-tab ul,
        .mod-tab li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .mod-tab .tabs:after {
            content: '';
            height: 0;
            display: block;
            clear: both;
        }   /*清除ul内部li元素浮动*/
        .mod-tab .tabs li {
            float: left;
            width: 33.3%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }
        .mod-tab .tabs li:last-child {
            border-right: none;
        }   /*去掉第三个li的双边框*/

        .mod-tab .tabs .active {
            background: #eee;
        }

        /*只展示第一个div的内容*/
        .mod-tab .panel {
            display: none;
            height: 180px;
            padding: 20px;
        }
        .mod-tab .panel.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">内容1</div>
        <div class="panel">内容2</div>
        <div class="panel">内容3</div>
    </div>
    <script>
        var Utils = {
            hasClass: function(ele, cls){
                return !!ele.className.match(new RegExp('\\b' + cls + '\\b'));
            },  //这个函数叫做hasClass,目的就是要判断元素是不是有某个class名,所以用到了一个字符串方法叫做match,match里面需要用到正则去匹配这个class名字 有的话返回true 没有返回false,括号里的那部分整个是匹配这种模式的class名,不是说有单词边界而是说刑如 a cls b这种
                //说成中文就是：写个函数，功能是判断一个元素里是不是含有某个class名称,用match正则匹配,找到cls   这个cls不能随便一个都行  比如说  123cls  这个class名虽然含有cls但是不是我们想要的,所以要特殊判断 用正则,123cls 这里的cls左边不是单词边界利用这点，就写个正则：如果一个cls两边是单词边界那就返回true 如果没有cls 或者两边不是单词边界，就返回false。找到形如 \b + cls + \b 的这个cls 有的话返回true  没有返回false
            addClass: function(ele, cls){
                if (ele.length && ele.length>0){  //长度大于0证明是一个html数组
                    for(var i=0; i<ele.length; i++){
                        Utils.singleAddClass(ele[i], cls);  //分别对数组的元素去添加
                    }
                } else {  //否则就是一个元素
                    Utils.singleAddClass(ele, cls);  //直接对这一个元素添加
                }
            },
            removeClass: function(ele, cls){
                if (ele.length && ele.length>0){
                    for (var i=0; i<ele.length; i++){
                        Utils.singleRemoveClass(ele[i], cls);
                    }
                } else {
                    Utils.singleRemoveClass(ele, cls);
                }
            },
            singleAddClass: function(ele, cls){
                if (Utils.hasClass(ele, cls)){
                    return;
                } else {
                    ele.className += ' ' + cls;  //' '中间有空格，因为正则表达式用到了/'\\b' + cls + '\\b'/(xx cls xx)的搜索方法
                }
            },
            singleRemoveClass: function(ele, cls){
                ele.className = ele.className.replace(new RegExp('\\b'+cls+'\\b', ''));
            },
            indexOf: function(ele){  //对于一个元素知道它是第几个元素
                var parent = ele.parentElement,  //获取到他的父元素
                    siblings = parent.children;  //得到他所有的孩子
                    for (var i=0; i<siblings.length; i++){
                        if(ele === siblings[i]) return i;  //如果自己等于父元素的第几个孩子，就把自己的序号拿出来
                    }
                    return -1;  //否则等于-1，表示没找到
                }
            };
        var tabCt = document.querySelector('.tabs');  //给父元素绑定事件，点击某个元素时事件会跑到父元素身上 
        tabCt.addEventListener('click', function(e){
            var target = e.target,  //得到点击的对象
                tabs = tabCt.children,  //
                index = Utils.indexOf(target),  //计算出点击的是第几个元素
                panels = document.querySelectorAll('.panel');
                if (index > -1){  //如果index>-1表示如果数字是存在的话。点谁给谁的class加active，同时去掉上一次被点击对象田间的active
                    Utils.removeClass(tabs, 'active');  //去掉tabs上的所有avitve
                    Utils.addClass(target, 'active');  //把目标元素(点击的对象)上绑定class=active
                    Utils.removeClass(panels, 'active');
                    Utils.addClass(panels[index], 'active');  //把panels对应的(index)元素添加active
                }
        });
    </script>
</body>
</html>

模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模态框-22-5 25:00</title>
    <style>
        .modal-dialog {
            display: none;
        }
        a {
            text-decoration: none;
            color: #333;
        }

        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #000;
            opacity: 0.4;
            z-index: 99;
        }

        .modal-ct {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);  /*这两行代码是让盒子居中*/
            -webkit-transform: translate(-50%, -50%);
            width: 400px;
            border-radius: 5px;
            background: #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;  /*是绝对定位元素，父元素需要设置相对定位  不设置就相对于body定位了*/
            right: 10px;
            top: 10px;
            line-height: 1;
        }
        
        .centent {
            padding: 10px;
        }

        .footer {
            padding: 10px;
            border-top: 1px solid #eee;
            height: 18px;
            line-height: 18px; 
        }

        .btn {
            float: right;
            margin-left: 10px;
        }
        .btn:after {
            content: '';
            display: block;
            clear: both;
        }
        /* .btn {
            display: inling-block;
            padding: 3px 6px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 14px;
        }  按钮样式 */
    </style>
</head>
<body>
    <div class="btn-group">
        <button id="btn-modal">Click</button>
    </div>

    <div id="modal-1" class="modal-dialog">
        <div class="cover"></div>

        <div class="modal-ct">
            <div class="header">
                <h3>标题</h3>
                <a href="#" class="close">x</a>
            </div>
            <div class="content" style="padding: 0 10px">
                <p>内容</p>
                <p>内容</p>
            </div>
            <div class="footer">
                <a href="#" class="btn btn-confirm">确定</a>
                <a href="#" class="btn btn-cancel">取消</a>
            </div>
        </div>
    </div>
    <script>
        var Btn = document.querySelector('#btn-modal'),
            modal = document.querySelector('#modal-1'),
            modalCt = document.querySelector('.modal-ct');
        Btn.addEventListener('click', function(e){
            e.stopPropagation();  //阻止冒泡
            showModal(modal);
        });
        modalCt.addEventListener('click', function(e){
            e.stopPropagation();
            if (hasClass(e.target, 'close') || hasClass(e.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>

Dom 、事件

1.dom对象的innerText和innerHTML有什么区别？

2.elem.children和elem.childNodes的区别？

3. 查询元素有几种常见的方法？

4. 如何创建一个元素？如何给元素设置属性？

5.元素的添加、删除

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

7. attachEvent与addEventListener的区别？

8. 解释IE事件冒泡和DOM2事件传播机制？

9. 如何阻止事件冒泡？如何阻止默认事件？

代码：

给元素绑定事件

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

Tab切换功能

模态框

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Dom 、事件

1.dom对象的innerText和innerHTML有什么区别？

2.elem.children和elem.childNodes的区别？

3. 查询元素有几种常见的方法？

4. 如何创建一个元素？如何给元素设置属性？

5.元素的添加、删除

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

7. attachEvent与addEventListener的区别？

8. 解释IE事件冒泡和DOM2事件传播机制？

9. 如何阻止事件冒泡？ 如何阻止默认事件？

代码：

给元素绑定事件

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

Tab切换功能

模态框

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

9. 如何阻止事件冒泡？如何阻止默认事件？