Как console.log(dir) находит элемент по id?

346

30 ноября 2017, 00:38

console.dir(test);

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="utf-8" /> 
	<title>JS Practice</title> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
	<link rel="shortcut icon" type="img/png" href="img/favicon.png?v=1"/> 
	<link rel="stylesheet" href="css/main.min.css" /> 
</head> 
<body class="page"> 
	<header class="header"> 
 
	</header> 
	<main class="main"> 
		<div id="test" class="element"></div> 
	</main> 
	<footer class="footer"> 
 
	</footer> 
</body> 
</html>

Я пытался вручную найти в window элемент, но не смог. Объясните как console.log его находит.

Answer 1

Если элементу назначен специальный атрибут id, то можно получить его прямо по переменной с именем из значения id.

https://learn.javascript.ru/searching-elements-dom

Идентификаторы добавляются в глобальное пространство имен автоматически, т.е. в window. Если взять ваш пример, то как раз доступ осуществляется с помощью вызова window.test

Об этом сказано в спецификации HTML5: 7.3.3 Named access on the Window object