title: GetElementsByTagName in ComponentDidMount() returns undefined despite rendering
body: <p>Right now I am attempting to create a function in the ComponentDidMount lifecycle method that will inject a script tag into the return statement. This script will be used to invoke <a href="https://www.clicktale.com/" rel="nofollow noreferrer">Clicktale</a>. However, even after checking that the component has mounted and that the document state has reached 'complete', when I try to find the script tag it keeps returning undefined. Because of this I am unable to add attributes to the script tag that will invoke Clicktale. Typically with Clicktale you just need to add the script at the bottom of the body, but for the project I am working on I need to use React.</p>
  
  <p>I know that when using the method getElementsByTagName in React it should return an array of elements that have that tag name. But when console logging 
  <code>document.getElementsByTagName('script')</code>
  I just receive
  <code>HTMLCollection {}</code>
  Which I assume means it's empty since logging <code>document.getElementsByTagName('script')[0]</code>
  returns undefined. </p>
  
  <p>This is the main component:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Clicktale extends Component {
  
    componentDidMount() {
      if (!window.clickTaleTagInjected) {
          const clickTaleTagInjected = true;
          function injectTag() {
            const ns = document.createElementNS;
            const a = ns ? ns.call(document, 'http://www.w3.org/1999/xhtml', 'script') : document.createElement('script');
            const s = document.getElementsByTagName('script')[0];
            a.async = true;
            a.crossOrigin = 'anonymous';
            a.type = 'text/javascript';
            a.src = 'specific clicktale cdn url I am using here';
            s.parentNode.insertBefore(a, s);
          }
          if (document.readyState === 'complete') {
            injectTag();
          } else {
            window.addEventListener('load', () =&gt; {
              setTimeout(injectTag, 0);
            });
          }
        }
    }
    render() {
      return (
          &lt;div&gt;
          &lt;/div&gt;
      );
    }
  }
  
  export default Clicktale;
  </code></pre>
  
  <p>And this is the parent component (I don't think this should be interfering?):</p>
  
  <pre><code>import React from 'react';
  import Helmet from 'react-helmet';
  import Clicktale from './Clicktale';
  
  
  export const Parent = () =&gt; (
    &lt;div&gt;
      &lt;Helmet
        link={[
          {
            rel: 'stylesheet',
            href: 'using private link here',
          },
        ]}
      /&gt;
      &lt;Clicktale /&gt;
    &lt;/div&gt;
  );
  
  export default Parent;
  </code></pre>
  
  <p>The specific error I receive is:</p>
  
  <pre><code>TypeError: Cannot read property 'parentNode' of undefined
  </code></pre>
  
  <p>this refers to the line with </p>
  
  <pre><code>s.parentNode.insertBefore(a, s)
  </code></pre>
  
  <p>Ultimately, I was trying to figure out why it cannot find the script tag after it has been injected. I'm also wondering if I should have something other than div tags in the return? I figured the component would be able to inject a script tag in there with no issues, but this is...not the case.</p>
  
  <p>Thank you for any pointers :)</p>