JS——DOM/BOM基础

已于 2023-04-05 16:14:39 修改
阅读量806 收藏 2
点赞数 2
分类专栏： 前端学习 蓝桥杯WEB备赛 文章标签： javascript 开发语言 ecmascript
于 2023-04-05 15:08:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tommy__li/article/details/129955705
版权

文章目录

前言

在刷蓝桥杯web题目和笔试的时候都发现对原生js的操作占比很多，自己之前学的时候是写的挺不错的，但是在使用vue之后对原生dom操作就没那么熟悉了。
所以还是要写一个笔记来记录重点，这样复习的时候就可以很快的捡起来了。

Web API

在这里插入图片描述
在这里插入图片描述
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

DOM（最重要的）

文档对象模型（Document Object Model，简称 DOM）

DOM树

在这里插入图片描述
文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示（el缩写一般就表示元素）
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看做是对象

获取元素

主要记录几个常用的即可。
1.根据 ID 获取：
document.getElementById(‘id’);

2.根据指定选择器获取：
document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’); // 根据指定选择器返回
注意：
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);

事件基础（重要）

事件三要素：
在这里插入图片描述
事件逻辑：
在这里插入图片描述

常见的鼠标事件：

在这里插入图片描述

操作元素

改变元素内容

注意两者的区别，优先使用innerHTML
在这里插入图片描述

div.innerHTML = '<strong>今天是：</strong> 2019';  //html标签会被识别，起效果，但是innerText就不能识别

JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

操作元素是 DOM 核心内容
在这里插入图片描述

排他性（重要）

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

  1. 所有元素全部清除样式（干掉其他人）
  2. 给当前元素设置样式 （留下我自己）
  3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

案例：
在这里插入图片描述
点击某一个按钮显示颜色，这里必须要先干掉其他人，再设置自己！

<script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>

利用循环绑定注册事件，一定要书熟练这种方法！

节点操作

创建节点：
document.createElement(‘tagName’)
添加结点：
node.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾
在这里插入图片描述
所以要多用innerHTML。

自定义属性

不是官方定义的属性都是自定义属性，那么此时获取这些属性和修改这些属性都必须要用自定义属性的方法。

	var data = document.querySelector("div");
	console.log(data.getAttribute("data-index")); // 获取自定义属性
	data.setAttribute("data-name","Tom"); // 设置自定义属性

总结

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

最重要的还是那些案例吧，我觉得可以把pink老师的那些案例好好写一下。
还有就是一定好记住js的操作是可以用逻辑语法的，别忘了！

事件高级

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式
特别要注意方法监听注册方式，因为它是w3c标准推荐方式，所以要优先使用，addEventListener（）
addEventListener(type, listener，flag）
type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on，但要加’ '号
listener：事件处理函数，事件发生时，会调用该监听函数
flag：true/false
是 true 那么则处于捕获阶段，是 false 或者 省略 那么则处于冒泡阶段

    // 2. 事件侦听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })

在这里插入图片描述

兼容性问题解决：

//注册事件兼容性解决方案 
function addEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持 addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
 } 
//删除监听事件兼容性解决方案
 function removeEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持 removeEventListener 方法
      if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
      } else {
        element['on' + eventName] = null;
 }

删除监听：
eventTarget.removeEventListener(type, listener）

            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
          function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

事件流（重要）

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

事件对象（重要）

这里是我基础不牢的一个地方，之前疏忽了这里。

eventTarget.addEventListener('click', function(event) { }）
这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
在我看来事件e有点像上下文这个概念，跟事件相关的一系列信息都在这
这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。
只需要定义形参 e 就可以获取到事件。
console.log(e)就可以看看事件对象里面有什么了。e除了target这个属性很重要外，还有就是鼠标的位置了，这些都是比较常见的！
在这里插入图片描述
在这里插入图片描述

例子：我们给ul 绑定了事件 ，点击ul里的li，this此时就会指向ul，而e.target指向li。但是e.currentTarget 则跟this很像，指向的是ul
在这里插入图片描述
在这里插入图片描述

**事件冒泡：**开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。

阻止事件冒泡：
标准写法：利用事件对象里面的 stopPropagation()方法
e.stopPropagation()

 // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
        }, false);

阻止默认事件：

// 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
            })

事件委托

在这里插入图片描述
在这里插入图片描述

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


        })

常见键盘事件（了解，用的少）

在这里插入图片描述

BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM缺乏标准
在这里插入图片描述
在这里插入图片描述

window（了解）

在这里插入图片描述
这里做一个了解即可
在这里插入图片描述
这个像是生命周期函数，oncreate这种的作用。
在这里插入图片描述
在这里插入图片描述

定时器(重要)

setTimeout() / setInterval()

setTimeout()

在这里插入图片描述
在这里插入图片描述

// window.setTimeout(调用函数, 延时时间);
// 这个window在调用的时候可以省略
//页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
 function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        
    //清除定时器
           window.clearTimeout(timer);//window可以省略
 
        清除定时器

setInterval（） 循环定时器

在这里插入图片描述

//例子
 setInterval(function() {
            console.log('继续输出');
        }, 1000);
//定时器例子：
  // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2023-4-5 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);//每1s都会调用一次函数，不断的刷新

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
        //清除定时器
           window. clearInterval(timer);//window可以省略

一个手机短信倒计时的案例，也很经典：

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 60; // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>
</body>

JS执行机制（超级重要）

