第三周晨考自测(3.0)

1.获取元素的偏移量

offsetLeft和offsetTop

分别获取的是元素元素左边的偏移量和上边的偏移量

语法:元素对象.offsetLeft  /元素对象.offsetTop

返回值:就是该元素对应的偏移量,是一个具体的数字

offsetLeft:该元素相对于参考父级的左侧偏移量

offsetTop:钙元素相对于参考父级的上侧偏移量

clientLeft和clientTop

其值相当于左边框和上边框的宽度

2.获取元素的尺寸

offsetWidth和offsetHeight

语法:元素对象.offsetWidth/元素对象.offsetHeight

offsetWidth:获取的是元素内容+padding+border的宽度

offsetHeight:获取的是元素内容+padding+border的高度

不管盒子模型是什么状态(也就是是不是怪异盒模型),都是内容+padding+border

当元素为display:none;的时候,是拿不到尺寸的

clientWidth和clientHeight

语法:元素对象.clientWidth/元素对象.clientHeight

返回值:该元素的宽度和高度

clientWidth:获取的是元素内容+padding的宽度

clientHeight:获取的是元素内容+padding的高度

不管盒子模型是什么状态,其都是内容+padding

注意:获取到的尺寸是没有单位的数字

当元素在页面中不占位置的时候,获取到的是0

3.获取窗口的尺寸(DOM级别)

document.documentElement.clientWidth:可视窗口的宽度,不包含滚动条

document.documentElement.clientHeight:可视窗口的高度,不包含滚动条的尺寸

4.获取节点的方式有哪些

childNodes

作用:获取某一节点下所有的子一级节点(也就是说子集节点里面嵌套的节点获取不到其标签,但是可以获取到内容,与父节点一起展示)

语法:父节点.childNodes

返回值:是一个伪数组,里面是所有的子节点

children

作用:获取某一节点下所有子一级节点(与上面一样,获取不到一级节点里面的嵌套节点)

语法:父节点.children

返回值:所有的子元素节点,是一个伪数组

firstChild

作用:获取某一个节点下一级的第一个节点

语法:父节点.firstChild

返回值:不再是伪数组了,只是获取到一个节点

lastChild

作用:获取某一节点下一级的最后一个节点

语法:父节点.lastChild

返回值:就是最后一个子节点

firstElementChild

作用:获取某一节点下一级第一个元素节点

语法:元素对象.firstElementChild

返回值:第一个子元素节点,不是伪数组

lastElementChild

作用:获取某一节点下一级最后一个元素节点

语法:原始对象.lastElementChild

返回值:最后一个子元素节点,不是伪数组

nextSibling

作用:获取某一个节点的下一个兄弟节点

语法:元素对象.nextSibling

返回值:也是一个节点(下一个兄弟节点),注意节点和元素节点的区别,这里还是节点,包括空白字符形成的文本节点

previousSibling

作用:previousSibling:获取某一个节点的上一个兄弟节点

语法:元素对象.previousSibling

返回值:上一个兄弟节点

nextElementSibling

作用:获取某一个节点的下一个元素节点

语法:元素对象.nextElementSibling

返回值:下一个兄弟元素节点

previousElementSibling

作用:获取某一个节点的上一个元素节点

语法:元素对象.previousElementSibling

返回值:上一个兄弟元素节点

parentNode

作用:获取某一个节点的父节点

语法:原始对象.parentNode

返回值:父节点,这里必是一个元素节点,因为文本节点或其他节点不可能当父节点,就和父元素节点有一点不同,当多次调用父节点的时候,顶级父节点是document,而父元素节点的顶级节点是document,而父元素节点的顶级节点的顶级元素节点是HTML

parentElement

作用:parentElement获取某一节点的父元素节点

语法:原始对象.parentElement

返回值:父元素节点

attributes

作用:attributes:获取某一个元素节点的所有属性节点

返回值:是一个伪数组,存放该元素的所有属性节点

5.节点的操作

创建节点:createElement(创建原始节点)

