getAttribute by TagName - JS

Question

My specific situation is that I'm trying to remove/make inactive a link element from the DOM (I have no control over it being generated). The way that I plan to do this is through replacing the 'href' attribute with a nonsense value - the reason I've chosen to do it this way rather than simply using disable = true is so that the function can be reused on other occasions to change other attributes.

The problem I'm having is with .getAttribute where it returns the error "TypeError: elemArr.hasAttribute is not a function".

function removeLink(elem, att, value, replacement) {
    var elemArr = document.getElementsByTagName(elem);
    for (var i = 0; i < elemArr.length; i++) {
        var workingAtt = elemArr.hasAttribute(att);
        if (workingAtt.value === filePath) {
            elemArr[i].setAttribute(att, replacement);
        }
    }
}
removeLink("link", "href", "filePath", "#");

Any help with why this error is getting thrown is greatly appreciated.

Answer 1

What's going on in there is that elemArr is an array, and arrays don't have a hasAttribute method. Rewrite your code as

function removeLink(elem, att, value, replacement) {
  var elemArr = document.getElementsByTagName(elem);
  for (var i = 0; i < elemArr.length; i++) {
    //this line here wasn't referring to a specific node but the array
    var workingAtt = elemArr[i].hasAttribute(att);
    if (workingAtt && elemArr[i].getAttribute(att) === value) {
      elemArr[i].setAttribute(att, replacement);
    }
  }
}
removeLink("link", "href", "filePath", "#");

And it will work.

A more succint approach would be something like this:

function removeLink(elem, att, value, replacement){
  var selector = elem + '['+ att +'="'+ value +'"]';
  [].forEach.call(document.querySelectorAll(selector), function(node){
    node.setAttribute(att, replacement);
  });
}

It does basically the same thing, but is quite a bit shorter and more explicit.