javascript - Bagaimana untuk mendapatkan nod dalam tag html?

Question

Jika anda menggunakan acara klik, anda boleh menggunakan acara untuk mengetahui nod semasa.
Namun, jika acara tidak terikat, bagaimana untuk mendapatkan nod p semasa dalam p标签

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

---

Keperluan saya ialah apabila menatal ke nod yang berbeza melalui bar skrol, v-show=true

<p ref='pBox'>
    <p v-show='body.scrollTop === 当前节点.offsetTop'>这是一个段落1</p>
    <p v-show='body.scrollTop === 当前节点.offsetTop'>这是一个段落2</p>
    <p v-show='body.scrollTop === 当前节点.offsetTop'>这是一个段落3</p>
</p>

export default {
    computed: {
        body: this.$refs.pBox.offsetParent
    }
}

Answer 1

Anda boleh menggunakan arahan tersuai untuk melaksanakan, Demo:
https://jsfiddle.net/fedesign...

Answer 2

scrollTop dan offsetTop kedua-duanya pembolehubah.
Mengapa anda tidak mengikat acara scroll dengan scrollTop body dan semua p yang diperlukan Adakah semua offsetTop disimpan ke data?
Kemudian scrollTop和offsetTop都是变量。
你要不绑定scroll事件的时候把body的scrollTop和所有需要的p的offsetTop都获取下存到data里？
然后

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

不过我对效果有点疑问，就是好几个p未显示的时候他们的offsetTop是不是同一个值。
然后我想知道你的p rrreee

Tetapi saya mempunyai sedikit keraguan tentang kesannya, iaitu, apabila beberapa ps tidak dipaparkan, offsetTopnya mempunyai nilai yang sama.
Kemudian saya ingin tahu apa yang dirujuk nod p anda? Nod teks? #🎜🎜#

Answer 3

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

Answer 4

Terima kasih atas jawapan anda Penyelesaian terakhir ialah:

.

// animated bounceIn 为animated.css里的
<section class="newBlog" v-scroll-show>
    <p class="title animated bounceIn">
        <p class="headline">最近更新</p>
    </p>
    <p class="posts">
        <p>文章</p>
    </p>
</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)
                        }
                    }
                })
            }
        }
    }