5

element.getElementById на чистом javascript

25 ноября 2008 года

Бывает, что javascript-фреймворки в проекте не используются, а некоторые функции оттуда просто жизненно необходимы. Приходится выкручиваться. 

var answer = 0;
function getElementChildById(parent,id)	{
if(document.getElementById(parent)) container = document.getElementById(parent);
else container = parent;
if(container.hasChildNodes && container.childNodes.length >0)	{
var arr = container.childNodes;
for(var i = 0; i < arr.length; i++)	{
if(arr[i].id == id)	{
answer = arr[i];
break;
}
else if(arr[i].hasChildNodes && arr[i].childNodes.length >0)
getElementChildById(arr[i],id)
}
}
if(answer)
return answer;
}

Метки:

5 комментариев к записи «element.getElementById на чистом javascript»

  1. Рамиль К, 26.11.2008 01:23 #

    честно сказать, после разбора данной функции становится непонятно несколько вещей.
    Первый самый основной вопрос — это зачем такой функционал вообще, у меня в голове рождается всего один вариант — для страниц, на которых один и тот же id встречается несколько раз, в связи с чем возникает вопрос — чем обусловлено такое использование id?

    Другой вопрос касается реализации этой функции.
    он так-же получился какой-то двух-частный…

    почему результат лежит вне этой функции и почему перед возвращением проводится проверка?

    спустя какое-то время рассуждений, подумалось, что такой подход должен остановить рекурсию, однако присмотревшись, всё-таки обнаружил, что рекурсия не остановится.

    всё, интересны объяснения)

    Ответить
  2. vigor, 02.12.2008 09:23 #

    По поводу id Вы верно подметили. Действительно, функция нужна чтобы выбрать нужный элемент с заданным id, когда id на странице не уникален. Это грубое нарушение семантики html-документа, однако, для некоторых задач оно жизненно необходимо. В связи с этим возникает и необходимость в данной функции (которая кстати по умолчанию реализована например в JQuery).

    Про реализацию: результат лежит не вне функции, а просто вынесен из цикла рекурсии, чтобы значение не переприсваивалось, т.к. саму рекурсию не остановить.

    Ответить
  3. Аноним, 02.12.2008 19:39 #

    Сначала научись с первого раза ставить правильно отступы, а потом уже пиши.

    Ответить
  4. Kastoff Alex, 16.12.2008 01:35 #

    Спасибо за полезный пост :) но если чесно, когда пишешь про то, что в javascript-фреймворках нет некоторых полезных функций и вставляешь одну из них, то хоть пиши, для чего она нужна и где можно использовать. А то с первого раза сложно разобраться :)

    Ответить
  5. Макс, 06.07.2010 05:48 #

    [cite]
    /* Функция рекурсивного поиска элемента с указанным id
    * Поиск осуществляется относительно указанного элемента "parent"
    * Если параметр "many" включить, то будут найдены все элементы с указанным id,
    * находящимся в ветке "parent"
    *
    * Но было бы лучше сделать через прототип, добавив метод всем элементам
    */

    function getElementChildById(aparent,aid, many){
    var answer = 0;
    if (many) answer = [];
    var finish=false;

    var getElementRecursive = function (parent,id){

    if (parent &&
    (parent.nodeType == 1 || //Если это элемент
    parent.nodeType == 9)) //Если это документ
    container = parent;
    else
    return;

    if(container.hasChildNodes && container.childNodes.length >0){
    var arr = container.childNodes;
    for(var i = 0; i < arr.length; i++){
    if (finish) break;
    //alert ("+ "+" id="+arr[i].id+" id2="+id+"\n\n"+arr[i].innerHTML);
    if(arr[i].id == id) {
    if (many) answer.push(arr[i])
    else{
    answer = arr[i];
    finish=true;
    break;
    }
    }
    if(arr[i].hasChildNodes && arr[i].childNodes.length >0)
    getElementRecursive(arr[i],id)
    }
    }
    }

    var acontainer = null;
    if (aparent && aparent.nodeType == 1) //Если это элемент
    acontainer = aparent;
    else
    if (typeof aparent == "string") //Если это строка
    acontainer = document.getElementById(aparent);
    acontainer = acontainer || document;

    getElementRecursive(acontainer, aid);
    return answer;
    }

    /*
    Функция проверена
    var c = getElementChildById(null, "ccc", true);
    alert (c);
    alert (getElementChildById(c[1],"ccc"));
    ————-
    html:
    <div id="aaa">aaa</div>
    <div id="aaa">bbb</div>
    <div id="aaa">
    <div id="bbb">
    <div id="ccc">ccc</div>
    </div>
    </div>
    <div id="ccc">
    <div id="bbb">
    <div id="ccc">xxx</div>
    </div>
    </div>
    ——————
    Результат:
    первый запрос: три элемента с id="ccc"
    второй запрос:
    <div id="ccc">xxx</div>

    */
    [/cite]

    Ответить

Оставить комментарий