Метод getElementById() недоступен для таблиц

Question

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

HTML:

<table id="age-table"> 
     <tr> 
      <td id="age-header">Your age:</td> 
      <td> 
       <label> 
        <input type="radio" name="age" value="young"/> under 18 
       </label> 
       <label> 
        <input type="radio" name="age" value="mature"/> 18 to 50 
       </label> 
       <label> 
        <input type="radio" name="age" value="senior"/> after 60 
       </label> 
      </td> 
     </tr> 
    </table> 

И сценарий:

<script> 
     var table = document.getElementById('age-table'); 
     var lables = table.getElementsByTagName('label'); 
     console.log(lables); 
     var findid = table.getElementById('age-header'); //throws error table.getElementById() is not a function. 

    </script> 

я могу добиться того, что я хочу с помощью содержит(), как этот

var id = document.getElementById('age-header'); 
var findid = table.contains(id); 
console.log(findid); 

Но я не понимаю, почему table.getElementsByTagName('label') б/у, но table.getElementById('age-header') б/у ошибка. Любое понимание будет оценено по достоинству.

Спасибо.

Answer 1

Метод getElementById доступен только для объекта Document. Если вы думаете об этом, это имеет смысл, потому что идентификаторы должны быть уникальными в документе, а не элементом DOM.

Посмотрите на this.

Answer 2

document является экземпляром HTMLDocument.

Но элемент (в вашем примере, table) является экземпляром HTMLDivElement.

Вы можете легко проверить это прототип по-другому.