Dom

DOM 文档对象模型,dom是把文档当对象看待,dom顶级对象是document,dom主要是操作页面元素来改变元素里面的内容、属性等,dom是w3c规范

<!-- 1.获取元素 -->
document.getElementById(id)              // <div id="time">2019</div>  var timer = document.getElementById('time');
document.getElementsByTagName('标签名')  //当页面增加了标签，这个集合中也就增加了元素。
document.getElementsByClassName('类名')  //根据类名返回元素对象集合   var boxs = document.getElementsByClassName('box');

document.querySelector('选择器');          //加# .  css怎么写就怎么写
document.querySelectorAll('选择器')       //根据指定选择器返回

document.body //获取body
document.documentElement  //返回html元素

<!-- 2.常见鼠标事件 -->
onclick  //点击鼠标左键触发
onmouseover //鼠标经过   鼠标经过自身盒子会触发，经过子盒子还会触发 会冒泡
onmouseout //鼠标离开
onfocus //获取鼠标焦点    //ele.onfocus = function() {}
onblur //失去鼠标焦点
onmousemove //鼠标移动触发
onmouseup //鼠标弹起
onmousedown //鼠标按下
mouseenter  //只会经过自身盒子触发 不会冒泡
mouseleave  //同样不会冒泡
contextmenu 我们可以禁用右键菜单
selectstart  禁止选中文字 
        <p>我是一段不愿意分享的文字</p>
        <script>   // 1. contextmenu 我们可以禁用右键菜单
            document.addEventListener('contextmenu', function(e) {
                    e.preventDefault();
                })
            document.addEventListener('selectstart', function(e) {
                e.preventDefault();   // 2. 禁止选中文字 selectstart
            })
        </script>

<!-- 键盘事件 -->
onkeyup  按键松开触发
onkeydown   按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头  不区分字母大小写  a 和 A 得到的都是65
onkeypress  按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头  区分字母大小写  a 97 和 A 得到的是65
            document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })

<!-- 键盘事件对象 -->
keyCode  //e.keyCode返回该按键ASCII码
            document.addEventListener('keyup', function(e) {
                if (e.keyCode === 65) {
                    alert('您按下的a键');
                } else {
                    alert('您没有按下a键')
            }  })        

<!-- 3.改变元素内容（获取或设置） -->
element.innerText  //会去除空格和换行  不会识别html    
element.innerHTML  //会保留空格和换行   获取或改变element元素内容 div.innerHTML(123)
    //div.innerHTML = '<strong>今天是：</strong> 2019';  就是在div里插入内容

<!-- 4.常用元素属性 -->
src href id alt title  
disabled、checked、selected type value  //表单元素的属性

<!-- 5.样式属性操作 -->
element.style  //行类样式操作 js采用驼峰命名法    // this.style.backgroundColor = 'purple';
element.className  //类名样式操作  //如果想要保留原先的类名，我们可以多类名选择器  this.className = 'first change';

<!-- 6.自定义属性操作 -->
    <div id="demo" index="1" class="nav"></div>
element.属性  //获取元素自带属性  //div.id
element.getAttribute('属性') //获取自定义属性  //div.getAttribute('index')

element.属性 ='值'  //div.id = 'test'; 设置属性
element.setAttribute('属性')  //div.setAttribute('index', 2);

element.removeAttribute('index')  //移除属性

<!-- 7.节点操作 -->
元素.parentNode  //父级节点
元素.children   //元素子节点  ul.children[1]
元素.nextSibling  //下一个兄弟节点
元素.previousSibling  //上一个兄弟节点

document.createElement('li')   //创建元素节点
父元素.appendChild('li')  //添加节点  添加到末尾
父元素.insertBefore('li', ul.children[0]);  //添加到指定元素前面
node.removeChild()   //方法从 node节点中删除一个子节点，返回删除的节点。  // ul.removeChild(ul.children[0]);

元素.cloneNode(true)  //括号为true 深拷贝 复制标签复制里面的内容      // var lili = ul.children[0].cloneNode(true);
                     false 浅拷贝 只复制标签不复制里面的内容  // 复制（克隆）节点
                     <ul>
                        <li>1111</li>
                        <li>2</li>
                    </ul>
                    <script>
                        var ul = document.querySelector('ul');
                        var lili = ul.children[0].cloneNode(true);
                        ul.appendChild(lili);
                    </script>

<!-- 8.事件监听 -->
添加事件监听:
传统方式: btn.onclick = function(){}
addEventListener()事件监听（IE9以后支持）:
    btns[1].addEventListener('click', function(e) {  //添加事件监听  e.target 指向我们点击的那个对象 
        alert(33);
        console.log(e.target)
        btns[1].removeEventListener('click', fn);  //移除事件事件监听
    })
attacheEvent()事件监听（IE678支持):
    btns[2].attachEvent('onclick', function() {
        alert(11);
    })

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

<!-- 执行事件的步骤 -->
1. 获取事件  2. 注册事件(绑定事件)  3. 添加事件处理程序(采取函数赋值形式)

<!-- DOM事件流 -->
事件发生会在元素节点按特定顺序传播, 这个传播过程称为DOM事件流
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    //点击son后冒泡顺序  son -> father ->body -> html -> document

<!-- 事件对象 -->
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
    div.onclick = function(e) {
        // 事件对象
        e = e || window.event;   //兼容IE6~8
        console.log(e);
    }
事件对象的属性和方法:
e.target 返回触发事件的元素 
    <ul>  <li>abc</li> <li>abc</li> </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
              console.log(this);  // 我们给ul 绑定了事件  那么this 就指向ul  
              console.log(e.target);  // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
        });
    </script>
e.type  返回事件的类型 如click mouseover
e.stopPropagation()  阻止冒泡标准(标准)
window.event.cancelBubble = true; // 非标准 ie6-ie8 阻止冒泡
e.preventDefault()  阻止默认行为(标准)  或 return false没有兼容性问题  //比如不让连接跳转

        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
        });

<!-- 事件委托 -->
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。
事件委托的作用: 我们只操作了一次 DOM ，提高了程序的性能  动态新创建的子元素，也拥有事件
        <ul>
            <li>知否知否，点我应有弹框在手！</li>
            <li>知否知否，点我应有弹框在手！</li>
        </ul>
        <script>
            // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
            var ul = document.querySelector('ul');
            ul.addEventListener('click', function(e) {
                // e.target 这个可以得到我们点击的对象
                e.target.style.backgroundColor = 'pink';
            })
        </script>

<!-- 鼠标事件对象 -->
e.clientX  e.clientY  返回鼠标相对于浏览器窗口可视区x和y坐标
e.pageX    e.pageY    返回鼠标相对于文档页面的X和y坐标 ie9以上支持
e.screenX  e.screenY  返回鼠标相对于鼠标在电脑屏幕的x和y坐标