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

  1. DOM对象：浏览器根据html标签生成的 JS对象

    所有的标签属性都可以在这个对象上面找到

    修改这个对象的属性会自动映射到标签身上

  2. DOM的核心思想： 把网页内容当做对象来处理

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

注意

  1. 修改样式通过style属性引出

  2. 如果属性有-连接符，需要转换为小驼峰命名法

  3. 赋值的时候，需要的时候不要忘记加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中删除节点
     
 












本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/11001.html


如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！












相关文章










看懂本文，入门神经网络Neural Network








看懂本文，入门神经网络Neural Network




神经网络&#xff08;Neural Network&#xff09; 
1.1图片 
每一个图片都是三维数组&#xff0c;每个像素的值为0-255&#xff0c;如 训练集Training Dataset&#xff1a;“上课学的知识”&#xff0c;用于训练模型得到参数 
验证集Validation Dataset&#xff1a;“课后习题”…




阅读更多...

















Zoho Books助外贸，应收账款简化管








Zoho Books助外贸，应收账款简化管




ZohoBooks财务管理软件助外贸企业精准管理客户信息&#xff0c;简化跨境开票&#xff0c;集成支付网关自动对账&#xff0c;智能提醒跟进账款&#xff0c;提供强大报表分析功能&#xff0c;支持多币种和当地税法&#xff0c;促进财务健康与资金回笼。 一、精准的客户信息管理 
…




阅读更多...

















保姆级教程！！教你通过【Pycharm远程】连接服务器运行项目代码








保姆级教程！！教你通过【Pycharm远程】连接服务器运行项目代码




小罗碎碎念 
这篇文章主要解决一个问题——我有服务器&#xff0c;但是不知道怎么拿来写代码&#xff0c;跑深度学习项目。确实&#xff0c;玩深度学习的成本比较高&#xff0c;无论是前期的学习成本&#xff0c;还是你需要具备的硬件成本&#xff0c;都是拦路虎。小罗没有办法…




阅读更多...

















作业调度和程序装入内存








作业调度和程序装入内存




作业调度 
我们知道&#xff0c;磁盘上的可执行程序只有装入内存&#xff0c;成为进程才可以运行。在磁盘上有许多的可执行程序等待被操作系统唤入内存执行&#xff0c;我们把可执行程序在磁盘上的调度称之为作业调度。 
注意&#xff1a;这种说法听起来好像是作业在磁盘上的调…




阅读更多...

















广义布里渊区方程推导过程中一个公式的理解








广义布里渊区方程推导过程中一个公式的理解




