How to select an element that has no attributes

Question

So i have couple of spans within a div and most of them have classes or other attributes.

<span class="one" attribute="test"></span>
<span></span> /* This is what i need to select */
<span class="three" attribute="test"></span>
<span class="four" attribute="test"></span>
<span></span>

I would like to select the very first span that has no attributes but also make sure that the last span that has no attributes wont be selected.

Also, the element with class one will sometimes appear and sometimes wont so i can't select it with a number like: [1].

What would be the best approach?

Answer 1

You can check to see how many attributes an element has by checking the length of its attributes property:

const div = document.querySelector('div');
const spanWithNoAttributes = [...div.children]
  .find(span => span.attributes.length === 0);
spanWithNoAttributes.textContent = 'THIS ONE HERE';

<div>
<span class="one" attribute="test">one</span>
<span>two</span>
<span class="three" attribute="test">three</span>
<span class="four" attribute="test">four</span>
<span>five</span>
</div>

You should also fix up your HTML - end tags should have a slash before the tag name, not after.

Answer 2

If the order of spans is the same, and if the span never gets attributes, then you could just use the nth-child selector.

With jQuery...

$("span:nth-child(2)").blah.blah;