JavaScript 基础 DOM (三)

news2024/9/22 7:39:39

日期对象

实例化

获得当前时间

const date = new Date()

获得指定时间
const date1 = new Date(' 指定时间')

方法

// 1. 实例化
  const date = new Date();
  // 2. 调用时间对象方法
  // 通过方法分别获取年、月、日,时、分、秒
  const year = date.getFullYear(); // 四位年份

时间戳

获取时间戳:
  1. 使用 getTime() 方法
  2. 简写 +new Date()
  3. 使用 Date.now()

 

 

 

 

节点操作

查找节点

父节点查找:子元素.parentNode

子节点查找: 父元素.cihldren

兄弟关系查找:
  • 下一个兄弟节点   nextElementSibling 属性
  • 上一个兄弟节点    previousElementSibling 属性

插入节点

 

1.创建节点   document.createElement('标签名')
2.追加节点 
插入到父元素的最后一个子元素:
  父元素.appendChild('插入元素')
插入到父元素中某个子元素的前面
克隆节点     
元素.cloneNode(true)

 

删除节点

父元素.removeChlid(子元素)

  • 如不存在父子关系则删除不成功
  •  删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点

M端事件

触屏事件 touch

 

JS插件

https://www.swiper.com.cn/

重绘和回流

回流(重排)
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的 过程称为 回流。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、 outline等), 称为重绘。
  重绘不一定引起回流,而回流一定会引起重绘。

Window对象

BOM(浏览器对象模型)

定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout

语法:

setTimeout 仅仅只执行一次
清除延时函数
 
延时器需要等待,所以后面的代码先执行
每一次调用延时器都会产生一个新的延时器

JS执行机制

同步任务
同步任务都在主线程上执行,形成一个 执行栈。
异步任务
JS 的异步是通过回调函数实现的。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为 事件循环

location对象

location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分

常用属性和方法:

  • href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
  • search 属性获取地址中携带的参数,符号 ?后面部分
  • hash 属性获取地址中的啥希值,符号 # 后面部分
  • reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新
navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息

常用属性和方法:

通过 userAgent 检测浏览器的版本及平台

histroy对象

history 的数据类型是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退、历史记 录等

本地存储 

本地存储介绍

1、数据存储在 用户浏览器
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大,sessionStorage和localStorage约 5M 左右

本地存储分类

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在
语法:
存储数据: localStorage.setItem(key, value)
获取数据: localStorage.getItem(key)
删除数据: localStorage.removeItem(key)

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型

因为本地存储里面取出来的是字符串,不是对象,无法直接使用
语法:JSON.stringify(复杂数据类型)
把取出来的字符串转换为对象
语法:JSON.parse(JSON字符串)

数组map 方法

map 可以遍历数组处理数据,并且返回新的数组

语法:

<body>
  <script>
  const arr = ['red', 'blue', 'pink']
  // 1. 数组 map方法 处理数据并且 返回一个数组
   const newArr = arr.map(function (ele, index) {
    // console.log(ele)  // 数组元素
    // console.log(index) // 索引号
    return ele + '颜色'
    })
console.log(newArr)
</script>
</body>

数组join方法 

作用:join() 方法用于把数组中的所有元素转换一个字符串

语法:

<body>
  <script>
    const arr = ['red', 'blue', 'pink']

    // 1. 数组 map方法 处理数据并且 返回一个数组
    const newArr = arr.map(function (ele, index) {
      // console.log(ele)  // 数组元素
      // console.log(index) // 索引号
      return ele + '颜色'
    })
    console.log(newArr)

    // 2. 数组join方法  把数组转换为字符串
    // 小括号为空则逗号分割
    console.log(newArr.join())  // red颜色,blue颜色,pink颜色
    // 小括号是空字符串,则元素之间没有分隔符
    console.log(newArr.join(''))  //red颜色blue颜色pink颜色
    console.log(newArr.join('|'))  //red颜色|blue颜色|pink颜色
  </script>
