javascript总结

JavaScript总结

dom

操作元素

查找元素

document.querySelector('div a span')

只查找找到的第一个

document.querySelectorAll('div a span')

查找所有符和要求的，并以伪数组的形式返回

3. 查找父亲节点

element.parentNode()

4. 查找儿子节点

element.children()

查找元素元素子节点，并以伪数组的形式返回

5. 查找下一个兄弟节点

element.nextElementSibling()

6. 查找上一个兄弟节点

element.previousElementSibling()

创建节点

1. 方法一
    1. 创建一个节点

document.createElement('li')

    2. 将这个节点放入到某个节点里面
        1. 将节点追加到某个元素的所有子元素的后面

ul.appendChild(li)

        2. 将节点插入到某个元素的某个节点的前面

ul.insertBefore(li, document.querySelector('a'))

2. 方法二
    1. 使用innerHtml进行增加节点

删除某个子节点

1. 对父节点进行操作删除子节点

element.removeChild(chiledElement)

查看/修改元素内容

1. 将元素里面的内容全部看成文本，不识别html

element.innerText

2. 读取元素里面的html

element.innerHTML

3. 注意，这是元素的两个属性，不需要加括号，因为不是函数

修改查看自定义属性

1. 新增/修改自定义属性

element.setAttribute('属性名', 属性值);

2. 查看自定义属性

element.getAttribute('data-delete');

3. 查看/修改元素的属性

element.属性名

复制节点

element.cloneNode()

element.cloneNode(false)

1. 只复制当前节点
2. 复制里面的所有html

element.cloneNode(true);

事件

事件的基本方法

增加事件（绑定事件）

方式

事件对象.on事件名称=function(event){
    事件主体程序
}

事件对象.addEventListener('事件类型名称'，函数名称，false/true)
[是否使用捕获阶段，默认为false，事件生效的顺序，从捕获阶段再到冒泡阶段，捕获阶段，从父级一直到子级，冒泡阶段，从子集一直到最顶级父级])

函数名称（event）{
    事件主体程序
}

注意

1. 建议在函数的参数入口写event，event是事件对象，里面包含了事件的所有信息，如鼠标的坐标，当前元素的坐标及大小等

event.target和this的区别

    1. event.target	在事件触发的时候可以获取**当前真正触发事件**的对象，
    2. this       在事件触发的时候只能够获取**绑定事件**的那个对象

删除事件方式1.

事件对象.on事件名称=null

事件对象.removeEventListener('事件类型名称'，函数名)

阻止默认事件

listenerFunction(event){
    event.target.preventDefault();//阻止默认事件函数
}

例子

//阻止a标签的默认跳转

阻止事件冒泡

listenerFunction(event){
    event.target.stopPropagation();//阻止事件冒泡，即阻止事件向父元素传递
}

事件委托

例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>


<body>
    <ul>
        <li>i am a li </li>

        <li>i am a li </li>

        <li>i am a li </li>

    </ul>

    <script>
        var ul = document.querySelector("ul");
        //只给父元素ul绑定事件，利用事件冒泡和event.target来获取真正点击的那个元素，从而达到监听的效果
        ul.addEventListener('click', fn);
        function fn(event) {
            event.target.style.backgroundColor = 'pink';
        }
    </script>

</body>


</html>

- 利用事件冒泡可以进行事件委托
- 事件委托：不对子元素进行事件绑定，只对父元素进行事件绑定，利用事件冒泡进行事件绑定的方法

阻止复制

document.addEventListener('contextmenu',function(event){
             e.preventDefault()
        })

element.addEventListener('selectstart',function(event){
             e.preventDefault()
        })

1. 右键菜单
- 相当于给阻止了右键菜单的操作
2. 禁止选中
- 阻止选中操作

常见的鼠标事件

使用addEventListener的时候注意不要写on

event中关于鼠标的部分

event.clientX和event.clientY
- 获得鼠标的浏览器可视界面的坐标
event.pageX和event.pageX
- 获得鼠标的相对于整个文本文档的坐标
event.screenX和event.screenX
- 获得鼠标的相对于整个电脑屏幕的坐标

常见的键盘事件

执行顺序down ->press -> up
keypress和keydown的区别
- keypress和keydown都可以一直触发
- keypress可以区分大小写，因而不能识别功能键
- keydown不能区别大小写，能识别功能键

event中关于鼠标的部分

event.keycode
- 获得键盘的按键的代码

更新: 2024-12-14 13:08:20
原文: https://www.yuque.com/duifangzhengzaishuru-rqbua/axyc58/keial24g9zi02w3l