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

相关推荐
Asize1 小时前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas
默_笙1 小时前
🎄 后端给我一堆扁平数据,我 10 行代码把它变成了树
前端·javascript
前端Hardy2 小时前
又一个 AI 神器火了!
前端·javascript·后端
PBitW2 小时前
GPT训练我的第二天,我表示不过如此!!!😕😕😕
前端·javascript·面试
kyriewen3 小时前
白宫直接给 OpenAI 下了限制令,GPT-5.6 不能随便放出来了
前端·javascript·面试
默_笙8 小时前
🍞 我用 CSS 画了一个会转的 3D 立方体,同事以为我学了 Three.js(这节课真的很神奇,我很喜欢)
javascript
sarasuki8 小时前
JavaScript的对象、new的机制与原型包装类
javascript·后端
weedsfly8 小时前
JavaScript 事件流:彻底搞懂捕获、冒泡与事件委托
前端·javascript·react.js
candyTong9 小时前
阿里开源 AI Code Review 工具:ocr review 的执行链路解析
javascript·后端·架构
铁皮饭盒10 小时前
TypeBox 比 Zod.js 校验 快10倍, 还兼容AI 工具调用, 他做对了什么?
前端·javascript·后端