JavaScript 笔记

  • 时间:
  • 来源:互联网
  • 文章标签:

JavaScript 笔记

  1. 自定义属性操作

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

  1. 节点操作

节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等),在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,则是深拷贝,会复制节点本身以及里面所有的子节点。

  1. 事件操作

注册事件
addEventListener() ie9以后支持 推荐
事件监听兼容解决方案
在这里插入图片描述
删除事件(解绑事件)
传统 eventTarget.onclick = null;
方法监听注册方式 eventTarget.removeEventLisener();
删除事件兼容性解决方案
在这里插入图片描述

  1. DOM事件流

DOM 事件流会经历3个阶段:
捕获阶段
当前目标阶段
冒泡阶段
在这里插入图片描述

  1. 事件对象
<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>
  1. 常用的鼠标事件
    在这里插入图片描述
    了解:‘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>
  1. 常用的键盘事件

键盘事件
在这里插入图片描述
在这里插入图片描述
键盘事件对象
在这里插入图片描述
在这里插入图片描述

本文链接http://www.taodudu.cc/news/show-82956.html