使用 javascript querySelector 选择具有特定标记名称但具有任何命名空间的元素

Question

如何使用document.querySelector或document.querySelectorAll来获取任何命名空间的特定标签。

我不能使用 JQuery 或任何其他库。

前任

<mml:math>
    <mml:row>
    </mml:row>
  </mml:math>
<math style="display:none;">
  <mrow>
   <msup>
     <mfenced>
       <mrow>
         <mi>a</mi>
         <mo>+</mo>
         <mi>b</mi>
       </mrow>
     </mfenced>
     <mn>2</mn>
   </msup>
 </mrow>
</math>
 var tags = ['math:not([style*="display:none"])','mml\:math:not([style*="display:none"])'];
                              document.querySelectorAll(mathmlVisibleTag.join()).length 

在这里，用户可以使用任何命名空间。我已经在querySelectorAll中尝试了'*\:math:not([style*="display:none"])'，但它没有奏效。

问候

Answer 1

我认为这在唯一的querySelectorAll上是不可能的。也许最好的选择是这样的：

function isVisible(e) {
    return !!( e.offsetWidth || e.offsetHeight || e.getClientRects().length );
}
var tags = document.querySelectorAll('*'); // change this to be more specific
var visibleMaths = [].slice.call(tags).filter(function (tag) {
    return tag.nodeName.search(/math/i) >= 0 &&
             isVisible(tag);
});

JSFIDDLE 示例

Answer 2

你只是错过了空间，这个工作正常：

document.querySelectorAll('math :not([style*="display:none"])');