当前位置: 首页 > news >正文

查漏补缺 - JS三 WebAPI

目录

  • BOM
    • history
  • DOM
    • 操作DOM
      • 1,`dom.children` 和 `dom.childNodes` 区别
      • 2,`dom.remove()`
      • 3,其他常用 API
    • DOM 属性
      • 1,标准属性
      • 2,自定义属性
    • DOM 内容
    • DOM样式
    • DOM事件

JavaScript 包括 EcmaScriptWebAPI

  • EcmaScript 包括 语言规范+标准库。浏览器和 node 环境都完整支持。
  • WebAPI 包括 BOM + DOM,是浏览器自己实现的,所以各个浏览器厂商可能略有区别。
    • BOM,Browser Object Model,浏览器模型,提供和浏览器相关的操作
    • DOM,Document Object Model,文档模型,提供和页面相关的操作

在这里插入图片描述

setTimeout 虽然是 WebAPI,但浏览器和 node 都实现了。node 中的全局对象是 global:global.setTimeout

在这里插入图片描述

BOM

主要指 window 对象的一些常用属性和函数。

  • location
  • history
  • setTimeout

经典启停计时器:

var timerId = null;function start() {if (timerId) {return;}timerId = setInterval(() => {console.clear();console.log(new Date().toLocaleString());}, 1000);
}function stop() {clearInterval(timerId);timerId = null; // 否则 start 中判断永远为 true
}

history

提供当前窗口历史记录的操作。

无法获取历史记录,因为这是用户隐私。只能控制前进后退。

API作用备注
window.history.back()后退
window.history.forward()前进
window.history.go()相对当前页面,进入指定记录页
window.history.pushState()添加一条历史记录页面不刷新
window.history.replaceState()替换当前记录页面不刷新

历史记录是一个模式,后进先出。

pushState 举例

DOM

操作DOM

1,dom.childrendom.childNodes 区别

二者得到的都是伪数组。

  • dom.children 获取 dom 的子元素
  • dom.childNodes 获取 dom 的子节点
<div id="test">这是 <span>DOM</span>元素</div>

在这里插入图片描述
可以直接修改 DOM 元素的内容

const div = document.querySelector("#test");
div.children[0].textContent = '123' // 也可以修改其他的属性,比如 innerHTML innerText

2,dom.remove()

是指从 DOM 树中删除,这个 js 对象还在。

在这里插入图片描述

一个使用场景:如果下面这个 libutton 元素是动态创建的,可以在创建时给 button 绑定事件来执行 li.remove()

<li><button id="btn">删除</button>
</li>

3,其他常用 API

API含义备注
dom.previousElementSibling得到 dom 前一个兄弟元素
dom.nextElementSibling得到 dom 后一个兄弟元素
dom.parentElement得到 dom 的父元素
dom.remove()从文档树中删除 domdom 对象还在
dom.removeChild()删除 dom 的某个子节点参数为 dom 对象
dom.insertBefore(newNode, referenceNode)在 dom 的子节点中,添加一个新节点到指定节点之前referenceNode 为指定节点
dom.appendChild()添加一个新节点到 dom 的子节点末尾参数为 dom 对象

DOM 属性

这里的【属性】,指 HTML 元素的【属性】

  • 标准属性:html元素自身拥有的。比如 a.hrefinput.valueimg.src
  • 自定义属性

1,标准属性

通过dom.属性名 获取,并有以下规则:

1,布尔属性会被自动转换为 boolean

2,路径类的属性会被转换为绝对路径

<img src="./vue.svg" alt="" />

在这里插入图片描述

3,标准属性始终都是存在的,不管你是否设置该属性

4,class 由于和关键字重名,因此获取和设置 class 时使用 className

<div class="test">123</div>

在这里插入图片描述

2,自定义属性

  • 获取 dom.setAttribute(name, value)
  • 设置 dom.getAttribute(name)

如果用获取自定义属性的 API 获取标准属性,获取的是 html 源代码中的内容

<img src="./vue.svg" alt="" />

在这里插入图片描述

DOM 内容

dom.innerTextdom.innerHTML 这2个比较熟悉,不多赘述。

还有一个 dom.textContent,它和dom.innerText 的区别看这里。

  • textContent 或获取所有元素的内容,包括隐藏的。
  • innerText 受 css 影响,只获取展示的内容。而且因为受 css 影响,为了确保获取最新的计算样式,会触发 reflow(重排)

