按 className 滚动到视图中，该段落是元素的子元素的子元素 - 纯 JS

Question

我想滚动到某个元素的子元素的子元素的特定段落

下面是我的html的简化版本。

我想滚动到 className 为 ticketType 的段落。我的实际代码中有更多的段落，所以我想通过 className 来定位它。

我不想滚动到具有此类名的其他段落，因此我需要专门定位（并滚动到）类名为 ticketType 的段落在 ID 为 ticket0.

的元素中

{this.state.tickets.map((e, i) => {
return (

    <div className = "content createTicket" id={`ticket${i}`} >

    <form key={i}>
        <p className="warning ticketType">{this.state.tickets[i].errors.ticketType}</p>
        <div className="group">
            <input
                required
                type="text"
                value={this.state.tickets[i].ticketType}
                onChange={event => this.changeTicketDetails(event, 'ticketType', i)}
                placeholder="Ticket Name eg. General Admission"
            />     
        </div>
    </form>

    )

})}

此代码滚动到父级 div:

document.getElementById(`ticket0`).scrollIntoView({behavior: "smooth"})

我正在尝试使用以下方法获得更多选项：

document.getElementById(`ticket0`).children

但是当我 console.log 这样做时，它无法识别该段落。我得到：

HTMLCollection(2)
0: form
0: input

在 CSS 中，我可以将其定位为 #ticket0 < .ticketType

Javascript

中有类似的东西吗

Answer 1

您得到该控制台输出是因为 parentNode.children returns 一个 HTMLCollection 而不是单个元素。

要实现所需的行为，您可以尝试： document.querySelector('#ticket0 > .ticketType').scrollIntoView({behavior: "smooth"})

或者换句话说： document.getElementById('ticket0').getElementsByClassName('ticketType')[0].scrollIntoView({behavior: "smooth"})

或者如果您只关心第一个 child： document.getElementById('ticket0').firstElementChild.scrollIntoView({behavior: "smooth"})

或者如果您关心第 n 个 child： document.getElementById('ticket0').children[n].scrollIntoView({behavior: "smooth"})

按 className 滚动到视图中，该段落是元素的子元素的子元素 - 纯 JS

Scroll into view by className to a paragraph that is a child of a child of an element - pure JS

javascript

parent-child

getelementbyid

getelementsbyclassname

js-scrollintoview