</body>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JDK8以后接口的新特性

JDK8以前&#xff0c;接口内只能定义抽象方法&#xff1b; JDK8&#xff0c;接口内允许定义默认方法、静态方法&#xff1b; JDK9&#xff0c;接口内允许定义私有方法 default&#xff1a;默认方法 public interface Essay01 {/*** 在接口内定义默认方法*/public default v…

CMU - FarPlanning 代码速读

https://github.com/MichaelFYang/far_planner https://www.cmu-exploration.com/ 系统结构 Far Planner 属于 High-level planning module&#xff0c;进行全局规划&#xff0c;找到可行路径&#xff1b;将 way_point发布给 Local planner和 path following KeyPoint Local-la…

帮公司面了个要21K的测试,结果.....

深耕IT行业多年&#xff0c;我们发现&#xff0c;对于一个程序员而言&#xff0c;能去到一线互联网公司&#xff0c;会给我们以后的发展带来多大的影响。 很多人想说&#xff0c;这个我也知道&#xff0c;但是进大厂实在是太难了&#xff0c;简历投出去基本石沉大海&#xff0…

arm嵌入式系统下,手把手教你移植pppoe拨号客户端,使用pppoe拨号上网

移植pppoe拨号客户端 一、概述二、移植过程1、内核配置2、pppd工具编译3、pppoe工具编译 三、配置pppoe参数四、创建节点信息五、pppoe服务器搭建 一、概述 PPPoE&#xff08;英语&#xff1a;Point-to-Point Protocol Over Ethernet&#xff09;&#xff0c;以太网上的点对点协…

Windows GUI自动化控制工具之python uiAutomation

对 Windows GUI进行自动化控制的工具有很多&#xff0c;比如pywinauto、pyautogui、pywin32、Autoit、airtest、UIAutomation等&#xff0c;UI Automation API是微软提供的自动化框架&#xff0c;可在支持 Windows Presentation Foundation (WPF) 的所有操作系统上使用&#xf…

Niagara—— Niagara Editor界面

目录 一&#xff0c;菜单栏 二&#xff0c;工具栏 三&#xff0c;预览面板 四&#xff0c;参数面板 五&#xff0c;系统总览面板 六&#xff0c;暂存区面板 七&#xff0c;选择面板 打开Niagara Editor&#xff1a; 双击Niagara发射器或系统&#xff1b;右击Niagara发射…

Qt--事件分发器

写在前面 在 Qt 中&#xff0c;事件分发器(Event Dispatcher)是一个核心概念&#xff0c;用于处理 GUI 应用程序中的事件。事件分发器负责将事件从一个对象传递到另一个对象&#xff0c;直到事件被处理或被取消。 每个继承自QObject或QObject的类都可以在本类中重写bool even…

基于 Amazon API Gatewy 的跨账号跨网络的私有 API 集成

一、背景介绍 本文主要讨论的问题是在使用 Amazon API Gateway&#xff0c;通过 Private Integration、Private API 来完成私有网络环境下的跨账号或跨网络的 API 集成。API 管理平台会被设计在单独的账号中(亚马逊云科技提供的是多租户的环境)&#xff0c;因为客观上不同业务…

生于零售的亚马逊云科技,如何加速中国跨境电商企业出海?

导读&#xff1a;跨境电商进入精耕细作的新阶段。 作为中国企业出海的重要领域之一&#xff0c;近几年跨境电商行业处在快速发展中。商务部数据显示&#xff0c;2022年中国跨境电商出口达1.55万亿&#xff0c;同比增长11.7%。2023年1-2月&#xff0c;跨境电商进出口总额同比增长…

【wpf】视觉树上找元素的注意事项

前言 我们通过 VisualTreeHelper类 可以在视觉树上找元素&#xff0c;下面提供几个封装好的方法&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Media; using Sy…

