цепочка getElementById - PullRequest
Новая
       6

цепочка getElementById

10 голосов
/ 16 апреля 2011

Я искал ответ на этот вопрос, но не мог найти ни одного, поэтому решил попробовать StackOverflow.

В javascript это действительно:

x = document.getElementById('myId'); y = x.getElementById('mySecondId');

Я знаю, что это можно сделать с помощью getElementsByTagName, но я не уверен, что объект, возвращаемый getElementById, может использовать метод getElementById.

Я знаю, что идентификатор должен быть уникальным для каждого документа, но иногда это просто не тот случай.

Спасибо!

Ответы [ 6 ]

8 голосов
/ 16 апреля 2011

Нет.

... Но вы можете, хотя: 

Element.prototype.getElementById = function(id) {
    return document.getElementById(id);
}

Попробуйте на этой странице: 

var x = document.getElementById('footer').getElementById('copyright');

Редактировать: Как указала Pumbaa80Вы хотели что-то еще.Ну, вот оно.Используйте с осторожностью. 

Element.prototype.getElementById = function(req) {
    var elem = this, children = elem.childNodes, i, len, id;

    for (i = 0, len = children.length; i < len; i++) {
        elem = children[i];

        //we only want real elements
        if (elem.nodeType !== 1 )
            continue;

        id = elem.id || elem.getAttribute('id');

        if (id === req) {
            return elem;
        }
        //recursion ftw
        //find the correct element (or nothing) within the child node
        id = elem.getElementById(req);

        if (id)
            return id;
    }
    //no match found, return null
    return null;
}

Пример: http://jsfiddle.net/3xTcX/

2 голосов
/ 16 апреля 2011

Ну, лучший способ узнать это попробовать.В этом случае он не будет работать, поскольку метод getElementById доступен только для объектов DOMDocument (например, переменная document), но не для объектов DOMElement, которые являются отдельными узлами.Я думаю, что это должно было быть доступно и для них, но эй, я не согласен с большинством дизайна API DOM ...

1 голос
/ 31 октября 2018

Вы можете просто использовать y = x.querySelector('#'+'mySecondId'); вместо y = x.getElementById('mySecondId'); в примере вопроса.

Element.getElementById не существует, но вы можете добавить его, как указано в других ответах, даже если не рекомендуется добавлять метод к Element. В случае, если вы хотите абсолютно использовать этот вид решения, ниже есть возможность: 

Element.prototype.getElementById = function(id) {
return this.querySelector("#"+id);
}

Одним из преимуществ использования element.querySelector вместо document.getElementById внутри Element.prototype.getElementById является то, что element.querySelector работает, даже если элемент еще не находится в DOM, например, после его создания с помощью document.createElement.

0 голосов
/ 17 мая 2017

Это быстрая альтернатива, основанная на Node.contains 

var getById = function(id, context) {
  var el = document.getElementById(id);
  return context.contains(el) ? el : null;
}

var container = document.getElementById('container-element');
getById('my-element-id', container);

Последняя строка (профилированная на последних версиях Chrome и Firefox) работает в 4-10 раз быстрее, чем эквивалент jQuery 

$('#my-element-id', container);

Единственная хорошая альтернатива - querySelector (немного быстрее) 

container.querySelector('#my-element-id');
0 голосов
/ 20 ноября 2015

Не используйте id, если существует более одного

Может быть, класс или пользовательский атрибут лучше, тогда вы можете использовать document.querySelectorAll, чтобы найти их. 

els = document.querySelectorAll('[custom-attr]')
0 голосов
/ 16 апреля 2011

Нет.

Только для объекта document по умолчанию используется метод getElementById.

Даже если бы x был iframe или чем-то еще, вам все равно нужно было бы получить доступ к некоторым другим свойствам или что-то еще, прежде чем перейти к другому getElementById.

...