vue 中的 v-html 通过 innerHTML 实现;v-text 通过 textContent 实现。

DOM样式

通过 window.getComputedStyle() 获取最终计算样式。

通过 dom.style 获取和设置内联样式,并有以下规则:

<div style="color: red; font-size: 18px;">123</div>

1,当给样式赋值为空字符串时,相当于删除内联样式

$0.style.color = '' // 删除 color 样式

2,当给样式的赋值不合法时,赋值语句无效,不会报错

$0.style.color = 'abc' // color 保持原值,该语句不报错。

3,CSS 的短横线命名法,在属性名中表现为驼峰命名法

$0.style.fontSize = '20px'

DOM事件

opacity: 0; 的元素,点击可以触发事件。
visibility: hidden; 的元素,不能触发事件。

1,注册事件的对象

不同的对象,可以注册的事件列表。

可以注册事件的对象包括 windowHTMLElementDocument

2,事件回调函数中的 this 指向注册事件的对象。

<button>点击</button>
<script>let btn = document.querySelector("button");btn.addEventListener("click", function () {console.log(this);});btn = null;
</script>

上面的 this 依旧是 button 元素,因为 btn 只是存放了 button 元素对象的引用地址。
换句话说,通过 btn 给 button 元素注册事件后,btn 对事件处理函数来说,已经没用了。

3,事件对象 event

MDN - Event

不同的事件对应不同的事件对象,比如 clickPointerEventkeydownKeyboardEvent。并且事件对象的属性也不同。

4,DOM2DOM3 事件的区别

取消监听的写法,DOM2 只需要设置为 null 即可。

btn.onclick = function() {} // 监听btn.onclick = null // 取消监听

5,默认行为

a 的默认行为是在 click 事件上的。阻止后就无法跳转。

相关文章:

查漏补缺 - JS三 WebAPI

目录 BOMhistory DOM操作DOM1&#xff0c;dom.children 和 dom.childNodes 区别2&#xff0c;dom.remove()3&#xff0c;其他常用 API DOM 属性1&#xff0c;标准属性2&#xff0c;自定义属性 DOM 内容DOM样式DOM事件 JavaScript 包括 EcmaScript 和 WebAPI EcmaScript 包括 语…...

如何熟练使用vector?

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 &#x1f…...

gitlab-rake gitlab:backup:create 执行报错 Errno::ENOSPC: No space left on device

gitlab仓库备份执行 gitlab-rake gitlab:backup:create报错如下&#xff1a; 问题分析&#xff1a;存储备份的空间满 解决方法&#xff1a; 方法1&#xff1a;清理存放路径&#xff0c;删除不需要文件&#xff0c;释放空间。 方法2&#xff1a;创建一个根目录的挂载点&#x…...

【Nginx】负载均衡当其中一台服务器宕机之后

搭建一个简单的负载均衡&#xff0c;然后关闭其中一台再来访问&#xff0c;会发现我们的浏览器卡住一直转圈圈&#xff0c;过了很久才会显示结果。由此我们可以得出结论Nginx负载的时候如果其中一台服务挂掉了&#xff0c;它会把请求转发到另一个可以提供服务的机器&#xff0c…...

每日一题 2511. 最多可以摧毁的敌人城堡数目

难度&#xff1a;简单 翻译&#xff1a;寻找距离最远的 1 和 -1 的组合&#xff0c;要求它们之间只有0 class Solution:def captureForts(self, forts: List[int]) -> int:res, t 0, -1for i, fort in enumerate(forts):if fort -1 or fort 1:if t > 0 and fort ! f…...

NLP(六十七)BERT模型训练后动态量化(PTDQ)

本文将会介绍BERT模型训练后动态量化&#xff08;Post Training Dynamic Quantization&#xff0c;PTDQ&#xff09;。 量化 在深度学习中&#xff0c;量化&#xff08;Quantization&#xff09;指的是使用更少的bit来存储原本以浮点数存储的tensor&#xff0c;以及使用更少的…...

机器学习和数据挖掘04-PowerTransformer与 MinMaxScaler

概念 PowerTransformer&#xff08;幂变换器&#xff09; PowerTransformer 是用于对数据进行幂变换&#xff08;也称为Box-Cox变换&#xff09;的预处理工具。幂变换可以使数据更接近正态分布&#xff0c;这有助于某些机器学习算法的性能提升。它支持两种常用的幂变换&#x…...