这里的知识点也是面试题里面很容易被问到的，包括在代码中也会经常出现的，我觉得可以在八股里再次记录一下！
JS是单线程，这个是必须要知道的，基础中的基础
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
JS的异步是通过回调函数实现的，后面呢还会有promise和async+await来实现，这里的知识点可以一起汇总。

非常重要的一点，那就是JS是先执行同步任务再执行异步任务，这是最基础的一个概念，后面还有宏任务和微任务
在这里插入图片描述
在这里插入图片描述
简单来说就是，还是单线程的感觉，但是异步任务是放到一边单独执行的，然后等同步任务执行完再依次执行异步任务的结果。
这里还有很多可以深挖的，包括promise等内容，再多多总结一下！

location对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。
location是前端路由实现的一种方式，是加#锚点的，location.hash

URL解析

在这里插入图片描述

location属性和方法

在这里插入图片描述
在这里插入图片描述

history对象

这个对于后面的前端路由问题来说就是基础，前端路由的另一个实现就是由history这个属性来实现的！
在这里插入图片描述

快乐本乐
关注
专栏目录
JavaScript——DOM1
m0_56712012的博客
01-20 287
文章标题一、Web API介绍1.API的概念2.API 和 Web API 总结二、DOM1.什么是DOM2.DOM树三、获取元素1.根据ID获取2.根据标签名获取元素3.H5新增获取元素方式4.获取特殊元素（body，html）四、事件基础 一、Web API介绍 1.API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作
JavaScript——BOM/DOM
Bb77_的博客
02-08 138
JavaScript——BOM/DOM、数据渲染、回流和重绘
JavaScript基础——DOM和BOM的常用api
蜡笔不新的博客
12-01 1792
DOM和BOM所有常用的API都在这里
前端——DOM与BOM总结
qq_53256193的博客
09-30 1942
DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在DOM中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象。
JS中的对象模型——DOM、BOM
qq_62225979的博客
03-06 379
DOM和BOM是Web开发中的两个重要模型 Javascript可以通过DOM定位指定的元素，属性，进而实现查找、修改、创建等操作
网页开发——DOM与BOM
han2434的博客
08-15 1070
在现代网页开发的世界中，DOM（Document Object Model）和BOM（Browser Object Model）是两个核心概念，它们为开发者提供了强大的工具，以构建动态、交互式的网页应用。本文将深入探讨DOM和BOM的基本原理、功能以及它们如何共同作用于网页开发。
JavaScript——DOM和BOM
云祁QI
10-20 1030
一：DOM操作 1、 介绍 dom: document object model 文档对象模型 DOM可以让我们通过javascript语言对html文档进行增、删、改、查操作。 为了方便javascript语言通过dom操作html文档比较方便，把html文档的各个组成内容划分为各种节点(对象)： 文档节点(document)，其是html根节点的父节点 元素节点 文本节点 属性节点 注释节点...
前端——JavaScript操作BOM与DOM
m0_74098588的博客
07-26 718
specs:窗口特征属性(窗口的宽度width、窗口的高度 height)，属。node.attr 获取节点的attr属性值，只支持节点自带的属性的值。对于文本节点，节点的值树文本内容,对于属性节点，节点的值包含属。node.getAttribute(attr) 获取节点的 attr属性值，支持获取自定义属性的值。firstElementChild 获取当前节点的第一个子节点，不包含文本节点和注释节点。
JavaScript基础学习笔记之四——DOM&BOM
weixin_50970194的博客
07-29 1094
DOM和BOM基本解析
JavaScript基础知识——DOM和BOM
03-15 129
QA：1、DOM是哪种基本的数据结构（树形结构） 　　 2、DOM操作常用的API有哪些 　　 3、DOM节点的Attribute和property有何区别 　　 4、如何检测浏览器的类型 navigator.userAgent // navigator var ua = navigator.userAgent var isChrome = ua.indexO...
c认证web进阶dom与bom
10-03
ID和CLASS的区别 DOM上 1、DOM结构及节点 2、常用节点获取方法和属性 3、常用的节点属性获取方式 关于图片复制到csdn编译器不识别问题 ...DOM下 ...1、DOM修改 ...2、DOM添加 ...————————————
2023高薪前端面试题（一、前端基础——HTTP/HTML/浏览器）
iaz999的博客
04-29 3308
语义化就是构成HTML结构的标签要有意义。比如有这样的标签：header表示页面头部main表示页面主题footer表示页面底部那么这些标签构成的HTML结构就是有意义的，也是语义化的。​ 如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。
JavaScript——DOM(1)
Scccc_的博客
03-03 977
js学习笔记
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1119
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
qq_30049249的博客
11-02 84
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1339
项目功能：商品分类,商品信息,用户。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 660
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 215
遍历echarst多个图表，并添加独立的缩放函数
基于SpringBoot+Vue的快递物流信息查询系统设计与实现【前后端分离】
最新发布
m0_67428300的博客
11-02 557
随着电子商务的快速发展，快递物流系统的重要性愈发突出。针对用户对快递信息的实时查询需求，本系统结合Spring Boot和Vue技术，设计并实现了一个高效、易用的快递物流信息查询系统。系统实现了用户信息管理、订单查询、物流跟踪等功能，用户可通过简单操作即可查询快递状态，实现信息的实时展示。本快递物流信息查询系统基于Spring Boot与Vue的开发，前后端分离架构提升了系统的扩展性和开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值