一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

DOM对象

DOM对象相信大家都不陌生,DOM对象里面有很多属性有些很常用, 介绍几个比较特殊的属性

offsetParent

获取某一个元素第一个有定位的祖先元素，如果没有则得到 body

body 的 offsetParent 为 null

    // css
      #div1{
        position: absolute;
      }
    // html
    <div id="div1">
      <div id="div2">
        <div id="div3"></div>
      </div>
    </div>
    // js
    const div3 = document.getElementById('div3')
    console.log(div3.offsetParent) //输出的是 div1

offsetLeft、offsetTop

相对于该元素的 offsetParent 的坐标, 如果offsetParent是body则当做整个网页

getBoundingClientRect 方法

调用该方会得到一个计算之后的对象, 该对象记录了该元素相对于视口的距离(就是会忽略滚动条)

const div3 = document.getElementById('div3')
console.log(div3.getBoundingClientRect())

{
    bottom: 8,
    height: 0,
    left: 8,
    right: 8,
    top: 8,
    width: 0,
    x: 8,
    y: 8
}

dispatchEvent

该属性不是很常用，但是很有用，一般用于需要手动去触发一个元素的某一事件

    <button id="btn1">click</button>
    <button id="btn2">click2</button>
    
    //通过 btn2 去触发 btn1 的鼠标移入事件
    const btn1 = document.querySelector('#btn1')
    const btn2 = document.querySelector('#btn2')

    btn1.addEventListener('mouseenter',() => {
        console.log('鼠标移入')
    })


    btn2.addEventListener('click',() => {
        // 构建一个事件对象
        const event = new MouseEvent("mouseenter")
        //触发btn1的事件
        btn1.dispatchEvent(event)
    })

window.screenTop window.pageXOffset window.screenLeft window.pageYOffset

window.screenLeft window.pageXOffset相当于跟元素的scrollLeft

function a () {
    console.log(document.querySelector('html').scrollLeft)
    console.log(window.pageXOffset)

    console.log(document.querySelector('html').scrollTop)
    console.log(window.screenTop)
}

经过测试这两个属性已经不兼容了 (pass掉)

window.screenTop window.pageYOffset相当于跟元素的scrollTop

scrollTo、scrollBy

这两个属性所有的 DOM 对象都有,都是设置滚动条但是有细微的区别

scrollTo 两个参数(x,y)设置滚动条到指定距离

function test () {
    window.scrollTo(100,100)
}
test(); //页面的滚动条就会移动到指定距离, 当然页面没有滚动条就不会移动

scrollBy 两个参数(x,y)表示在当前的滚动距离上在增加参数的距离

function test () {
    window.scrollBy(100,100)
}
test();

以上的属性说它冷门吧也对, 但是在特定的场景下就是需要它, 了解一下到后来需要使用的时候回忆起来就行了。

js 中你可能不了解DOM对象属性