Получение элемента по пользовательскому атрибуту с помощью JavaScript

У меня есть страница XHTML, где каждый элемент HTML имеет уникальный настраиваемый атрибут, например:

<div class="logo" tokenid="14"></div>

Мне нужен способ найти этот элемент по идентификатору, похожий на document.getElementById(), но вместо того, чтобы использовать общий идентификатор, я хочу найти элемент, используя свой собственный атрибут "tokenid". Что-то вроде этого:

document.getElementByTokenId('14');

Это возможно? Если да, любой признак будет очень благодарен.

Спасибо.

Ответ 1

Нехорошо использовать пользовательские атрибуты в HTML. Если есть, вы должны использовать HTML5 data атрибуты.

Тем не менее вы можете написать свою собственную функцию, которая обходит дерево, но это будет довольно медленно по сравнению с getElementById, потому что вы не можете использовать какой-либо индекс:

function getElementByAttribute(attr, value, root) {
    root = root || document.body;
    if(root.hasAttribute(attr) && root.getAttribute(attr) == value) {
        return root;
    }
    var children = root.children, 
        element;
    for(var i = children.length; i--; ) {
        element = getElementByAttribute(attr, value, children[i]);
        if(element) {
            return element;
        }
    }
    return null;
}

В худшем случае это пересечет все дерево. Подумайте о том, как изменить свою концепцию, чтобы максимально использовать функции браузера.

В новых браузерах вы используете метод querySelector, где это будет просто:

var element = document.querySelector('[tokenid="14"]');

Это будет намного быстрее.

Обновление: Обратите внимание на комментарий @Andy E ниже. Возможно, вы столкнулись с проблемами с IE (как всегда;)). Если вы выполняете многое извлечение элементов такого типа, вам действительно стоит рассмотреть возможность использования библиотеки JavaScript, такой как jQuery, как упомянуты другие. Он скрывает все эти различия браузеров.

Ответ 2

<div data-automation="something">
</div>

document.querySelector("div[data-automation]")

= > находит div

document.querySelector("div[data-automation='something']")

= > находит div со значением

Ответ 3

Если вы используете jQuery, вы можете использовать некоторые из своих магов селектора, чтобы сделать что-то вроде этого:

    $('div[tokenid=14]')

как ваш селектор.

Ответ 4

Если вы хотите использовать JQuery, то:

var myElement = $('div[tokenid="14"]').get();

Ответ 5

Вы можете выполнить это с помощью JQuery:

$('[tokenid=14]')

Здесь сценарий для примера.

Ответ 6

Используйте эту более стабильную функцию:

function getElementsByAttribute(attr, value) {
  var match = [];
  /* Get the droids we are looking for*/
  var elements = document.getElementsByTagName("*");
  /* Loop through all elements */
  for (var ii = 0, ln = elements.length; ii < ln; ii++) {
    if (elements[ii].nodeType === 1){      
      if (elements[ii].name != null){        
      /* If a value was passed, make sure it matches the elements */
        if (value) {
          if (elements[ii].getAttribute(attr) === value) 
           match.push(elements[ii]);           
      } else {
        /* Else, simply push it */
         match.push(elements[ii]);          
      }
     }
   }
  }
return match;
};