JS-DOM（三）_var btns=document.queryselectorall("butto")-CSDN博客

本文链接：https://blog.csdn.net/weixin_46341516/article/details/116810248

删除元素 node.removeChild(child)
在这里插入图片描述
删除元素案例

<textarea name="" id=""></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);//插入到头元素去
                // (3) 删除元素 删除的是当前链接的li  它的父亲
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
                        ul.removeChild(this.parentNode);
                        //这里的this指向a标签，a标签是给li包含的，所以li是a的父节点
                    }
                }
            }
        }
    </script>

node.cloneNode(); 括号为空或者里面是false 浅拷贝只复制标签不复制里面的内容
node.cloneNode(true); 括号为true 深拷贝复制标签复制里面的内容

三种创建元素方式区别

		// 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        var btn = document.querySelector('button');
        btn.onclick = function() {
            document.write('<div>123</div>');
        }
        
        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        
        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }

监听方法 addEventListener

同一个事件可以添加多个侦听器

 var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }
        // 2. 事件侦听注册事件 addEventListener 
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
       	// 3. attachEvent ie9以前的版本支持 了解即可
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })

removeEventListener 删除事件 removeEventListener（‘click’,fn）

var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
        // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }

dom 事件流三个阶段

JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent（ie）只能得到冒泡阶段。
捕获阶段如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
冒泡阶段如果addEventListener 第三个参数是 false 或者省略那么则处于冒泡阶段 son -> father ->body -> html -> document
node.addEventListener(‘click’, function() {}, false/true);

event 就是一个事件对象写到我们侦听函数的小括号里面当形参来看function(e){}里面的e或者event，evt

e.target 返回的是触发事件的对象（元素）这里指的是点击的对象

this 返回的是绑定事件的对象（元素）

e.preventDefault()阻止默认行为（事件）让链接不跳转或者让提交按钮不提交
阻止冒泡 dom 推荐的标准 stopPropagation()
事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点

阻止鼠标时间发生

 // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })

窗口的可视化

document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            // 这里只算当前显示的窗口，固定了最大的x和y
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            // 这里算上右边的滚动条的数值
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            // 这里包括浏览器窗口
            console.log(e.screenX);
            console.log(e.screenY);

        })

运用鼠标移动的案例–图片跟随鼠标移动

<img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
        });
    </script>

键盘事件keydown–keypress–keyup 区别keydown和keypress的区别

我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65
我们的keypress 事件区分字母大小写 a 97 和 A 得到的是65
keycode返回的ASCII码值来判断用户按下了那个键

 		// 1. keyup 按键弹起的时候触发 
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
            })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup

京东物流查询的放大窗口案例

<div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                // console.log('输入内容啦');
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
            // 当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 当我们获得焦点，就显示这个con盒子
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>