document.createElement(‘要创建的节点’)

createTextNode:用于创建一个文本节点

语法:document.createTextNode(‘要写的文本内容’)

返回值:就是一个文本节点,不是字符串

增加一个节点

父节点.appendChild(要插入的节点)

父节点.insertBefore(要插入的节点,要插入那个节点前面)

删除一个节点

父节点.removeChild(要移除的节点)

元素节点.remove()

修改一个节点

父节点.replaceChild(新节点,旧节点)

克隆一个节点

节点对象.cloneNode(参数)

参数是一个布尔值true或false,不写就是默认的参数false

false:表示只克隆标签,不克隆后代

true:表示完全克隆,包括后代

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

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

相关文章

阿里云和腾讯云2核2G服务器价格和性能对比

2核2G云服务器可以选择阿里云服务器或腾讯云服务器,腾讯云轻量2核2G3M带宽服务器95元一年,阿里云轻量2核2G3M带宽优惠价108元一年,不只是轻量应用服务器,阿里云还可以选择ECS云服务器u1,腾讯云也可以选择CVM标准型S5云…

信息化发展23

加密解密 1 、加密技术包括两个元素: 算法和密钥。 2 、发信者将明文数据加密成密文, 然后将密文数据送入网络传输或存入计算机文件, 而且只给合法收信者分配密钥。合法收信者接收到密文后, 实行与加密变换相逆的变换&#xff0c…

实现在一张图片中寻找另一张图片的目标

OpenCV库中的SIFT特征检测算法和FLANN(快速最近邻搜索库)匹配算法来找到一个图片中的元素在另一个图片中的位置,并在源图片中标出它们的位置。 以下是一个简单的例子,使用OpenCV库,利用SIFT特征检测算法,在…

ORB-SLAM2第六节---局部建图线程

1.处理新的关键帧 (关键帧特征点对应的词袋向量、对于当前关键帧有效地图点,更新平均观测方向,观测距离范围等,更新当前关键帧和她的共视关键帧的连接关系) 2.剔除不合格的地图点 条件一:跟踪到该地图点…

《向量数据库》——向量数据库Milvus 和大模型出联名款AI原生Milvus Cloud

大模型技术的发展正加速对千行百业的改革和重塑,向量数据库作为大模型的海量记忆体、云计算作为大模型的大算力平台,是大模型走向行业的基石。而电商行业因其高度的数字化程度,成为打磨大模型的绝佳“战场”。 在此背景下,Zilliz 联合亚马逊云科技举办的【向量数据库 X 云计…

云服务器下如何部署Django项目详细操作步骤

前期本人完成了“编写你的第一个 Django 应用程序”,有了一个简单的项目代码,在本地window系统自测没问题了,接下来就想办法部署到服务器上,可以通过公网访问我们的Django项目。将开发机器上运行的开发版软件实际安装到服务器上进…

Django TypeError: Abstract models cannot be instantiated.错误解决方案

