thead and tbody are being ignored when querying its table row element

[christian-bromann]

I am not sure if this is the right place to report this. I came across this weird behavior and wonder if it is the desired or not.

Given I have the following HTML structure:

<table id="outer-table">
  <thead>
    <tr>
      <th>outer-table-column-header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>outer-table-first-row-cell</td>
    </tr>
    <tr>
      <td>
        <table id="inner-table">
          <thead>
            <tr>
              <th>inner-table-column-header</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>inner-table-first-row-cell</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

There seems to be a funky behavior when trying to query the first row cell from the inner vs outer table:

> $('#outer-table').querySelector('tbody tr').innerText
"outer-table-first-row-cell"
> $('#inner-table tbody tr').innerText
"inner-table-first-row-cell"

// whereas
> $('#inner-table').querySelector('tbody tr').innerText
"inner-table-column-header"

Is this expected?

[annevk]

Yeah, this is how querySelector() works. It matches against the entire tree and then filters the results based on "this".

[DV8FromTheWorld]

The confusion here is that the expectation is that Element.querySelector would only match selectors based on the context of the baseElement (in this case, #inner-table) such that it feels correct to believe that
document.querySelector('#inner-table tbody tr') and document.querySelector('#inner-table').querySelector('tbody tr') are the same, as if the latter would simply prepend #inner-table onto the selector.

However, this is not the case.

Given the docs on how Element.querySelector works, the entire document is matched against the query, and then it filters all matched elements to find those that are decedents of the baseElement, which is #inner-table in this case.

Thus, the first element that satisfies tbody tr and is also a descendent of #inner-table would be #outer-table > tbody > tr > td > #inner-table > thead > tr due to all of #inner-table being inside of a tbody

[christian-bromann]

@DV8FromTheWorld that is a fantastic explanation! This can be closed from my side then. Thank you!