Альтернатива getElementsByTagName

Question

Поскольку функция getElementsByTagName () является новой (DOM-1?), Я хотел, чтобы другой более надежный метод получил ссылку на элемент на основе имени тега / идентификатора.

Edit- Без использования рамки, так как мне нужно сократить размер; поэтому 10-20К для фреймворка недопустимы. Мне просто нужен код JS, который может получить элемент

Answer 1

getElementsByTagName не является новым. Поддерживается начиная с IE5, FF1 и Opera 7 в соответствии с w3schools

[править] Спасибо за указание на это. Это действительно поддерживается со времен Opera 7.

Answer 2

Как уже упоминалось, getElementsByTagName не является новым ...

Я думаю, вы получите около 10 ссылок на jQuery .

Возвращает все элементы абзаца:

$('p').length

Если 19 КБ слишком велико, и вы просто хотите выбрать элемент, что-то вроде sizzle работает хорошо, примерно 4 КБ. Единственное, что я хотел бы отметить, это то, что вам, вероятно, в конечном итоге понадобится что-то, что есть в jQuery.

http://sizzlejs.com/

Запросы очень похожи:

Sizzle("li"); 

19 КБ - это действительно небольшая единовременная цена за мощность jQuery.

Answer 3

Если все, что вы хотите сделать, это выбрать элементы, может быть разумно просто использовать движок выбора шипения, а не полноценную библиотеку. Я хотел бы использовать полную библиотеку, но в некоторых случаях полезно использовать механизм выбора.

Sizzle - это CSS-селектор, поддерживающий jQuery.

http://sizzlejs.com/

Answer 4

Вот реализация, основанная на реализации jQuery 1.12.4. Он использует getElementsByTagName, если доступно. Если нет, он использует querySelectorAll, если доступно. Если нет, он возвращается к рекурсивному обходу. jQuery 1.12.4 поддерживает более старые браузеры, такие как IE6, согласно самим .

function getElementsByTagName( node, tagName ) {
  if (tagName == '*') {
    tagName = undefined;
  }
  var merge = function( first, second ) {
        var len = +second.length,
            j = 0,
            i = first.length;

        while ( j < len ) {
            first[ i++ ] = second[ j++ ];
        }

        // Support: IE<9
        // Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)
        if ( len !== len ) {
            while ( second[ j ] !== undefined ) {
                first[ i++ ] = second[ j++ ];
            }
        }

        first.length = i;

        return first;
    },
    nodeName = function( elem, name ) {
        return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
    },
  elems, elem,
    i = 0,
  context = node,
  tag = tagName,
    found = typeof context.getElementsByTagName !== "undefined" ?
        context.getElementsByTagName( tag || "*" ) :
        typeof context.querySelectorAll !== "undefined" ?
            context.querySelectorAll( tag || "*" ) :
            undefined;

    if ( !found ) {
        for ( found = [], elems = context.childNodes || context;
            ( elem = elems[ i ] ) != null;
            i++
        ) {
            if ( !tag || nodeName( elem, tag ) ) {
                found.push( elem );
            } else {
                merge( found, getElementsByTagName( elem, tag ) );
            }
        }
    }

  return found;
/*  return tag === undefined || tag && nodeName( context, tag ) ?
        merge( [ context ], found ) :
        found;*/
}

Я взял внутреннюю функцию getAll () из jQuery 1.12.4 и скопировал в две необходимые вспомогательные функции (jQuery.nodeName и jQuery.merge). Я также убедился, что вы можете вызывать его с "*" как tagName, добавив несколько строк в верхней части функции. Наконец, в конце функции я закомментировал некоторые функции, которые добавляют текущий узел к результату (если он совпадает) и просто возвращают найденные узлы.

Имейте в виду, что функция в некоторых случаях возвращает HTMLCollection, а в других случаях возвращает массив. Также имейте в виду, что когда «*» передается как тэг, вывод отличается в зависимости от браузера: Element.prototype.getElementsByTagName не возвращает TextNodes, но рекурсивный обход делает.

В качестве альтернативы вы можете использовать picoQuery . picoQuery - это реализация jQuery, где вы можете выбрать, какие методы вам нужны в онлайн-сборщике. в этом случае вам не нужны никакие методы, так как выбор является частью ядра, а сборка занимает всего 1 КБ. picoQuery написан для современных браузеров, но возвращается к jQuery 1.12.4 для старых браузеров.

Answer 5

Или прототип и т. Д. Для этого вам понадобится одна из этих библиотек клея javascript. Все они будут вызывать эту функцию, если она существует, но подделать ее в противном случае.