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

Question

我想滚动到一个特定的段落，该段落是元素的子项的子项

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

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

我不想滚动到此className的其他段落，所以我需要在id为ticket0的元素内专门定位(并滚动到(className为ticketType的段落。

{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

但当我安慰日志时，它并没有认出这段话。我得到：

HTMLCollection(2)
0: form
0: input

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

Javascript 中有类似的东西吗

Answer 1

您得到控制台输出是因为parentNode.children返回的是HTMLCollection，而不是单个元素。

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

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

或者如果您只照顾第一个孩子：document.getElementById('ticket0').firstElementChild.scrollIntoView({behavior: "smooth"})

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