title: Scroll into view by className to a paragraph that is a child of a child of an element - pure JS
body: <p>I want to scroll to a specific paragraph that is a child of a child of an element</p>
  <p>Below is a simplified version of my html.</p>
  <p>I want to scroll to the paragraph with the className of ticketType. There are more paragraphs in my actual code so I want to target it by className.</p>
  <p>There will be other paragraphs with this className that I don't want to scroll to, so I need to specifically target (and scroll to) the paragraph with className of <em>ticketType</em> within the element that has an id of <em>ticket0.</em></p>
  <pre><code>{this.state.tickets.map((e, i) =&gt; {
  return (
  
      &lt;div className = &quot;content createTicket&quot; id={`ticket${i}`} &gt;
  
      &lt;form key={i}&gt;
          &lt;p className=&quot;warning ticketType&quot;&gt;{this.state.tickets[i].errors.ticketType}&lt;/p&gt;
          &lt;div className=&quot;group&quot;&gt;
              &lt;input
                  required
                  type=&quot;text&quot;
                  value={this.state.tickets[i].ticketType}
                  onChange={event =&gt; this.changeTicketDetails(event, 'ticketType', i)}
                  placeholder=&quot;Ticket Name eg. General Admission&quot;
              /&gt;     
          &lt;/div&gt;
      &lt;/form&gt;
  
      )
  </code></pre>
  <p>})}</p>
  <p>This code is scrolling to the parent div:</p>
  <pre><code>document.getElementById(`ticket0`).scrollIntoView({behavior: &quot;smooth&quot;})
  </code></pre>
  <p>I am trying to get further options using:</p>
  <pre><code>document.getElementById(`ticket0`).children
  </code></pre>
  <p>but when I console.log this it isn't recognising the paragraph. I am getting:</p>
  <pre><code>HTMLCollection(2)
  0: form
  0: input
  </code></pre>
  <p>In CSS I could target it as <code>#ticket0 &lt; .ticketType</code></p>
  <p>Is there something similar in Javascript</p>