Как работает getElementById

420

17 ноября 2017, 09:40

Ребята вопрос в следующем. Есть код

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
  <div id='task_1'>
    <iframe id="iframe" src="index1.html" frameborder="1"></iframe>
    <button id="reload" value="reload">Reload page</button>
    <button id="open_new" value="open_new">Open new page</button>
    <button id="update_iframe" value="update_iframe">Update iframe</button>
    <button id="back" value="back">Come back</button>
    <button id="other" value="other">Other</button>
</div>
<script>
   var contex = document.getElementById('task_1');
   context.getElementById("reload");
</script>
</body>
</html>

Сразу оговорюсь что я понимаю что можно найти сразу, на прямую элемент с id = "reload", но реализация должна проходить именно так. Так вот вопрос: почему когда вызываем на прямую (document.getElementById('reload')) все работает, а если context.getElementById("reload") то пишет TypeError: context.getElementById is not a function. Посмотрел в proto там действительно нет getElementById(), пожалуйста объясните почему так или дайте ссылку на статью, а также если знаете как решить данный вопрос - скажите))) Всем спасибо!

Answer 1

getElementById - это метод у document корневого. Его нету у дочерних элементов.

Можно искать по классу, используя getElementsByClassName на полученном div'е.

Что-то типо такого:

function searchElements(selector, context){ 
    if(context === null || context === undefined) 
        context = document; 
 
    var itemIndex = selector.indexOf("#"); 
    if(itemIndex != -1){ 
        var itemId = selector.substring(itemIndex + 1); 
        return context.getElementById(itemId); 
    } 
 
    var classIndex = selector.indexOf("."); 
    if(classIndex != -1){ 
        var className = selector.substring(classIndex + 1); 
        return context.getElementsByClassName(className); 
    } 
     
    return context.getElementsByTagName(selector); 
} 
console.log(searchElements("#update_iframe")); 
console.log(searchElements(".reload")); 
console.log(searchElements("button"));

<div id="task_1"> 
    <button id="reload" class="reload" value="reload">Reload page</button> 
    <button id="open_new" value="open_new">Open new page</button> 
    <button id="update_iframe" value="update_iframe">Update iframe</button> 
    <button id="back" value="back">Come back</button> 
    <button id="other" value="other">Other</button> 
</div>

Синонимизатор текста на английском языке

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

проблемы с регистрацией и входом

здравствуйте, на сайте перестали работать регистрация и вход, в консоли выходит такая ошибка:

347

javascript

На чем сделать заказ билетов для сайта?

С помощью чего лучше всего создать подобный скрипт? Какой фреймворк посоветуете

280

javascript

Отправка данных и файлов через ajax

Возникла проблема передачи данных и файлов через ajax, по отдельности все работает, а вот вместе не хочет, подскажите пожалуйста как это обойти,...

315

javascript

Обработка multipart/form-data на сервере NodeJs

Доброго времени суток! Пытаюсь обработать multipart/form-data и решительно ничего не получаетсяПо рекомендации Гугла решил использовать модуль formidable

302