JavaScript BOM与DOM 学习笔记

秣凡

已于 2022-08-25 21:15:00 修改

阅读量275

点赞数

文章标签： javascript 学习前端

于 2022-07-22 17:33:17 首次发布

本文链接：https://blog.csdn.net/m0_56387086/article/details/125933596

版权

学习视频链接：黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作_哔哩哔哩_bilibili

3.2.1 两种定时器--- setTimeout（）

3.2.2 两种定时器 ---- setInterval()

4.5 mouseover 和 mouseenter 区别

5.1.2 触摸事件对象（TouchEvent）

编辑

5.1.3 移动端拖动元素

5.2 移动端常见特效

5.2.1 在移动端click事件300ms演示问题解决方案

5.3 移动端常用开发插件

1. Web APIs

主要是浏览器

API 和 Web API ：

2. DOM

DOM 树

DOM把以上内容都看作是对象

2.1 获取元素

获取元素的方法：

1. 根据ID获取 2.根据标签名获取 3. 通过HTML5新增的方法获取 4.特殊元素获取

2.1.1 根据ID获取

2.1.2 根据标签名获取

也可以直接指定一个父元素

2.1.3 通过HTML5新增的方法获取

2.1.4.特殊元素获取

2.2 事件

2.3 操作元素

2.3.1 修改元素内容

element.innerText 这个方法不能识别html标签。

在这两个写法中，最常用的是第二种写法。

2.3.2 修改元素属性

可以该表的常见属性

以轮播图为例：

2.3.3 修改表单属性

改变表单中的文字内容，使用 value

禁用某个表单，不能再次点击使用 disabled

2个新的表单事件 获取焦点onfocus 失去焦点onblur

    <input type="text" value="手机">
    <script>
        // 1.获取元素
        var text = document.querySelector('input');
        // 2.注册事件  获取焦点事件  onfocus
        text.onfocus = function() {
            console.log('得到焦点');
        }
        // 3.注册事件  失去焦点事件 onblur
        text.onblur = function() {
            console.log('失去焦点');
        }
    </script>

2.3.4 修改样式属性

    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件  处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法
            this.style.backgroundColor = 'purple'; // 改变背景颜色
        }
    </script>

还有一种方式式用来修改标签的类名。在CSS中写一个类选择武器。

2.3.5 操作元素总结

2.3.6 排他思想(算法)

鼠标事件

鼠标经过 onmouseover 鼠标离开 onmouseout

2.3.7 自定义属性的操作

1. 获取自定义属性

这两种方法的区别：

2. 设置移除自定义属性

2.3.8 H5 自定义属性

2.4 节点操作

这是获取元素的常用方法之二；

第一个是利用DOM提供的方法来获取元素，但是这种方法逻辑性不强，繁琐。但兼容好。

利用节点层级关系获取元素，其特点：

利用父子兄节点关系获取元素；

逻辑性强，但兼容性稍差；

一般情况，节点拥有 nodeType（节点类型）、nodeName（节点名称）、nodeValue(节点值)

2.4.1 节点层级

1. 父级节点

        // 1. 父节点  parentNode
        var erweima = document.querySelector('.erweima');
        erweima.parentNode;    
        // 父节点    得到离元素最近的父节点   如果找不到父节点就返回 null

2. 子节点

一般不提倡用。

        // （1）.子节点  childNodes 所有的子节点 包含  元素节点  文本节点 等等。。。
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);

        // (2). children  获取所有的子元素节点   常用于实际开发中
        console.log(ul.children);

        // 获取第一/最后一个节点
        // 1. firstChild 第一个子节点  不管是文本节点还是元素节点
        console.log(ul.firstChild);
        console.log(ul.lastChild);
        // 2. firstElementChild  返回第一个子元素节点
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);
        // 实际开发写法 ： 既没有兼容性问题，又返回第一个子元素
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length - 1]); // 最后一个元素

3. 兄弟节点

考虑到兼容性：

        var div = document.querySelector('div');
        // nextSibling  下一个兄弟节点  包含元素节点 或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // nextElementSibling  得到下一个兄弟节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);

2.4.2 创建、添加、删除节点

创建节点：

添加节点：

        // （1）创建元素节点
        var li = document.createElement('li');
        // (2) 添加节点  node.appendChild(child)  node父级  child子级  后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // (3). 添加节点 node.insertBefore(child, 指定元素);
        var li2 = document.createElement('li');
        ul.insertBefore(li2, ul.children[0]);

