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

  • 相关阅读:
    红黑树(4万字文章超详细,只为一个目的)
    Redis 通信协议 -- RESP
    刷题《剑指Offer》day12
    【运维】dockerfile 中的COPY 会覆盖文件夹吗
    Redis Cluster
    Ubuntu20.04上安装ssmtp通过SMTP方式发送邮件
    chromedriver下载与安装方法
    Elasticsearch节点、副本、分片规划
    shiro配置文件shiro.ini简介说明
    【消息中间件】为什么选择RocketMQ及SpringBoot整合使用案例
  • 原文地址:https://blog.csdn.net/mez_Blog/article/details/132642572