1.15 自实现GetProcAddress

在正常情况下&#xff0c;要想使用GetProcAddress函数&#xff0c;需要首先调用LoadLibraryA函数获取到kernel32.dll动态链接库的内存地址&#xff0c;接着在调用GetProcAddress函数时传入模块基址以及模块中函数名即可动态获取到特定函数的内存地址&#xff0c;但在有时这个函…...

总结ADX指标交易的好处

股神巴菲特从一个穷小子变成世界富豪&#xff0c;而闻名世界。anzo capital昂首资本以为这辈子再也不会和巴菲特产生任何交集&#xff0c;直到我看了巴菲特的发家史&#xff0c;才发现原来我们都使用过ADX指标盈利过&#xff0c;下面anzo capital昂首资本就总结一下使用ADX指…...

ConsoleApplication815项目(直接加载+VEH Hook Load)

上线图 ConsoleApplication815.cpp #include <iostream> #include<Windows.h> #include "detours.h" #include "detver.h" #pragma comment(lib,"detours.lib")#pragma warning(disable:4996)LPVOID Beacon_address; SIZE_T Beacon…...

事务(SQL)

事务概述 事务是一组操作的集合&#xff0c;他是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向西永提交或撤销操作请求。这组操作&#xff0c;要么全部执行成功&#xff0c;要么全部执行失败。 事务操作 查看/设置事务提交方式 -- 查看/设置事务…...

原型,原型链,继承(圣杯模式)

经典模式和圣杯模式区别 经典模式和圣杯模式都是用于解决构造函数继承和原型继承的问题&#xff0c;但它们在实现继承的方式上有所不同。 经典模式是通过将子类的原型对象设置为父类的实例来实现继承&#xff0c;然后将子类的构造函数设置为子类本身。这样子类既可以继承父类…...

远程方法调用中间件Dubbo在spring项目中的使用

Dubbo是一个分布式服务框架&#xff0c;它可以帮助我们快速开发和提供高性能、高可靠性的分布式服务&#xff0c;同时提供服务治理、容错、负载均衡等功能。 使用Dubbo可以分为以下步骤&#xff1a; 引入Dubbo依赖&#xff1a;在项目的pom.xml文件中引入Dubbo的依赖。编写服务…...

MFC -- Date Time Picker 控件使用

当前环境&#xff1a;VS2015 Windows 10 //&#xff08;一&#xff09;使用普通函数&#xff0c; 获取当前时间CString strCurrentTime; COleDateTime m_time COleDateTime::GetCurrentTime(); strCurrentTime m_time.Format(_T("%Y-%m-%d %H:%M:%S")); SetDlgIt…...

zookeeper 集群

zookeeper 集群 1、zookeeper 集群说明 initLimit 是Zookeeper用它来限定集群中的Zookeeper服务器连接到Leader的时限 syncLimit 限制了follower服务器与leader服务器之间请求和应答之间的时限 服务器名称与地址&#xff1a;集群信息&#xff08;服务器编号&#xff0c;服务器…...

stable diffusion实践操作-随机种子seed

系列文章目录 stable diffusion实践操作 文章目录 系列文章目录前言一、seed是什么&#xff1f;二、使用步骤1.多批次随机生成多张图片2.提取图片seed3. 根据seed 再次培养4 seed使用4.1 复原别人图4.1 轻微修改4.2 固定某个人物-修改背景 三、差异随机种子1. webUI位置2. 什么…...

大数据可视化大屏实战项目(4)物流数据云看台(包括动态登陆页面)—HTML+CSS+JS【源码在文末】(可用于比赛项目或者作业参考中)

大数据可视化大屏实战项目&#xff08;4&#xff09;物流数据云看台&#xff08;包括动态登陆页面&#xff09;—HTMLCSSJS【源码在文末】&#xff08;可用于比赛项目或者作业参考中&#x1f415;&#x1f415;&#x1f415;&#xff09; 一&#xff0c;项目概览 ☞☞☞☞☞☞…...

在ubuntu下远程链接仓库gitte/github

后期适当加点图片&#xff0c;提高可读性。 本教程是最基础的连接教程&#xff0c;设计git的操作也仅仅局限于push/pull&#xff0c;如果想全面了解&#xff0c;可以参考廖雪峰git教程 在Ubuntu上初始化本地Git仓库并链接到远程Gitee仓库(github同理)&#xff0c;需要按照以下步…...