分析| Flutter 3.10版本有哪些变化?

Flutter是Google推出的一款用于构建高性能、高保真度移动应用程序、Web和桌面应用程序的开源UI工具包。Flutter使用自己的渲染引擎绘制UI&#xff0c;为用户提供更快的性能和更好的体验。Flutter还提供了丰富的构建工具、库和插件&#xff0c;使开发人员能够更快地构建应用程序…

从浅入深理解序列化和反序列化

文章目录 什么是java序列化什么情况需要使用 Java 序列化为什么要序列化序列化和反序列化过程如下RPC 框架为什么需要序列化序列化用途序列化机制可以让对象地保存到硬盘上&#xff0c;减轻内存压力的同时&#xff0c;也起了持久化的作用序列化机制让Java对象可以在网络传输 实…

LINUX 提权 脏牛CVE-2016-5195

这里写复现过程&#xff0c;不写原理 Linux内核 > 2.6.22&#xff08;2007年发行&#xff0c;到2016年10月18日才修复&#xff09; 靶场环境是vluhub上的。网卡自己配置好 nmap扫一下 80端口开的&#xff0c;上去 52.136 再扫 1898开放 访问开干 是个cms msf上线找这…

【VictoriaMetrics】VictoriaMetrics单机版批量和单条数据写入(opentsdb格式)

VictoriaMetrics单机版支持以opentsdb格式的数据写入包含linux形式和postman形式,写入支持单条数据写入以及多条数据写入,下面操作演示下如何使用 1、首先需要启动VictoriaMetrics单机版服务 注意,如果支持opentsdb协议需要在启动单机版VictoriaMetrics的时候加上opentsdbH…

一、尚医通微信登录

文章目录 一、登录需求1、登录需求 二、微信登录1、OAuth21.1OAuth2解决什么问题1.1.1 开放系统间授权1.1.2图例1.1.3方式一&#xff1a;用户名密码复制1.1.4方式二&#xff1a;通用开发者key1.1.5方式三&#xff1a;颁发令牌 1.2 OAuth2最简向导1.2.1 OAuth主要角色1.2.2最简向…

就业内推 | 国企招运维、网安,五险一金全额缴,最高15k

01 北京安信创业信息科技发展有限公司 &#x1f537;招聘岗位&#xff1a;网络运维岗 &#x1f537;职责描述&#xff1a; 1、负责北区数据中心、总部数据中心、部本部、21家在京直属事业单位内网网络系统的日常运行维护工作。 2、负责网络故障的应急处置。 3、负责网络系统…

决策树及决策树的划分依据(ID3、C4.5、CART)

一、决策树是什么&#xff1f; 决策树是一种基于树状结构的机器学习算法&#xff0c;用于解决分类和回归问题。它是一种自上而下的递归分割方法&#xff0c;通过对特征空间的递归划分来构建一个树形模型&#xff0c;用于进行预测和决策。在决策树中&#xff0c;每个内部节点表…

Redis概述

前言 为什么要使用Redis? ​ 如果熟悉JVM底层的话&#xff0c;就能了解Java程序的运行大多数都是基于对内存的操作&#xff0c;读取、并更、清理&#xff0c;并同时保证数据的可靠性。即使是数据库&#xff0c;例如MySQL几乎都是基于对缓冲区的操作&#xff0c;只是通过后台…

(常见)数据模型

文章目录 数据模型概述一、数据模型概要1.模型、建模与抽象2.数据模型3.两类数据模型 二、数据库模型的组成要素1.数据结构2.数据操作3.数据的完整性约束 三、概念模型1.概要2.基本概念3.概念模型的表示方法 常用数据模型一、层次模型1.简介2.数据结构3.数据操纵与完整性约束4.…

二叉搜索树中第K小的元素

给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 个最小元素&#xff08;从 1 开始计数&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,1,4,null,2], k 1 输出&#xff1a;1 示例 2&#xff1a; 输入&am…