Не могу выбрать элемент JS [дубликат]

167

24 января 2021, 22:00

На этот вопрос уже дан ответ здесь:

Странное значение переменной name в глобальном контексте (1 ответ)

Закрыт 9 месяцев назад.

Есть div class="top", выбираю в нём строку пустой таблицы с помощью document.querySelector(...); и вывожу в консоль и выводится как на картинке. Есть точно такой же div class="left" с пустой таблицей и с ним всё в порядке. вот селекторы

var top = document.querySelector("div.top > table > tr");
var left = document.querySelector(".left > table");

вот HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="map.js"></script>
</head>
<body>
   <p>
        введите количество городов: <input type="number" min="0" max="100" id="countOfCity">  
   </p>
   <div id="message"></div>
   <div class="top"><table><tr></tr></table></div>
   <div class="left"><table></table></div>
    <table>
        <tbody id="makeTable">
        </tbody>
    </table>
    <div id="interface">
        <button onclick="makeArr()">создать массив</button>  
    </div>
</body>
</html>

Как выбрать этот элемент? Даже если использовать сгенерированный хромом селектор не работает.

Answer 1

Переменная top в глобальном контексте зарезервирована под "самое родительское" окно.
Либо перенесите код в функцию, либо переименуйте переменную.

Window.top

Также можете воспользоваться переменными блочной видимости:

{// Фигурные скобки важны - они формируют область видимости для let/const
  let top = document.querySelector(selector);
  console.log(top);
}

Answer 2

В актуальном DOM строки могут быть вложены в tbody даже если их не было в HTML

Продемонстрирую:

let topTr = document.querySelector('.top > table > tbody > tr') 
 
console.log(topTr)

<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="style.css"> 
  <script defer src="map.js"></script> 
</head> 
 
<body> 
  <p> 
    введите количество городов: <input type="number" min="0" max="100" id="countOfCity"> 
  </p> 
 
  <div id="message"></div> 
 
  <div class="top"> 
    <table> 
      <tr></tr> 
    </table> 
  </div> 
 
  <div class="left"> 
    <table></table> 
  </div> 
 
  <table> 
    <tbody id="makeTable"> 
    </tbody> 
  </table> 
 
  <div id="interface"> 
    <button onclick="makeArr()">создать массив</button> 
  </div> 
 
</body> 
 
</html>

Answer 3

Нужно было сменить имя переменной с top на что нибудь другое.