JavaScript 笔记

JavaScript 笔记

1. 自定义属性操作

获取属性值 element.getAttribute(‘属性’);
设置属性值 element.setAttribute(‘属性’, ‘值’);
属性 程序员约定前面加 data-
移除属性 element.removeAttribute(‘属性’);

2. 节点操作

节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

节点属性
nodeType （节点类型）
nodeName （节点名称）
nodeValue （节点值）
元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
但我们实际开发中，节点操作主要操作的是元素节点

父级节点
node.parentNode
返回的是最近的父节点
如果指定的节点没有父节点则返回null

子节点
parentNode.children（非标准）
是一个只读属性，返回所有的子元素节点。
第一个子元素节点 parentNode.children[0]
最后一个子元素节点 parentNode.children[parentNode.children.length - 1]

兄弟节点
nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
previousSibling
nextElementSibling 得到下一个兄弟元素节点
previousElementSibling

创建节点

document.createElement('tagName');

添加节点
node.appendChild(child); 将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child, 指定元素); 将一个节点添加到父节点的指定子节点前面

删除节点
node.removeChild()方法从node节点中删除一个子节点，返回删除的节点。

复制（克隆）节点
node.cloneNode()
注意：
如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点。

3. 事件操作

注册事件
addEventListener() ie9以后支持 推荐
事件监听兼容解决方案

删除事件（解绑事件）
传统 eventTarget.onclick = null;
方法监听注册方式 eventTarget.removeEventLisener();
删除事件兼容性解决方案

4. DOM事件流

DOM 事件流会经历3个阶段：
捕获阶段
当前目标阶段
冒泡阶段

5. 事件对象

<div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // 事件对象
                e = e || window.event;
                console.log(e);
        }
    </script>

事件对象的属性和方法

e.target 和 this 的区别
this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
e.target 是事件触发的元素。

阻止默认行为

e.preventDefault(); //  dom 标准写法

阻止事件冒泡

兼容性处理

事件委托
作用 只操作了一次 DOM ，提高了程序的性能 动态新创建的子元素，也拥有事件
例如：

<ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

6. 常用的鼠标事件
   
   了解：‘contextmenu’ 右键菜单 / ‘selectstart’ 鼠标选中

鼠标事件对象

获取鼠标在页面的坐标

<script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的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);

        })
    </script>

7. 常用的键盘事件

键盘事件


键盘事件对象