title: Xpath returning null values for elements under <header> tag
body: <p>I am working on a Chrome Extension using vanilla JavaScript to hide sections of the page depending on the user type.  The user type is in the  section of the page.  I can access elements outside the  tag, but nothing within the tag.</p>
  
  <p>I have tried using the span ID with '//*[@id="userType"]' but this returns null.  I have also tried to access other elements within the header (other  or  elements) and I was not able to access those either.  I can only access elements outside of the  tag.</p>
  
  <p>html page code:</p>
  
  <pre><code>&lt;body&gt;
    &lt;form id="form1"&gt;
      &lt;header&gt;
        &lt;div&gt;
          &lt;span onclick="DP$LinkButton$Click(this, null, null, 'file.asp',null); return(false);
            &lt;span id="userType"&gt;user1&lt;/span&gt;
            &lt;span id="userName"&gt;Bob&lt;/span&gt;
          &lt;/span&gt;
       &lt;/div&gt;
      &lt;/header&gt;
      &lt;div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>xPath function:</p>
  
  <pre><code>function getElementByXpath(path) {
    // returns the element value matching the Xpath
    return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; 
  } // end function getElementByXpath
  </code></pre>
  
  <p>xPath tests:</p>
  
  <pre><code>console.log(getElementByXpath('//*[@id="userType"]'));
  console.log(getElementByXpath('//*[contains(@id,"userType")]'));
  console.log(document.getElementById('userType'));
  console.log(getElementByXpath("/html/body/form/header/div/span/span[@id='userType']"));
  </code></pre>
  
  <p>All xPath queries returned 'null'.  I tried the console.log on the xPath using .text(), .innerHTML, blank, or just the entire header and it returned 'null'.  My xPath function works perfectly fine on other elements that are outside the header tag.  Help please!</p>