title: How can I select a specific html paragraph with a specific class from a javascript array?
body: <p>HTML:</p>
  <pre><code>&lt;div class=&quot;topic&quot; id=&quot;topicName&quot;&gt;
          &lt;div class=&quot;flexer&quot;&gt;
            &lt;h1 class=&quot;topic-header&quot;&gt;Topic Name&lt;/h1&gt;
            &lt;img class=&quot;img&quot; src=&quot;image.png&quot; id=&quot;x&quot;&gt;
          &lt;/div&gt;
          &lt;p class=&quot;subtopic&quot;&gt;1&lt;/p&gt;
          &lt;p class=&quot;subtopic&quot;&gt;2&lt;/p&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>JS:</p>
  <pre><code>const functionName = function(event) {
    let test = event.target.parentNode.parentNode.childNodes.querySelector('p');
   
    console.log(test);
  }
  </code></pre>
  <p>I want to select the paragraph with class subtopic, when the image is selected. I have many divs like this, so I need to find a way of ensuring each image has opens a specific paragraph with class subtopic.</p>
  <p>I know .childNodes gives me the following array: div, p, p. I can't explain the intricacies, but having a way to simply select the paragraph inside this div would help. I know its long winded but essentially by doing all this, i'm taking a non-specific event handler for the image and creating a specific effect for a particular paragraph.</p>