Корпоративный блог Центра Высоких Технологий

Игорь Вечканов
Игорь Вечканов
25 ноября 200820:03
Центр Высоких Технологий
Ижевск Россия
element.getElementById на чистом javascript

Бывает, что 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

Рамиль К 26 ноября 2008 01:23
честно сказать, после разбора данной функции становится непонятно несколько вещей.
Первый самый основной вопрос - это зачем такой функционал вообще, у меня в голове рождается всего один вариант - для страниц, на которых один и тот же id встречается несколько раз, в связи с чем возникает вопрос - чем обусловлено такое использование id?

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

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

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

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

Про реализацию: результат лежит не вне функции, а просто вынесен из цикла рекурсии, чтобы значение не переприсваивалось, т.к. саму рекурсию не остановить.
|
Аноним 2 декабря 2008 19:39
Сначала научись с первого раза ставить правильно отступы, а потом уже пиши.
|
Kastoff Alex 16 декабря 2008 01:35
Спасибо за полезный пост Smile но если чесно, когда пишешь про то, что в javascript-фреймворках нет некоторых полезных функций и вставляешь одну из них, то хоть пиши, для чего она нужна и где можно использовать. А то с первого раза сложно разобраться Smile
|
Макс 6 июля 2010 05:48

/* Функция рекурсивного поиска элемента с указанным 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>

*/

|

Добавить комментарий

 


Подписка

Последние комментарии