是对DOI: 10.1103/PhysRevLett.123.066404补充材料公式(S25)的理解 
clear;clc;close all
q2;
N1;Mq*N;
syms LMatsym(zeros(2*M,2*M));for ii1:MTp[];for jj1:2*M%eval([syms , f,num2str(ii),num2str(jj)]);eval([syms ,f,num2str(ii),_beta,num2str(jj),_ES])%eval([temp,f,…




阅读更多...

















嵌入式linux中HDMI驱动操作方法








嵌入式linux中HDMI驱动操作方法




大家好，今天主要给大家分享一下，linux系统里面的HDMI驱动实现方法。 第一：HDMI基本简介 HDMI 全称为 High Definition Multimedia Interface，也就是高清多媒体接口，是一个纯数字的音视频传输接口，通过一根线同时发送音视频数据。目前在电视、显示器、电脑、机顶盒等领域得…




阅读更多...

















边缘的检测








边缘的检测




边缘检测效果&#xff0c;是一种用于突出图像中的边缘&#xff0c;使物体的轮廓更加明显的图像处理技术&#xff0c;边缘检测的主要目的是找到图像中亮度变化显著的区域&#xff0c;这些区域通常对应于物体的边界&#xff0c;边缘检测相当于利用 Shader 代码自动给屏幕图像进行…




阅读更多...

















架构篇（05理解架构的服务演化）








架构篇（05理解架构的服务演化）




目录 学习前言 
一、服务演化简介 
二、方向一&#xff1a;架构服务化 
单体分层架构 
面向服务架构 - SOA 
微服务架构 - Microservices 
云原生架构 - Cloud Native 
三、方向二&#xff1a;部署容器编排化 
虚拟机 
容器 
Kubernetes 与编排 
四、参考文献 学习前言 
Kubern…




阅读更多...

















娶老婆花了30万彩礼，结婚2个月，她前夫给我20万，让我老婆和他生孩子！








娶老婆花了30万彩礼，结婚2个月，她前夫给我20万，让我老婆和他生孩子！




我叫李志强&#xff0c;今年32岁&#xff0c;在一家物流公司当经理。去年我娶了我老婆张美玲&#xff0c;为了这场婚礼&#xff0c;我花了30万彩礼。美玲比我小3岁&#xff0c;是个护士&#xff0c;长得漂亮又温柔&#xff0c;我觉得自己找到了真爱。 结婚前&#xff0c;美玲就…




阅读更多...

















基于SpringBoot的国风服装商城系统+LW示例参考








基于SpringBoot的国风服装商城系统+LW示例参考




1.项目介绍 
系统角色&#xff1a;管理员、普通用户功能模块&#xff1a;管理员&#xff08;用户管理、商品管理、分类管理、订单管理、系统管理、在线客服等&#xff09;&#xff0c;普通用户&#xff08;登录注册、个人中心、评价管理、收藏管理、订单管理等、咨询服务等&…




阅读更多...

















GB/T 43206—2023信息安全技术信息系统密码应用测评要求（五）








GB/T 43206—2023信息安全技术信息系统密码应用测评要求（五）




文章目录 附录AA.1 概述A.2 密钥产生A.3 密钥分发A.4 密钥存储A.5 密钥使用A.6 密钥更新A.7 密钥归档A. 8 密钥撤销A.9 密钥备份A.10 密钥恢复A.11 密钥销毁 附录B附录C 附录A 
A.1 概述 
密钥管理对于保证密钥全生存周期的安全性至关重要 ,可以保证密钥(除公开密钥外) 不被非授…




阅读更多...

















jmeter常用配置元件介绍总结之前置处理器、测试片段








jmeter常用配置元件介绍总结之前置处理器、测试片段




系列文章目录 安装jmeter jmeter常用配置元件介绍总结之前置处理器、测试片段 6.前置处理器6.1用户参数6.2取样器超时6.3.测试片段6.4JSR223 PreProcessor6.5.JDBC PreProcessor 6.前置处理器 
在取样器请求之前执行的操作&#xff0c;优先级比取样器高&#xff0c;用来处理一些…




阅读更多...

















【IT人物系列】之Java之父








【IT人物系列】之Java之父




前言 
当今世界由无数的人构成&#xff0c;其中有些人做了一些改变世界的事情&#xff0c;比如&#xff1a;乔布斯缔造了Apple帝国&#xff0c;‌詹姆斯高斯林创造了Java语言等。正是这些优秀的人做的这些优秀的事情&#xff0c;让这个世界更加美好。因此他们值得铭记。 从今天…




阅读更多...

















鸿蒙开发基础入门








鸿蒙开发基础入门




一、熟悉目录结构 二、ArkTS语法介绍 
ArkTS是为构建高性能应用设计的编程语言&#xff0c;语法继承TypeScript&#xff0c;并进行了优化&#xff0c;拥有更强的类型约束ArkTS提供了声明式UI范式&#xff0c;符合移动开发的最新趋势 ArkTS摒弃了部分影响运行时的性能的语法&…




阅读更多...

















大数据机器学习算法和计算机视觉应用01：博弈论基础








大数据机器学习算法和计算机视觉应用01：博弈论基础




Game Theory 
2-player Zero Sum GameMinimax Optimal StrategiesVon Neumann’s Minimax TheoremLower Bounds for Randomized AlgorithmsGeneral sum games, Nash quilibria 
(p.s:该系列是国际交流学术公开课的笔记&#xff0c;主讲人是Carnegie Melon University的终身教授…




阅读更多...

















如何安装和配置JDK17








如何安装和配置JDK17




教程目录 零、引言1、新特性概览2、性能优化3、安全性增强4、其他改进5、总结 一、下载安装二、环境配置三、测试验证 零、引言 
JDK 17&#xff08;Java Development Kit 17&#xff09;是Java平台的一个重要版本&#xff0c;它带来了许多新特性和改进&#xff0c;进一步提升了…




阅读更多...

















【C++进阶】智能指针的使用及原理（1）








【C++进阶】智能指针的使用及原理（1）




1. 智能指针的使用场景分析 下面程序中我们可以看到&#xff0c;new了以后&#xff0c;我们也delete了&#xff0c;但是因为抛异常导&#xff0c;后面的delete没有得到执行&#xff0c;所以就内存泄漏了&#xff0c;所以我们需要new以后捕获异常&#xff0c;捕获到异常后delete…




阅读更多...

















计算机课程管理：Spring Boot实现的工程认证路径








计算机课程管理：Spring Boot实现的工程认证路径




摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于工程教育认证的计算机课程管理平台的开发全过程。通过分析基于工程教育认证的计算机课程管理平台管理的不足&#xff0c;创建了一个计算机管理基于工程教育认…




阅读更多...

















【人工智能训练师】综合案例 HBase与Hive的集成








【人工智能训练师】综合案例 HBase与Hive的集成




9.1 HBase与Hive 
任务目的 简单回顾了解hive 了解hive与hbase的区别 任务清单 任务1&#xff1a;hive简介 任务2&#xff1a;hbase与hive的区别 任务步骤 任务1&#xff1a;hive简介 　　什么是Hive呢&#xff1f; Apache Hive是一个构建在Hadoop基础设施之上的数据仓库。 
构…




阅读更多...

















基于STM32的图像处理监控系统








基于STM32的图像处理监控系统




1. 引言 随着物联网和智能家居的普及&#xff0c;图像处理和监控系统在安全防范、家庭监控等方面应用越来越广泛。本项目旨在使用STM32开发板和OV7670摄像头模块搭建一个简单的图像处理监控系统。系统能够捕获图像并进行基本的处理与展示。 
2. 环境准备2.1 硬件需求 - STM32开…




阅读更多...





























最新文章






























Copyright @ 2022~2023