JavaScript API部分知识点
一、Dom获取&属性操作
(一)、 Web API 基本认知
1、变量声明
const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型,const声明的变量,里面存的不是 值,是 地址。
有了变量先给const,如果发现它后面是要被修改的,再改为let
const中数组和对象里面可以修改因为栈没改变地址
2、作用和分类
作用: 就是使用 JS 去操作 html 和浏览器
分类:DOM (文档对象模型)、BOM(浏览器对象模型)
3、什么是DOM
DOM 是文档对象模型
作用:操作网页内容,可以开发网页内容特效和实现用户交 互
4、DOM树
将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
作用:文档树直观的体现了标签与标签之间的关系
5、DOM对象
-
DOM对象:浏览器根据html标签生成的 JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
-
DOM的核心思想: 把网页内容当做对象来处理
-
document 对象: 是 DOM 里提供的一个对象
它提供的属性和方法都是用来访问和操作网页内容的
(二)、获取DOM对象
1、 根据CSS选择器来获取DOM元素 (重点)
1)选择匹配的第一个元素
语法:document.querySelector()
2.参数: 包含一个或多个有效的CSS选择器 字符串
3.返回值: CSS选择器匹配的第一个元素,一个 HTMLElement对象。
4.如果没有匹配到,则返回null。
实例:
<html lang="en">
<style>.box {width: 200px;height: 100px;background-color: aqua;}
</style>
<body><p id='nav'>首页</p><div class="box"> 123</div><script>//1、标签名获取console.log(document.querySelector(`div`));//2、类选择器获取console.log(document.querySelector(`.box`));//console.dir() 打印元素对象的属性和方法console.dir(document.querySelector(`div`))//3、ID选择器获取console.log(document.querySelector(`#nav`));//4、获取第一个对象console.log(document.querySelector(`ul li:first-child`));//获取第一个小li</script>
</body>
</html>
2)选择匹配的多个元素
语法:
document.querySelectorAll(``)
参数: 包含一个或多个有效的CSS选择器 字符串
返回值: CSS选择器匹配的NodeList 对象集合
例如:
document.querySelectorAll(`ul li`)
document.querySelectorAll(``)得到的是一个伪数组:有长度有索引号的数组;但是没有 pop() push() 等数组方法想要得到里面的每一个对象,则需要遍历(for)的方式获得。
实例
//5、获取全部的小li divconsole.log(document.querySelectorAll(`div`));//[div.box, div.box, div.box]let s = document.querySelectorAll(`div`)
//6、遍历 for循环for (let i = 0; i< s.length; i++) {console.log(s[i]);//数组类型的打印console.dir(s[i]);//对象的形式打印}
3) 他们两者小括号里面的参数注意事项
** 里面写css选择器 ;**
** 必须是字符串,也就是必须加引号**
2、其他获取DOM元素方法(了解)
//1、根据id获取一个元素console.log(document.getElementById('nav'));//2、根据 标签获取一类元素 获取页面 所有divconsole.log(document.getElementsByTagName('div'));//[div.box, div.box, div.box]//3、根据 类名获取元素 获取页面 所有类名为 box的console.log(document.getElementsByClassName('box'));//[div.box, div.box, div.box]
(三)、操作元素内容
1、元素innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本,不解析标签
实例
<p class="info">你好js</p><script>//获取标签内部的文字const info = document.querySelector(`.info`)//添加/修改标签内部文字内容info.innerTest ="hello"//对<p>内容进行了更新,页面上只显示hello</script>
2、元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签,多标签建议使用模板字符
<p class="info">你好js</p><script>//获取标签内部的文字const info = document.querySelector(`.info`)//添加/修改标签内部文字内容info.innerHTML ="<strong>hello<strong>"//对<p>内容进行了更新,页面上只显示hello</script>
(四)、操作元素属性
1、操作元素常用属性
语法:
对象.属性 = 值
实例
<body><img src="./01.jpg" alt=""><script>//1、获取元素const img = document.querySelector(`img`)//2、操作元素img.src = './02.jpg'//更换了图片</script>
</body>
2、操作元素样式属性
1)、通过 style 属性操作CSS
语法:对象.style.样式属性 = 值
实例
<style>.box {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="box"></div><script>// 1. 获取元素const box = document.querySelector('.box')//2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位box.style.width = '300px'// 多组单词的采取 小驼峰命名法box.style.backgroundColor = 'hotpink'box.style.border = '2px solid blue'box.style.borderTop = '2px solid red'</script>
</body>
注意
-
修改样式通过style属性引出
-
如果属性有-连接符,需要转换为小驼峰命名法
-
赋值的时候,需要的时候不要忘记加css单位
2)、操作类名(className) 操作CSS
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。
语法:元素.calssName = '类名'
实例
<style>div {width: 200px;height: 200px;background-color: pink;} .box {width: 300px;height: 300px;background-color: skyblue;margin: 100px auto;padding: 10px;border: 1px solid #000;}
</style>
<body><div></div><script>//1、获取元素const div = document.querySelector(`div`)//2、添加类名 class 是关键字,我们用classNamediv.className = `box`</script>
</body>
注意
-
由于class是关键字, 所以使用className去代替
-
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类
div.className = `nav box`//box将nav覆盖了
3)、通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
方法名 | 方法 | 作用 |
---|---|---|
追加类 | 元素.classList.add('类名') | 追加一个类(类名不加点,并且是字符串) |
删除类 | 元素.classList.remove('类名') | 删除一个类(类名不加点,并且是字符串) |
切换类 | 元素.classList.toggle('类名') | 对所定的元素进行查询,有就删掉;没有就加上 |
3、 操作 表单元素 属性
1)获取表单里面的值与修改
innerHTML不能修改表单元素
<body><input type="text" value="请输入姓名"><script>//1、获取标签对象const input =document.querySelector(`input`)//2、获取值console.log(input.value);//3、修改input.value = 'sef'//修改值input.type = `password` //变成密码隐藏了</script>
</body>
2)按钮是否选中(checked)
<body><input type="checkbox" name="" id="box"><script>let box = document.querySelector(`#box`) //利用id选择器获取标签box.checked= true; //也可以带引号‘true’但是不提倡</script>
</body>
3),按钮是否禁用(disabled)
<body><button onclick="">点击</button><script>let button = document.querySelector(`button`)button.disabled = true;//按钮禁用 false不禁用</script>
</body>
4)、点击后显示的内容
<body><button onclick=" printHello()">点击</button><script>function printHello() {//点击访问alert(`hello`)}//使用此函数的同时,上面的onclick要引用函数</script>
</body>
4、自定义属性
-
语法:的data-自定义属性
-
在标签上一律以data-开头
-
在DOM对象上一律以dataset对象方式获取
-
实例:
-
<body><div data-id="1" data-spm="不知道">1</div><div data-id="2">2</div><div data-id="3">3</div><div data-id="4">4</div><div data-id="5">5</div><script>const one = document.querySelector('div')console.log(one.dataset.id) // 1 dataset相当于对象console.log(one.dataset.spm) // 不知道 对象.元素 取值</script> </body>
(五)、定时器-间歇函数
能够使用定时器函数重复执行代码
1、开启定时器
setInterval(函数,间隔时间) //间隔时间单位是毫秒
作用:每隔一段时间调用这个函数
注意:
-
函数名字不需要加括号
-
定时器返回的是一个id数字
例如:
<script>//方式一:function re() {console.log(`前端程序员`);}//每隔一秒调用函数setInterval(re, 1000) //注意此处函数不能加括号//方式二:使用匿名函数setInterval(function () { console.log(`hello`) }, 1000)let num = setInterval(re, 1000)console.log(num);//定时器返回的是id数字</script>
2、关闭定时器
语法:
let 变量名 = setInterval(函数, 间隔时间) clearInterval(变量名)
四、Dom节点&移动端滑动
(一)日期对象
(二)节点操作
1、DOM 节点
DOM树里每一个内容都称之为节点
DOM节点的分类?
-
元素节点 比如 div标签
-
属性节点 比如 class属性
-
文本节点 比如标签里面的文字
2、查找节点
1)父节点查找 :parentNode
-
返回最近一级的父节点 找不到返回为null
-
语法: 子元素.parentNode
-
实例:
<body>
<div class="yeye"><div class="dad"><div class="baby"></div></div>
</div><script>let baby = document.querySelector(`.baby`)console.log(baby.parentNode);//拿到dad bady的父级元素console.log(baby.parentNode.parentNode);//拿到yeye bady父级的父级元素
</script>
</body>
2)子节点查找:childNodes
获得所有子节点、包括文本节点(空格、换行)、注释节点等
children 属性 (重点)
-
仅获得所有元素节点
-
返回的还是一个伪数组
-
语法:父元素.children
-
实例:
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
<script>let ul = document.querySelector(`ul`)console.log(ul.children);//得到伪数组 存在五个小li对象console.log(ul.children[1]);//得到第二个元素对象li</script>
</body>
3)、兄弟关系查找
-
下一个兄弟节点 : nextElementSibling 属性
-
上一个兄弟节点 :previousElementSibling 属性
-
实例:
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
<script>let li = document.querySelector(`ul li:nth-child(3)`) /选择第三个小liconsole.log(li);//第三个小li的上一个兄弟console.log(li.previousElementSibling);//第三个小li的下一个兄弟console.log(li.nextElementSibling);
</script>
</body>
3、增加节点
1)、创建节点
即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
语法:
//创建一个心得元素节点document.createElement(`标签名`)
2)、追加节点
-
插入到父元素的最后一个子元素
语法: 父元素.appendChild(要插入的元素)
-
插入到父元素中某个子元素的前面:
语法:
父元素.insertBefore(要插入的元素,放在那个元素前面)//查找要插入的元素位置 使用父元素.children[下标] 进行查找
3)增加节点实例
<body>
<ul><li>我是老大</li>
</ul>
<script>//1、创建一个新节点let li = document.createElement(`li`)li.innerHTML = `我是老二`//修改值//2、追加节点//2.1、获取ullet ul=document.querySelector(`ul`)//2.2、插入到末尾//ul.appendChild(li)///2.3、插入到某一个元素前面,insertBefore(要插入的元素,放在那个元素前面)ul.insertBefore(li,ul.children[0])//ul.children[0]查子元素的第一个元素
</script>
</body>
4)、克隆节点
-
复制一个原有的节点
-
把复制的节点放入到指定的元素内部
-
语法:
//克隆一个已有的元素节点
元素.cloneNode(布尔值)
注意:
-
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
-
若为true,则代表克隆时会包含后代节点一起克隆
-
若为false,则代表克隆时不包含后代节点
-
默认为fals
实例:
<body><ul><li>1</li><li>2</li><li>3</li></ul>
<script>//1、获取到父节点let ul = document.querySelector(`ul`)//ul.children[0]//ul中的第一个元素let li = ul.children[0].cloneNode(true)//追加元素 (不带true的话只复制标签,而没有里面的值)ul.appendChild(li)</script>
</body>
4、删除节点
-
若一个节点在页面中已不需要时,可以删除它
-
在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
-
语法:
父元素.removeChild(要删除的元素)
父元素.remove() //删除全部元素
-
注:
如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点
相关文章:
JavaScript API部分知识点
一、Dom获取&属性操作 (一)、 Web API 基本认知 1、变量声明 const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化 但是对于引用数据类型,const声明的变量,里面存的不是 值,是 地址…...
钉钉调试微应用整理2
第一步 新建应用 钉钉开放平台](https://open-dev.dingtalk.com/) 去新增应用 第二步 配置应用信息 把本地代码运行起来,并设置本地地址 第三步 在本地代码添加调试命令 这里有2中添加方式 哪一种都可以 方式一: index.html页面中 <!DOCTYPE h…...
C++初级入门(1)
第一部分 基础语法入门 一、基础 1、变量与常量 1、变量 变量存在的意义:方便管理内存空间 2、常量 用于记录程序中不可更改的数据 #define 常量名 常量值 const 数据类型 常量名常量值 ; 2、数据类型 1、整型 short 2字节 int 4字节 long Wi…...
group_concat配置影响程序出bug
在 ThinkPHP 5 中,想要临时修改 MySQL 数据库的 group_concat_max_len 参数,可以使用 原生 SQL 执行 来修改该值。你可以通过 Db 类来执行 SQL 语句,从而修改会话(Session)级别的变量。 步骤 设置 group_concat_max_l…...
将Go项目编译为可执行文件(windows/linux)
windows 编译成windows环境exe可执行文件过程,打开文件所在目录,在资源路径框中输入cmd,打开cmd命令框,通过“go env”查看当期环境变量,以windows10环境为例,默认为windows环境。 // 配置环境变量 SET C…...
IMS高压发生器维修高压电源维修XRG100/1000
IMS高压发生器的硬件组成: 高压控制发生器主要由高压发生器和高压控制器两部分组成。高压控制器是控制调节X射线管管电压和管电流的机构,高压发生器是管电压和管电流产生的执行机构,通过高压控制器对高压发生器进行控制调节,通过高压电缆将高压发生器与X射线管连接…...
斯坦福泡茶机器人DexCap源码解析:涵盖收集数据、处理数据、模型训练三大阶段
前言 因为我司「七月在线」关于dexcap的复现/优化接近尾声了,故准备把dexcap的源码也分析下。下周则分析下iDP3的源码——为队伍「iDP3人形的复现/优化」助力 最开始,dexcap的源码分析属于此文《DexCap——斯坦福李飞飞团队泡茶机器人:带…...
RabbitMQ的DLX(Dead-Letter-Exchange 死信交换机,死信交换器,死信邮箱)(重要)
RabbitMQ的DLX 1、RabbitMQ死信队列2、代码示例2.1、队列过期2.1.1、配置类RabbitConfig(关键代码)2.1.2、业务类MessageService2.1.3、配置文件application.yml2.1.4、启动类2.1.5、配置文件2.1.6、测试 2.2、消息过期2.2.1、配置类RabbitConfig2.2.2、…...
【STM32F1】——舵机角度控制与TIM定时器
【STM32F1】——舵机角度控制与TIM定时器 一、简介 本篇主要对舵机DS-S002M模块调试过程进行总结,实现了以下功能: 1)舵机转动角度的控制:利用STM32F103C8T6的TIM定时器产生PWM信号控制舵机DS-S002M转动一定的角度。 二、DS-S002M数字舵机介绍 电压:4.8-6.0V操作角度:…...
想要成为独立游戏作者 :通关!游戏设计之道 2-1 HUD
HUD特指显示屏幕上的信息,在是UI的子集,UI是一个游戏中虽有的交互元素的总称 本文用了大量ai总结 + 个人微调,不喜勿喷,前篇如下想要成为独立游戏作者 :通关!游戏设计之道 1-4 操作篇-C…...
sql专题 之 三大范式
文章目录 背景范式介绍第一范式:属性不可再分第二范式第三范式注意事项 为什么不遵循后续的范式数据库范式在实际应用中会遇到哪些挑战? 背景 数据库的范式(Normal Form)是一组规则,用于设计数据库表结构以 减少数据冗…...
node.js安装和配置教程
软件介绍 Node.js是一个免费的、开源的、跨平台的JavaScript运行时环境,允许开发人员在浏览器之外编写命令行工具和服务器端脚本。 Node.js是一个基于Chrome JavaScript运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境,基于Goo…...
定时器输入捕获实验配置
首先,第一个时基工作参数配置 HAL_TIM_IC_Init( ) 还是一样的套路,传参是一个句柄,先定义一个结构体 Instance:指向TIM_TypeDef的指针,表示定时器的实例。TIM_TypeDef是一个包含了定时器寄存器的结构体,用…...
【C/C++】memcpy函数的使用
零.导言 当我们学习了strcpy和strncpy函数后,也许会疑惑整形数组要如何拷贝,而今天我将讲解的memcpy函数便可以拷贝整形数组。 一.memcpy函数的使用 memcpy函数是一种C语言内存函数,可以按字节拷贝任意类型的数组,比如整形数组。 …...
spring-security(两种权限控制方式)
案例(写死的用户密码) package com.zking.security.service;import org.springframework.security.core.GrantedAuthority; import org.springframework.security.core.authority.AuthorityUtils; import org.springframework.security.core.userdetails.User; import org.sp…...
【mongodb】数据库的安装及连接初始化简明手册
NoSQL(NoSQL Not Only SQL ),意即"不仅仅是SQL"。 在现代的计算系统上每天网络上都会产生庞大的数据量。这些数据有很大一部分是由关系数据库管理系统(RDBMS)来处理。 通过应用实践证明,关系模型是非常适合于客户服务器…...
【科普】卷积、卷积核、池化、激活函数、全连接分别是什么?有什么用?
概念定义作用/用途解释举例卷积 (Convolution)是一种数学操作,通过在输入数据(如图片)上滑动卷积核,计算局部区域的加权和。提取数据中的局部特征,例如边缘、角点等。卷积就像在图片上滑动一个小的窗口,计算…...
距离向量路由选择协议和链路状态路由选择协议介绍
距离向量路由选择协议(Distance Vector Routing Protocol)和链路状态路由选择协议(Link-State Routing Protocol)是两种主要的网关协议,它们用于在网络内部选择数据传输的最佳路径。下面分别介绍这两种协议:…...
【AI大模型】大型语言模型LLM基础概览:技术原理、发展历程与未来展望
目录 🍔 大语言模型 (LLM) 背景 🍔 语言模型 (Language Model, LM) 2.1 基于规则和统计的语言模型(N-gram) 2.2 神经网络语言模型 2.3 基于Transformer的预训练语言模型 2.4 大语言模型 🍔 语言模型的评估指标 …...
ubuntu 22.04 server 安装 和 初始化 LTS
ubuntu 22.04 server 安装 和 初始化 下载地址 https://releases.ubuntu.com/jammy/ 使用的镜像是 ubuntu-22.04.5-live-server-amd64.iso usb 启动盘制作工具 https://rufus.ie/zh/ rufus-4.6p.exe 需要主板 支持 UEFI 启动 Ubuntu22.04.4-server安装 流程 https://b…...
大数据机器学习算法与计算机视觉应用03:数据流
Data Stream Streaming ModelExample Streaming QuestionsHeavy HittersAlgorithm 1: For Majority elementMisra Gries AlgorithmApplicationsApproximation of count Streaming Model 数据流模型 数据流就是所有的数据先后到达,而不是同时存储在内存之中。在现…...
【代码随想录day25】【C++复健】491.递增子序列;46.全排列;47.全排列 II;51. N皇后;37. 解数独
491.递增子序列 本题做的时候除了去重逻辑之外,其他的也勉强算是写出来了,不过还是有问题的,总结如下: 1 本题的关键:去重 与其说是不知道用什么去重,更应该说是完全没想到本题需要去重,说明…...
AI智能识物(微信小程序)
AI智能识物,是一款实用的小程序。可以拍照智能识物,可识别地标、车型、花卉、植物、动物、果蔬、货币、红酒、食材等等,AI智能技术识别准确度高。 更新说明: 此源码为1.2.0版本。 主要更新内容:新增security.imgSec…...
游戏引擎学习第三天
视频参考:https://www.bilibili.com/video/BV1XTmqYSEtm/ 之前的程序不能退出,下面写关闭窗体的操作 PostQuitMessage 是 Windows API 中的一个函数,用于向当前线程的消息队列发送一个退出消息。其作用是请求应用程序退出消息循环,通常用于处…...
帝国CMS7.5仿模板堂柒喜模板建站网 素材资源下载站源码
环境要求:phpmysql、支付伪静态 本套模板采用帝国cms7.5版UTF-8开发,一款非常不错的高端建站源码模板, 适用于中小型网络建站工作室源码模板下载站,支持自定义设置会员组。 源码下载:https://download.csdn.net/down…...
聊一聊Spring中的自定义监听器
前言 通过一个简单的自定义的监听器,从源码的角度分一下Spring中监听的整个过程,分析监听的作用。 一、自定义监听案例 1.1定义事件 package com.lazy.snail;import lombok.Getter; import org.springframework.context.ApplicationEvent;/*** Class…...
【王木头】最大似然估计、最大后验估计
目录 一、最大似然估计(MLE) 二、最大后验估计(MAP) 三、MLE 和 MAP 的本质区别 四、当先验是均匀分布时,MLE 和 MAP 等价 五、总结 本文理论参考王木头的视频: 贝叶斯解释“L1和L2正则化”ÿ…...
智谱AI视频生成模型CogVideoX v1.5开源 支持5/10秒视频生成
今日,智谱技术团队发布了其最新的视频生成模型 CogVideoX v1.5,并将其开源。这一版本是自8月以来,智谱技术团队推出的 CogVideoX 系列中的又一重要进展。 据了解,此次更新大幅提升了视频生成能力,包括支持5秒和10秒的视…...
算法(第一周)
一周周五,总结一下本周的算法学习,从本周开始重新学习许久未见的算法,当然不同于大一时使用的 C 语言以及做过的简单题,现在是每天一题 C 和 JavaScript(还在学,目前只写了一题) 题单是代码随想…...
Linux服务器进程的控制与进程之间的关系
在 Linux 服务器中,进程控制和进程之间的关系是系统管理的一个重要方面。理解进程的生命周期、控制以及它们之间的父子关系对于系统管理员来说至关重要。以下是关于进程控制、进程之间的关系以及如何管理进程的详细介绍: 1. 进程的概念 进程࿰…...
深圳中小企业网站制作/接广告赚钱的平台
本文提供了一个linux下访问GPIO的约定的概述。这些调用使用gpio_* 命名前缀。没有别的调用会使用这个前缀或是相关的__gpio_*前缀。转自:http://blog.163.com/w541097221126/blog/static/9550215201472152343989/ 什么是GPIO?GPIO----“通用目的输入/输出…...
b2b典型电子商务平台/seo优化在线
转载于:https://www.cnblogs.com/linjingjia/p/7435205.html...
长沙做企业网站/免费视频网站推广软件
python中如果在while循环中是return会导致循环中断[root10.144.5.223root]#cattest_while_return.pycount0while(count6):printThecountis:,countcountcount1python中如果在while循环中是return会导致循环中断[root10.144.5.223 root]# cat test_while_return.pycount 0while …...
网站可以用cdr做吗/青岛seo关键词优化公司
我正在查看通过数据库并找到有效电话号码的python脚本。与我的问题相关的脚本部分如下所示:country_code ""(然后进一步向下):for i, entry in enumerate(feed.entry):for phone in entry.phone_number:# Strip out any non numeric characte…...
代理网站下载/网站排名工具
最近老大有个需求,就是想把一些服务监控起来,发生故障并能够自动重启,这里我就拿ftp练了一下手 1.修改zabbix系统自带的模板 注意:key 这里可以使用监控服务的方式,也可以使用监控端口的方式net.tcp.listen[port] 2.创…...
深圳沙井做公司网站/怎么快速排名
1. 图像滤波 目的:保证图像细节特征的条件下抑制图像噪声。 1.1 线性滤波 1.11 方框滤波 原图像与内核的系数加权求和 方框滤波的核: normalize true 时,方框滤波就变成了均值滤波。也就是说,均值滤波是方框滤波归一化&a…...