Select element with specific tag name but with any namespace by using javascript querySelector

Question

How can i use document.querySelector or document.querySelectorAll to get specific tag with any namespace.

I cannot use JQuery or any other library.

Ex

<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

Here user can use any namespace. I have tried '*\\:math:not([style*="display:none"])' in querySelectorAll but it didn't worked.

Regards

You want to select any element which doesn't have display none? — TKoL
– TKoL, Commented Nov 1, 2017 at 12:44

user1839730 · Accepted Answer · 2017-11-01 13:29:19Z

0

I don't think this is possible with the only querySelectorAll. Maybe the best option is something like this:

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 example

answered Nov 1, 2017 at 13:29

user1839730

Sign up to request clarification or add additional context in comments.

2 Comments

TKoL Over a year ago

Isn't Array.from(tags) preferrable to [].slice.call(tags)? This resource says it's a lot faster, but apart from being faster it's also more obvious what it's doing.

user1839730 Over a year ago

I don't know if it is faster or not...it really depends on the browser. Anyway, I wrote it as an example, I didn't look at the details :)

ePetkov · Accepted Answer · 2017-11-01 13:43:46Z

-2

You just missed space, this one works fine:

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

answered Nov 1, 2017 at 13:43

ePetkov

4223 silver badges10 bronze badges

1 Comment

Pavan Tiwari Over a year ago

@ePetkvo Above one is also working fine. I want to select math tag which could have any namespace.

Collectives™ on Stack Overflow

Select element with specific tag name but with any namespace by using javascript querySelector

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related