一些自己整理的工具实用参数

工具实用参数 sqlmap -u: 指定需要测试的目标URL&#xff08;格式&#xff1a;http://www.example.com/test.php?id1&#xff09; --cookie: 设置需要发送的 HTTP Cookie&#xff0c;例如&#xff1a;--cookie"sid123456;PHPSESSID654321" --threads&#xff1a;…...

C# Timer定时器

C# Timer定时器 Timer定时器定时器主要用到的就是Timer的Tick事件&#xff0c;另外还要设置时间间隔&#xff1a; 下面这个实力演示了每隔一秒&#xff0c;picturebox中的图片来回切换&#xff0c;每隔一秒&#xff0c;文本框中显示当前时间。 using System; using System.Co…...

oracle怎么删除表索引

Oracle是目前常用的企业级关系型数据库管理系统&#xff0c;用于存储和管理大量数据。在Oracle中&#xff0c;表索引是用于提高查询效率的重要组成部分&#xff0c;但也有时候需要删除表索引。本文将介绍如何在Oracle中删除表索引。 一、查看表索引 在删除表索引之前&#xff…...

【Tkinter系列13/15】标准化外观和选项数据库

27. 标准化外观和选项数据库 可以轻松地将颜色、字体和其他选项应用于 小部件&#xff0c;当您创建它们时。然而 如果您希望很多小部件具有相同的 背景颜色或字体&#xff0c;指定每个都很乏味 每次选项&#xff0c;以及 让用户覆盖您的选择是很好的 他们最喜欢的配色方案、字…...

springboot 集成dubbo

上一篇我们一起认识了Dubbo与RPC&#xff0c;今天我们就来一起学习如何使用Dubbo&#xff0c;并将Dubbo集成到Spring Boot的项目中。我们来看下今天要使用到的软件及版本&#xff1a; 软件 版本 说明 Java 11 Spring Boot 2.7.13 Spring Boot 3.0版本开始&#xff0c;最…...

基于YOLOV8模型和CCPD数据集的车牌目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOV8模型和CCPD数据集的车牌目标检测系统可用于日常生活中检测与定位车牌目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算…...

net user安全隐患

net user test 123456 /add #添加一个test账户,密码是123456net user test /delete #删除test账户windows administrator权限下删除其他账户&#xff0c;难道不需要知道该账户的密码吗&#xff1f; 以前没太注意&#xff0c;但是这算不算是一个漏洞呢&#xff1f; 另外&#…...

深入剖析Kubernetes之资源模型和GPU 管理

文章目录 资源模型QoS 模型GPU 管理 资源模型 在 Kubernetes 里&#xff0c;Pod 是最小的原子调度单位。这也就意味着&#xff0c;所有跟调度和资源管理相关的属性都应该是属于 Pod 对象的字段。而这其中最重要的部分&#xff0c;就是 Pod 的 CPU 和内存配置&#xff0c;如下所…...

Springboot整合HBase

Springboot整合HBase数据库 1、添加依赖 <!-- Spring Boot HBase 依赖 --> <dependency><groupId>com.spring4all</groupId><artifactId>spring-boot-starter-hbase</artifactId> </dependency> <dependency><groupId>…...

在不同操作系统上如何安装符号表提取工具(eu-strip)

前言 C开发的小伙伴都知道符号表在调试和解决崩溃时扮演着非常重要的角色&#xff0c;那么如何提取和保存发布应用程序的符号表就变得非常重要。今天就来聊一下如何在不同的操作系统上使用eu-strip提取应用程序中的符号表信息。 正文 问题 如何在不同操作系统上安装符号表提…...

钡铼R40边缘计算网关与华为云合作,促进物联网传感器数据共享与应用

场景说明 微型气象是不可预测的&#xff0c;基本上不能通过人工手段来分析其变化&#xff0c;因此必须运用新技术&#xff0c;对气象进行实时监测&#xff0c;以便采取相应的措施来避免或解决事故的发生。而常规气象环境数据采集容易造成数据损失、人力成本高、数据安全性差、…...

图表背后的故事:数据可视化的威力与影响

数据可视化现在在市场上重不重要&#xff1f;这已经不再是一个简单的问题&#xff0c;而是一个不可忽视的现实。随着信息时代的来临&#xff0c;数据已经成为企业和组织的核心资产&#xff0c;而数据可视化则成为释放数据价值的重要工具。 在当今竞争激烈的商业环境中&#xf…...