Javascript getElement by href?

У меня есть script ниже

var els = document.getElementsByTagName("a");
for(var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Однако этот поиск просматривается через страницу и занимает около 20 секунд, чтобы сделать это, поскольку есть LOTS ссылок.

Однако мне нужно только настроить таргетинг на a, который имеет конкретный href, например. "Http://domain.com/"

В идеале я хотел бы сделать это аналогично jQuery, но без использования фреймворка. Так что что-то вроде

var els = document.getElementsByTagName("a[href='http://domain.com']");

Как бы я это сделал, поэтому он ищет объекты только с тем, что соответствует href?

Ответ 1

Обновление 2016

Прошло более 4 лет с момента публикации этого вопроса, и все прошло немало.

Вы не можете использовать:

var els = document.getElementsByTagName("a[href='http://domain.com']");

но то, что вы можете использовать:

var els = document.querySelectorAll("a[href='http://domain.com']");

( Примечание: см. ниже для поддержки браузера)

который заставит код из вашего вопроса работать точно так, как вы ожидаете:

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Вы даже можете использовать селектор типа a[href^='http://domain.com'], если вы хотите, чтобы все ссылки начинались с 'http://domain.com':

var els = document.querySelectorAll("a[href^='http://domain.com']");

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link/gi, 'dead link');
}

Смотрите: DEMO

Поддержка браузера

Поддержка браузера в соответствии с Могу ли я использовать по состоянию на июнь 2016 года? выглядит довольно хорошо:

(Смотрите: http://caniuse.com/queryselector для актуальной информации)

Нет поддержки в IE6 и IE7, но IE6 уже мертв и IE7 скоро будет с 0,68% доли рынка.

IE8 старше 7 лет, а частично поддерживает querySelectorAll - "частично" Я имею в виду, что вы можете использовать CSS 2.1 селекторов, таких как [attr], [attr="val"], [attr~="val"], [attr|="bar"] и небольшое подмножество селекторов CSS 3, которые к счастью включают: [attr^=val], [attr$=val] и [attr*=val], поэтому кажется, что IE8 в порядке с моими примерами выше.

IE9, IE10 и IE11 все поддержка querySelectorAll без проблем, также как Chrome, Firefox, Safari, Opera и все, другие основные браузеры - , как на рабочем столе, так и на мобильных устройствах.

Другими словами, кажется, что мы можем безопасно начать использовать querySelectorAll в производстве.

Подробнее

Для получения дополнительной информации см.:

См. также этот ответ за разницу между querySelectorAll, querySelector, queryAll и query и когда они были удалены из Спецификация DOM.

Ответ 2

Чтение и запись свойства innerHTML для каждого элемента, вероятно, довольно дорого и, следовательно, приводит к замедлению - он заставляет браузер "сериализовать" элемент, который затем запускается через регулярное выражение, а затем снова "десериализуется". Хуже того, вы делаете это для каждого элемента a, даже если он не соответствует.

Вместо этого попробуйте напрямую посмотреть на свойства элемента a:

var els = document.getElementsByTagName("a");
for (var i = 0, l = els.length; i < l; i++) {
    var el = els[i];
    if (el.href === 'http://www.example.com/') {
        el.innerHTML = "dead link";
        el.href = "#";
    }
}

РЕДАКТИРОВАТЬ в современных браузерах с гораздо большей совместимостью W3C, теперь вы можете использовать document.querySelectorAll() для более эффективного получения только тех ссылок, которые вы хотите:

var els = document.querySelectorAll('a[href^=http://www.example.com/]');
for (var i = 0, l = els.length; i < l; i++) {
    els[i].textContent = 'dead link';
    els[i].href = '#';
}

Однако это не так гибко, если есть несколько доменных имен, которые вы хотите сопоставить, или, например, если вы хотите одновременно сопоставлять как http:, так и https:.