JavaScript学习记录——DOM部分

想做合格的前端程序员

已于 2022-04-07 16:45:06 修改

阅读量919

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-04-07 16:44:44 首次发布

本文链接：https://blog.csdn.net/spring0205/article/details/123991925

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript学习记录——DOM部分

DOM重点核心——事件的基础部分

文档对象模型（DOM）是W3C组织推荐的处理可拓展标记语言（ html或xml）的标准编程接口
W3C 定义的一系列的DOM接口，通过这个可以改变网页的内容、结构、样式
对于html，dom使得html形成一棵dom树，包含文档、元素和节点
我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型
dom操作主要针对元素的操作：增删改查和属性操作、事件操作等

创建元素

1.document.write
2.innerHTML
3.createElement

增加元素

1.appendChild
2.insertBefore

删除元素

1.removeChild

更改元素

1.修改元素属性：src、href、title等
2.修改普通元素内容：innerHTML（普通元素）、innerText（表单元素）
3.修改表单元素：value、type、disabled
4.修改元素样式：style、className

查

1.dom提供的api方法：getElementById、getElementsByTagName古老方法不推荐
2.H5提供的新方法：querySelector、querySelectorAll 提倡
3.利用节点操作获取元素：parentNode、children、（上一个兄弟）previousElementSibling、nextElementSibling 提倡

属性操作

1.serAttribute：设置dom的属性值
2.getAttribute：得到dom的属性值
3.removeAttribute：移除属性

事件操作

事件源.事件类型=事件处理程序
在这里插入图片描述

事件高级

注册事件（绑定事件）

传统注册方式

<button onclick ="hi"></button>
btn.onclick = function(){}

传统注册方式的特点：事件的唯一性，就是一个函数一次只能设置一个处理函数后面注册的处理函数会覆盖之前注册的处理函数

var btn = document.querySelectorAll('button')
btn[0].onclick = function(){
alert('hi');
}
btn[0].onclick = function(){
alert('hello');
}
后面只会显示hello

方法监听注册方式

addEventListener（）

可以解决同一个元素同一个事件可以注册多个监听器（就是后面的监听处理函数）
按照注册顺序依次进行

btns[1].addEventListener('click',function() {
            alert(22);
        }) 
btns[1].addEventListener('click',function() {
            alert(233);
        })

里面的事件类型是字符串，必须要加引号而且不加on
同一个元素同一个时间可以添加多个监听器（事件处理程序）依次执行

删除事件（解绑事件）

传统注册方式
eventTarget.onclick = null

 <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            divs[0].onclick = null;
        }
    </script>

方法监听注册方式
eventTarget.removeEventListener

divs[1].addEventListener('click',fn)
        //fn不需要调用加小括号
function fn() {
            alert(11);
            divs[1].removeEventListener('click',fn);
        }

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

DOM事件流

事件流描述的是从页面中接受时间的顺序
在这里插入图片描述
DOM事件流分为3个阶段：
1.捕获阶段（从最顶层节点开始逐级向下传播到最具体的元素接收的过程）
2.当前目标阶段
3.冒泡阶段（由具体元素接收逐级向上传播到最顶层节点的过程）

注意js代码只能执行捕获或者冒泡其中一个阶段
onclick和attachEvent只能获得冒泡阶段
在实际开发中更关注事件冒泡
有些事件是没有冒泡的比如onblur onfocus onmouseenter onmouseleave

<div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //捕获阶段 如果addEventListener的第三个参数是true 则处于捕获阶段
        //捕获路径document->html->body->father->son
        var son = document.querySelector(".son");
        son.addEventListener('click',function(){
            alert('son');
        },true);
        var father = document.querySelector(".father");
        father.addEventListener('click',function(){
            alert('father');
        },true);
    </script>

因为找到father的时候发现也有绑定事件所以先弹出father 再弹出son

 var son = document.querySelector(".son");
 son.addEventListener('click',function(){
            alert('son');
        },false);
 var father = document.querySelector(".father");
 father.addEventListener('click',function(){
            alert('father');
        },false);

先弹出son 再弹出father

事件对象

event对象表示事件的状态比如按键的状态鼠标的位置鼠标按钮的状态
简单理解为事件发生后跟事件相关的一系列信息数据的集合都会放到这个对象里面这个对象就是事件对象event（可以自命名）有很多属性和方法

在这里插入图片描述
这个event是个形参系统帮我们设定为事件对象不需要传递实参过去

关于e.target和this的区别

e.target返回的是出发事件的对象（元素）this返回的是绑定事件的对象（元素）
e.target点击了哪个元素就返回那个元素 this哪个元素绑定了这个点击事件就返回哪个元素

事件对象的常见属性和方法

在这里插入图片描述
阻止点击后跳转链接事件

 var a =document.querySelector('a');
 a.addEventListener('click',function(e){
            e.preventDefault();
 })
 三个传统注册方式下的阻止默认事件
 1.普通浏览器 e.preventDefault();
 e.preventDefault();
 2.低版本浏览器 ie678 returnValue属性
 e.returnValue;
 3.用return false也能阻止默认行为 但是后续代码无法继续执行 而且只限于传统注册方式
 return false；

阻止事件冒泡的两种方式

1.stopPropagation()（常用）
e.stopPropagation()
2.cancelBubble
e.cancelBubble = true;
在这里插入图片描述
兼容性解决方案

事件冒泡的好处——事件委托（代理、委派）

事件委托的原理：
不是给每一个子节点单独设置事件监听器而是将事件监听器设置在其父节点上然后利用冒泡原理影响设置每一个子节点
事件委托的作用：
只操作了一次dom 但是提高了程序的性能

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
 </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(){
            alert('是的');
        })
        设置点击的li背景为粉色
         ul.addEventListener('click',function(e){
            // alert('是的');
            e.target.style.backgroundColor='pink';
        })
    </script>

常用的鼠标事件

在这里插入图片描述

//选中以后不能鼠标右键菜单
        document.addEventListener('contextmenu',function(e) {
            e.preventDefault();
        })
//禁止鼠标选中
        document.addEventListener('selectstart',function(e)
        {
            e.preventDefault();
        })