问题 [2023-09-05 10:23:41][dvadmin.utils.exception.CustomExceptionHandler():64] [ERROR] Traceback (most recent call last): File “D:\InstallSpace\Anaconda3\envs\py39\lib\site-packages\rest_framework\views.py”, line 506, in dispatch response handler(requ…

鼠标知识系列之星闪鼠标

随着 2023.8.4 华为 HDC 大会的落幕,一个新的名词开始进入了人们的视线:星闪 NaerLink,随着星闪技术引入键鼠圈子的还有一个名词:星闪鼠标。 正如我们之前鼠标知识分享系列提到过的,目前市面上的鼠标主要是有线鼠标和…

CSDN每日一练 |『非负整数求和』『Ctrl+X,Ctrl+V』『小艺改编字符串』『数制转换』2023-09-10

CSDN每日一练 |『非负整数求和』『Ctrl+X,Ctrl+V』『小艺改编字符串』『数制转换』2023-09-10 一、题目名称:非负整数求和二、题目名称:Ctrl+X,Ctrl+V三、题目名称:小艺改编字符串四、题目名称:数制转换一、题目名称:非负整数求和 时间限制:1000ms内存限制:256M 题目描…

烟感报警器单片机方案开发,解决方案

烟感报警器也叫做烟雾报警器。烟感报警器适用于火灾发生时有大量烟雾,而正常情况下无烟的场所。例如写字楼、医院、学校、博物馆等场所。烟感报警器一般安装于所需要保护或探测区域的天花板上,因火灾中烟雾比空气轻,更容易向上飘散&#xff0…

在FPGA上快速搭建以太网

在本文中,我们将介绍如何在FPGA上快速搭建以太网 (LWIP )。为此,我们将使用 MicroBlaze 作为主 CPU 运行其应用程序。 LWIP 是使用裸机设计以太网的良好起点,在此基础上我们可以轻松调整软件应用程序以提供更详细的应用…

python装饰器

python 装饰器 装饰器的本质是一个函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能。 装饰器返回值是一个函数;接收参数也是一个函数(参数是我们业务要执行的函数)。 一个简单示例 # 定义一个简单的装饰器…

【MySQL基础】一条查询和更新语句的执行流程01-02

目录 MySQL的基本架构示意图连接器查询缓存分析器优化器执行器重要的日志模块:redo log重要的日志模块:binlog更新时redo log 和 binlog 两阶段提交 例如在执行下面这个查询语句: mysql> select * from T where ID10;MySQL的基…

Apache Hive之数据查询

文章目录 版权声明数据查询环境准备基本查询准备数据select基础查询分组、聚合JOINRLIKE正则匹配UNION联合Sampling采用Virtual Columns虚拟列 版权声明 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明,所有版权属于黑马程序员或相关权利…

GPT引领前沿热点、AI绘图

GPT对于每个科研人员已经成为不可或缺的辅助工具,不同的研究领域和项目具有不同的需求。如在科研编程、绘图领域: 1、编程建议和示例代码: 无论你使用的编程语言是Python、R、MATLAB还是其他语言,都可以为你提供相关的代码示例。 2、数据可…

9.9校招 实习 内推 面经

绿泡*泡: neituijunsir 交流裙 ,内推/实习/校招汇总表格 1、自动驾驶一周资讯 -理想汽车计划进军自动驾驶卡车领域,宝马联合亚马逊开发下一代自动驾驶平台,丰田汽车重组自动驾驶和人工智能子公司 自动驾驶一周资讯 -理想汽车…

vue2中实现 TDesign 树形懒加载

之前我有写过Element ui的树形懒加载 其主要是通过load函数来实现 而TDesign也是照虎画猫 他也是主要靠load 我们先来看一个基本的组件 <template><t-tree :data"items" :load"load" /> </template><script lang"jsx">…

【每天一道算法题】day2-认识时间复杂度

认识时间复杂度&#xff1a; O&#xff1a;读作big O&#xff0c;在数学上指的是上限的意思 常数时间的操作 一个操作如果和样本的数据量没有关系&#xff0c;每次都是固定时间内完成的操作&#xff0c;叫做常数操作。时间复杂度为一个算法流程中&#xff0c;常数操作数量的一…

交友盲盒完整版——详细源码分享

现在目前比较火热的一款app交友盲盒是通过uniappspringboot技术来制作的&#xff0c;原理其实很简单&#xff0c;大家一看便知。 大家自行下载到手机里面去使用即可&#xff0c;不支持ios手机 演示地址&#xff1a;https://share.weiyun.com/l3ovztce 下面就是给大家分享源码了…

【C++】可变参数模板

2023年9月9日&#xff0c;周六下午 这个还是挺难学的&#xff0c;我学了好几天... 在这里我会举大量的示例程序&#xff0c;这样可以有一个更好的理解&#xff0c; 不定期更新。 目录 推荐文章&#xff1a; 示例程序一&#xff1a;拼接字符串 示例程序二&#xff1a;求整…