删除节点：

        // （4）删除节点  node.removeChild(child);
        var btn = document.querySelector('button');
        // ul.removeChild(ul.children[0]);
        // 点击按钮依次删除元素
        btn.onclick = function() {
            if (ul.children.length == 0) {
                alert('所有内容已经删除完了！！！');
                this.disabled = ture;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }

复制节点：

        // (5) 复制节点
        // 浅复制 node.cloneNode(); 括号为空或者里面是false  浅复制：只复制标签不复制里面的内容
        var lili = ul.children[0].cloneNode();
        ul.appendChild(lili);
        // 深复制 node.cloneNode(); 里面是true  深复制：复制标签复制里面的内容
        var lili2 = ul.children[1].cloneNode();
        ul.appendChild(lili2);

2.4.3 三种动态创建元素区别

三种方式的区别：

document.write 是直接将内容写入页面的内容流。但是文档流执行完毕，则会导致页面全部重绘。

element.innerHTML:

1. 是将内容写入某个DOM节点，不会导致页面全部重绘

2. 创建多个元素效率更高（不要拼接字符串，采取数组的形式拼接），结构稍微复杂。

document.createElement()：创建多个元素的效率稍微低一点，但是结构更加清晰

总结：不同的浏览器下，innerHTML效率比creatElement高。

2.5 DOM重点核心（总结）

创建：

document.write innerHTML createElement

增：

appendChild

insertBefore

删：

removeChild

查：

改：

修改元素属性：src、href、title 等

修改普通元素内容：innerHTML、innerText

修改表单：value、type、disabled

修改元素样式： style、className

属性操作：

事件操作：

2.6 事件高级导读

2.6.1 注册事件

传统注册方式：

方法监听注册方式：

addEventListener事件监听方式：

        btns[1].addEventListener('click', function(){
            alert('azhe');
        })
        btns[1].addEventListener('click', function(){
            alert('不知道');
        })

attachEvent 事件监听方式（了解不建议在开发中使用）

        // 3. attachEvent  ie9 以前的版本支持
        btns[2].attachEvent('click', function() {
            alert(11);
        });

注册事件兼容性解决方案：

2.6.2 删除事件

删除事件兼容性解决方案：

2.6.3 DOM事件流

以给一个div注册了点击事件：

DOM 事件流分为3个阶段：

1. 捕获阶段 2.当前目标阶段 3. 冒泡事件

注意：

2.6.4 事件对象

事件对象也有兼容性的问题 ie678 通过window.event 兼容性的写法 e = e || window.event

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

target 和 this ：

e.target 返回的是触法事件的对象（元素） this 返回的是绑定事件的对象（元素）。

e.target 点击了那个元素就返回那个元素，this 那个元素绑定了这个点击事件，那么就返回谁

type返回事件类型：

事件对象阻止默认行为：

阻止事件冒泡（重点）：

兼容性解决方案：

事件委托：

事件委托的作用：

我们只操作了一次DOM，提高了程序性能。

    <script>
        // 事件委托的核心：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('事件委托');
            // e.target  这个可以获取我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

2.6.6 鼠标事件

1. 常用的鼠标事件

1. 禁止鼠标右键菜单：

2. 鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件的对象 MouseEvent 和键盘事件对象 KeyboardEvent 。

    <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>

2.6.7 键盘事件

1. 常用键盘事件：

    // 1. keyup 按键弹起的时候触法
    // document.onkeyup = function() { // 传统方式
    //     console.log('风起');
    // }
    document.addEventListener('keyup', function() {
        console.log('风起');
    })

    // 2. keydown 按键按下的时候触法
    document.addEventListener('keydown', function() {
        console.log('坐下');
    })

    // 3. keypress  按键按下的时候触法 但是它不识别功能键 比如 ctrl shift 箭头等
    document.addEventListener('keypress', function() {
        console.log('坐下press');
    })

2. 键盘事件对象

    // 键盘事件对象中的 keyCode 属性可以得到相应键的ASCII码值
    document.addEventListener('keyup', function(e) {
        console.log('up:' + e.keyCode);
        // 如果像区分大小写，可以将这个监听事件中 keyup 改为 keypress
    })

3. BOM浏览器对象模型

BOM概述

3.1 window对象的常见事件

3.1.1 窗口加载事件

注意：

        // 传统注册方式    只能执行一个事件
        window.onload = function() { 
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击');
            })
        }

        // 新的注册方式
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击');
            })
        })

        // document.addEventListener('DOMContentLoaded', function()) 
        document.addEventListener('DOMContentLoaded', function() {
            alert(22);
        })

3.1.2 调整窗口大小事件

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数。

可以利用此函数来完成响应式布局。

注意：

        // 调整窗口大小
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth); // 获取窗口的宽度
                console.log('变化了');

                if(window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })

3.2 定时器

window 对象提供了两种定时器：setTimeout（）、 setInterval（）

3.2.1 两种定时器--- setTimeout（）

        // 语法： window.setTimeout(调用函数， 延迟时间)；
        // (1). 这个window 在调用的时候可以省略， 如果省略默认的是0
        // (2).单位： 毫秒  但是可以省略 若省略默认为0
        // (3).在调用函数时，可以是直接写函数  还可以 写 函数名
        // (4). 在同一个页面中可能有很多个定时器，我们经常会给定时器加标识符
        function call() {
            alert('时间到');
        }
        var time = setTimeout(call , 3000);

回调函数：

清除函数：

        // 清除定时器setTimeout
        btn.addEventListener('click', function() {
            clearTimeout(time);
        })

3.2.2 两种定时器 ---- setInterval()

与setTimeout不同的是：它重复调用同一个回调函数。

清除函数：

        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var time = null;    // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            time = setInterval(function() {
                console.log('开启定时器');
            },2000);
        })

        stop.addEventListener('click', function() {
            clearInterval(time);
        })

