第三周晨考自测(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:表示完全克隆,包括后代

相关推荐
开开心心就好1 小时前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
IvanCodes3 小时前
Python 数据处理(十三):JSON、CSV 与数据序列化
开发语言·python
aramae4 小时前
MySQL复合查询(8)
java·c语言·开发语言·后端·算法
默_笙5 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan7 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
qq_2518364577 小时前
springboot vue3 开发实现 拼豆管理系统
java·开发语言·ai编程
郑州光合科技余经理8 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
知识分享小能手8 小时前
C++ 学习教程,从入门到精通,C++ 入门知识 — 完整知识点(1)
开发语言·c++·学习
+VX:Fegn08958 小时前
计算机毕业设计|基于springboot + vue旅游管理系统(源码+数据库+文档)
java·开发语言·vue.js·spring boot·课程设计
天若有情6739 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具