любой document.body / getElementsByClassName / или любой другой возвращает тот же список с маршрутами / слоями, как это возможно?

Question

var data = document.getElementsByClassName('searchauthor__input')[0].value; 

в моем js не возвращает никакого значения.Приведенный выше прослушиватель событий работает нормально.Он возвращает больше кода, чем помещается в журнале консоли (как показано ниже в коде).

Я пробовал все различные типы document.tags, все с одинаковым ответом.Написана отдельная функция для него.

     var searchA = document.getElementsByName('searchauthor')[0];
     searchA.addEventListener('click', searchAuthor);

     function searchAuthor(){
     var data = document.getElementsByClassName('searchauthor__input') 
     [0].value;
     console.log(data);
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
     }
     };
     xhttp.open("POST", "/database/searchdb", true);
     xhttp.setRequestHeader("Content-type","application/json;charset=UTF- 
     8");
     xhttp.send(JSON.stringify(data));
     };

HTML:

          <div class="search">
          <p>Search by author</p>
          <input class="searchauthor__input" type="text">
          <button class="search__button" type="button" 
          name="searchauthor">Search</button>
          <p>Search by title</p>
          <input class="search__input">
          <button class="search__button" type="button" 
          name="searchtitle">Search</button>
          </div>

просто небольшой фрагмент ответа console.log(data):

         route {
           path: '/database/searchdb',
           stack:
        [ Layer {
           handle: [Function],
           name: '<anonymous>',
           params: undefined,
           path: undefined,
           keys: [],
          regexp: { /^\/?$/i fast_star: false, fast_slash: false },
          method: 'post' } ],
          methods: { post: true } } }