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

相关推荐
万少2 小时前
用腻了 WorkBuddy 的默认界面?这个开源小工具给它换上了毛玻璃
前端·javascript·后端
To_OC4 小时前
LC 15 三数之和:双指针不难,难的是把去重做对
javascript·算法·leetcode
触底反弹4 小时前
🔥 前端也能玩转 AI 流式输出!从二进制流到打字机效果,一篇讲透
javascript·人工智能·node.js
胡萝卜术4 小时前
深度重构:Agent Skills——从 Prompt 工程到能力工程
javascript·架构·github
benchmark_cc5 小时前
如何用 Python + QuantDash 快速构建高胜率“配对交易(Pairs Trading)”策略?
开发语言·人工智能·python·pandas·量化交易·quantdash
程序员无隅6 小时前
Coding Agent 为什么压缩上下文后还能继续工作?上下文模块设计拆解
java·开发语言·数据库
Python+996 小时前
Java 枚举类(Enum)详解:从基础到高级应用
java·开发语言·python
二炮手亮子7 小时前
浅记java线程池
java·开发语言
To_OC7 小时前
从 “卡死半天” 到 “打字机效果”:大模型流式输出前端实现全记录
前端·javascript·llm
rockey6277 小时前
基于AScript的JavaScript脚本语言发布啦
javascript·c#·.net·js·script