如何获取html标签中的节点?

如果用点击事件的话,可以event来找出当前的节点。
但是,如果不绑定事件的话,怎么实现在p标签里面获得当前的p节点

<p>这是一个段落</p>

我的需求是通过滚动条滚动到不同的节点的时候,v-show=true

<div ref='divBox'>
    <p v-show='body.scrollTop === 当前节点.offsetTop'>这是一个段落1</p>
    <p v-show='body.scrollTop === 当前节点.offsetTop'>这是一个段落2</p>
    <p v-show='body.scrollTop === 当前节点.offsetTop'>这是一个段落3</p>
</div>
export default {
    computed: {
        body: this.$refs.divBox.offsetParent
    }
}
阅读 4.3k
4 个回答

scrollTopoffsetTop都是变量。
你要不绑定scroll事件的时候把bodyscrollTop和所有需要的poffsetTop都获取下存到data里?
然后

<div ref='divBox'>
    <p v-show='bodyScrollTop === offsetTop.p1'>这是一个段落1</p>
    <p v-show='bodyScrollTop === offsetTop.p2'>这是一个段落2</p>
    <p v-show='bodyScrollTop === offsetTop.p3'>这是一个段落3</p>
</div>

不过我对效果有点疑问,就是好几个p未显示的时候他们的offsetTop是不是同一个值。
然后我想知道你的p节点指的是什么?文本节点?

document.querySelector('p').childen
document.getElementByTagName('p')[0].childen

谢谢各位的回答,最终的解决方案为:

// animated bounceIn 为animated.css里的
<section class="newBlog" v-scroll-show>
    <div class="title animated bounceIn">
        <p class="headline">最近更新</p>
    </div>
    <div class="posts">
        <p>文章</p>
    </div>
</section>
.title, .posts {
    display: none;
}
    directives: {
        scrollShow: {
            bind: (el) => {
                window.addEventListener('scroll', () => {
                    if (document.body.scrollTop + 400 > el.offsetTop) {
                        for (let i = 0; i < el.children.length; i++) {
                            setTimeout(() => {
                                el.children[i].style.display = 'block'
                            }, 1000 * i)
                        }
                    }
                })
            }
        }
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题