3.2.3 this

3.3 JS执行队列

3.3.1 同步和异步

同步：

异步：

他们的本质区别就是：这条流水线上各个流程的执行顺序不同。

JS 执行机制

事件循环

3.4 location 对象

location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location对象。

3.4.1 URL

3.4.2 location 对象的属性

重点是（ href 和 search ）

具体的操作可以在浏览器的控制台中进行操作。

3.4.3 location 对象方法

    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // location.assign() 这个方法可以实现跳转，并且可以后退
            location.assign('https://space.bilibili.com/437759560?spm_id_from=333.788.0.0');

            // location.replace 不记录历史 不可以实现后退
            location.replace('https://space.bilibili.com/437759560?spm_id_from=333.788.0.0');

            // location.reload() 重新加载页面，相当于 f5  如果里面参数为true ==> 强制刷新 ctrl+f5
            location.reload();
        })
    </script>

3.5 navigator 对象

下面前端代码可以判断用户那个终端打开页面，实现跳转

3.6 history 对象

    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            history.forward(); //前进功能

            history.back();  // 后退功能

            // go（） 参数为正 表示前进  参数为负 表示后退
            history.go(1);
        })
    </script>

4. PC端网页特效异读

4.1 元素偏移量 offset 系列

4.1.1 offset 概述

        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // offsetTop   offsetLeft
        // 1. 可以得到元素的偏移 位置 返回的不带单位数值
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以带有定位的父亲为准  如果没有或者父亲没有定位 则以 body 为准
        console.log(son.offsetLeft);

        var w = document.querySelector('.w');
        // 2. 可以得到元素的大小  宽度和高度  是包含 padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);

        // 3. 返回带有定位的父亲 否则返回的是 body
        console.log(son.offsetParent); //返回带有定位的父亲
        console.log(son.parentNode);  //返回父亲 是最近一级的父亲 不管父亲是否带有定位

4.1.2 offset 和 style

offset是一个只读属性

style是一个可读写的属性。

4.2 元素可视区 client系列

4.1.4 立即执行函数

4.3 元素滚动scroll系列

滚动到窗口至文档中的特定位置： window.scroll(x,y) x,y 代表横纵坐标不加单位

4.3.1 页面被卷去头部兼容性解决方案

4.4 三大系列总结

他们的主要用法：

4.5 mouseover 和 mouseenter 区别

mouseenter 鼠标事件

4.6 动画原理

通过定时器不断改变元素的位置。

4.6.1 简单动画封装

4.6.2 给不同的元素记录不同的定时器

4.6.3 缓动动画原理

动画函数从在多个目标值之间移动

将函数封装到 JS文件中去。

手动调用点击事件可以用方法： arrow_r.click();

自动调用点击事件可以用方法： next.click();

技巧：

if(callback) {
    callback();
}
// 等价于
callback && callback();

4.7 节流阀

防止轮播图按钮连续点击造成播放过快。

5. 移动端

5.1 触屏事件

5.1.1 触屏事件概述：

        // 1. 获取元素
        var div = document.querySelector('div');
        //  手指触摸DOM元素事件
        div.addEventListener('touchstart', function() {
            console.log('触摸到');
        })
        //  手指在DOM元素身上移动
        div.addEventListener('touchmove', function() {
            console.log('滑动');
        })
        // 手指离开DOM元素事件
        div.addEventListener('touchend', function() {
            console.log('离开');
        })

5.1.2 触摸事件对象（TouchEvent）

5.1.3 移动端拖动元素

5.2 移动端常见特效

5.2.1 在移动端click事件300ms演示问题解决方案

### 原因的产生：

移动端双击屏幕时会缩放屏幕，之所以没有被判定为两次单独的点击事件，是因为在点击时，会有 300ms 的判断时间，若第二次点击的时间距第一次小于了 300ms，则判断为双击事件。

### 要想消除这 300ms 的判断时间，即连点两次则表示两次单独的点击事件，有两种方法：

方法一：

粗暴型，禁用缩放，禁止浏览器的默认双击事件：

在系统标签中加入上述代码

方法二：

写一个封住函数，若触摸和松开的时间小于 300ms，则立即调用回调函数

click演示解决方案（了解）：

        //封装tap，解决click 300ms延时
        function tap (obj, callback) {
            var isMove = false;
            var startTime = 0; //记录触摸时候的时间变量

            obj.addEventListener('touchstart', function (e) {
            startTime = Date.now(); //记录触摸时间
            });

            obj.addEventListener('touchmove',function (e){
                isMove = true;//看看是否有滑动，有滑动算拖拽，不算点击
            });

            obj.addEventListener ('touchend', function (e) {
                if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms算点击
                    callback && callback(); //执行回调函数
                }
                isMove = false; // 取反  重置
                startTime = 0;
            });
        }
        //调用
        tap (div, function() {  /* 执行代码 */  });

方法三：

使用 fastclick 插件

原理是检测到 touchend 事件后，立刻触发模拟 click 事件，并且把浏览器 300 毫秒之后真正触发的事件给阻断掉