Javascript: Change elements that have certain class and attribute -> pure Javascript

Question

First of all, there are alot similar questions outside not only on this website.

But I searched at least 3 hours for a solution but never found something that was fitting and working.

Also some threads where created long time ago, so some solutions are more complicated/not working and dont use todays possibilities.

So here's the Problem:

HTML File could look like this:

<ul>
  <li><a class="content" href="this.com">I should change!</a>
  </li>
  <li><a class="content" href="any.com">I don't change</a>
  </li>
  <li><a class="content" href="this.com">I should change! too</a>
  </li>
  <li><a class="content" href="any.com">I don't change</a>
  </li>
  <li><a class="content" href="this.com">I also should change!</a>
  </li>
</ul>

Now I want to get all elements wich have attribute class="content".

(I tried solutions with document.getElementsByClassName() and document.querySelector().)

And then change only those wich also contain href="this.com".

And here are the "challenges" the solution should pass:

no jQuery and co. -> pure javascript
you can only use javascript (the whole solution should work by injecting script.js into a website)
if it is possible: no loops

I don't want to make it more complicated than it should be, just thougth that there must be a way to change multiple objects easily like this just for classes:

document.getElementById("theID").innerHTML = "text"

So if there is any way to make it without loop it would be great

(saw alot of solutions with some counting funtion "i < variable.length; i++" when it comes to loop-solution. But think it's much cleaner with simple function like .innerHTML = "" than running a loop)

And last: if you know how I could easily delete <li></li> of the selected objects and would tell me know, I would be very thankful.

(I know .parentNode but if I try with this it's more an "Error and Retry Adventure")

Also have trouble with deleting parent of parent or could I just use .parentNode.parentNode ?

If anyone has an idea or working solution I would be very happy.

Thank you very much!

Firstly, what didn't work about `getElementsByClassName`? Second, _if it is possible: no loops_ - EH? — Rhumborl, Nov 18 '14 at 11:48
If you want to act on more than one element, you'll need a loop (or a function which internally uses a loop). The example you gave of not needing a loop (by using `getElementById` and `innerHTML`) only acts on a single element. — Shai, Nov 18 '14 at 11:52
One question/observation: If you unwrap the selected elements by removing the `

score 1 · Answer 1 · answered Nov 18 '14 at 11:47

1

Test it :

<script>
window.onload = function() {
    var contentClass = document.getElementsByClassName("content");
    for (var i = 0; i < contentClass.length; i++) {
        if (contentClass.item(i).getAttribute("href") == "this.com") {
            contentClass.item(i).innerHTML = "Changed !";   
        }
    }
}
</script>

answered Nov 18 '14 at 11:47

AliReza Beytari

38
7

http://jsfiddle.net/aLn9so91/ (If you're going to go to all that effort, may as well provide a working copy) – Jamiec Nov 18 '14 at 11:51

clu3Less · Answer 2 · 2014-11-18T13:06:28.573

1

Try this for changing the first one,

document.querySelectorAll('.content[href="this.com"]')[0].innerHTML = "Changed!!!"

To apply to all selected elements,

var elems = document.querySelectorAll('.content[href="this.com"]');
Array.prototype.sort.call(
    Array.prototype.slice.call(elems, 0), 
    function(el1,el2){
        el1.innerHTML="Changed!!!"; 
        el2.innerHTML="Changed!!!"
    }
)

edited Nov 18 '14 at 13:06

answered Nov 18 '14 at 11:51

clu3Less

1,812
3
17
20

Will it select all elements or just one? – Mark Zucchini Nov 18 '14 at 12:01
It will only select one. Look for the `[0]` its the first element in the result array of ``querySelectorAll`` – Der Vampyr Nov 18 '14 at 12:05
If ther would be a way to select all items in this arry, then this would be perfect. But it seems that i have to use loop for this :S – VVind0wM4ker Nov 18 '14 at 13:09
This is the best you could get using native sort function without a loop IMHO. Check out the fiddle. http://jsfiddle.net/aLn9so91/1/ – clu3Less Nov 18 '14 at 13:19

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

No, it cant be done without a loop, you want to act on multiple elements, you need a loop

window.onload = function() {
    var elems = document.querySelectorAll('.content[href="this.com"]');
    for(var i=0;i<elems.length;i++){
      elems[i].innerHTML = "Im changed."   
    }
}

<ul>
  <li><a class="content" href="this.com">I should change!</a>
  </li>
  <li><a class="content" href="any.com">I don't change</a>
  </li>
  <li><a class="content" href="this.com">I should change! too</a>
  </li>
  <li><a class="content" href="any.com">I don't change</a>
  </li>
  <li><a class="content" href="this.com">I also should change!</a>
  </li>
</ul>

As noted in the comments, the above could be changed to:

window.onload = function() {
    [].forEach.call(document.querySelectorAll('.content[href="this.com"]'),function(e){
       e.innerHTML = "Im changed by forEach, its still a loop!"; 
    });
}

But its still just a loop, just hidden behind a method which calls a delegate for each item in the supplied array!

As for unwrapping your <li> his might be useful: Removing wrapper div without Jquery (raw javascript) (The procedure for doing this with a <li> would be more or less the same).

edited May 23 '17 at 12:33

Community

1
1

answered Nov 18 '14 at 11:54

Jamiec

133,658
13
134
193

This answer looks good to me. There *is* a way to not use a loop in the answer (although internally there will presumably be one...) Note I don't recommend this! Just adding it for completeness. `[].forEach.call(document.querySelectorAll('.content[href="this.com"]'), function(el) { el.innerHTML = 'Changed'; });` – Shai Nov 18 '14 at 12:00
@Shai - `forEach` *is* just a loop. – Jamiec Nov 18 '14 at 12:42
This is Awesome! It still uses a loop as you said, but seems to me more smooth as you dont use a var and then calc +1 over and over again. This is exactly what i searched for.Very elegant (in my eyes). Thank you so much! – VVind0wM4ker Nov 18 '14 at 13:20
Is it also possible to search for different "href"? Like: `('.myClass{[href="one.com"]|[href="two.com"]}')` so the selection would include myClass objects with Link to "one.com" and objects with Link to "tow.com". – VVind0wM4ker Nov 18 '14 at 19:55

score 0 · Answer 4 · answered Nov 18 '14 at 11:59

// get all elements which contents className="content"
var contents = document.getElementsByClassName('content');

// In a loop
for (i = 0; i < contents.length; i++) {
    // If current element contains href="this.com"...
    if (contents[i].href.indexOf("this.com") > -1)
        // then change its innerHTML
        contents[i].innerHTML = "text";
}

// second way, little faster that first one
// get all A elements
var as = document.getElementsByTagName('a');

// In a loop
for (i = 0; i < as.length; i++) {
    // If current element contains href="this.com"...
    if (as[i].href.indexOf("this.com") > -1)
        // then change its innerHTML
        as[i].innerHTML = "text";
}

// third way, long. Do not do such a things
var allElements = document.getElementsByTagName("*");

// In a loop
for (i = 0; i < allElements.length; i++) {
    // If current element contains className="content"...
    if (allElements[i].className == "content")
        // And if its href="this.com"
        if (allElements[i].href.indexOf("this.com") > -1)
            // Change its innerHTML
            allElements.innerHTML = "text";
}

Javascript: Change elements that have certain class and attribute -> pure Javascript

4 Answers4