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

第三周晨考自测(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.lryc.cn/news/161890.html

相关文章:

  • C++ 结构体
  • 如何使用聊天GPT自定义说明
  • mac pyenv无法切换python版本问题
  • API接口接入电商平台案例,采集淘宝天猫拼多多1688京东LAZADA数据按关键字搜索商品示例
  • 持安-大连万达集团零信任项目入选中国信通院2023零信任优秀案例
  • python28种极坐标绘图函数总结
  • C#编程基础(万字详解,这一篇就够了)
  • SpringBoot中自定义注解
  • 《TCP/IP网络编程》阅读笔记--地址族和数据序列
  • 【C++】可变参数模板
  • WPF Flyout风格动画消息弹出消息提示框
  • Spring Boot 集成 Redis
  • Java线程之间通信方式
  • 【LeetCode-中等题】367. 有效的完全平方数
  • 英语单词(二)
  • Django 用相对路径方式引用自定义模块 或 文件
  • 企业架构LNMP学习笔记22
  • uniapp和小程序设置tabBar和显示与隐藏tabBar
  • 物联网、无线通讯
  • Pod和容器设计模式
  • docker系列(3) - 常用软件安装
  • Apache Hive之数据查询
  • OpenCV---视频操作
  • 《TCP/IP网络编程》阅读笔记--进程间通信
  • mysql中show status参数介绍
  • Tomcat服务的部署及配置优化
  • 入门力扣自学笔记279 C++ (题目编号:1123)
  • 【AIGC专题】Stable Diffusion 从入门到企业级实战0402
  • 【Spring事务】Spring事务的传播机制(通俗易懂)
  • 使用 Python 的高效相机流