Получение элемента по пользовательскому атрибуту с использованием JavaScript - PullRequest
Новая
       5

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

34 голосов
/ 07 июня 2011

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

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

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

document.getElementByTokenId('14');

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

Спасибо.

Ответы [ 6 ]

39 голосов
/ 07 июня 2011

Неправильно использовать пользовательские атрибуты в 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, как уже упоминалось.Он скрывает все эти различия браузера.

23 голосов
/ 16 января 2015 
<div data-automation="something">
</div>

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

=> находит div 

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

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

4 голосов
/ 07 июня 2011

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

    $('div[tokenid=14]')

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

1 голос
/ 07 июня 2011

Вы можете сделать это с помощью JQuery: 

$('[tokenid=14]')

Здесь это скрипка для примера.

1 голос
/ 07 июня 2011

Если вы готовы использовать JQuery , тогда: 

var myElement = $('div[tokenid="14"]').get();
0 голосов
/ 04 февраля 2016

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

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;
};
...