Javascript изображение смены: MDN Javascript основы

Question

я собираюсь через руководство веб-разработки на Developer Network Mozilla, и в JS basics section, я наткнулся на этот пример:

var myImage = document.querySelector('img'); 

myImage.onclick = function() { 
    var mySrc = myImage.getAttribute('src'); 
    if(mySrc === 'images/firefox-icon.png') { 
     myImage.setAttribute ('src','images/firefox2.png'); 
    } else { 
     myImage.setAttribute ('src','images/firefox-icon.png'); 
    } 
} 

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

Мой вопрос: при работе с изображениями в HTML, если присутствует .html файла будет находиться в папке под названием pages, наряду с другими двойниками папок, как images, scripts и т.д., файл структура Я бы следовал в этом случае, чтобы достичь изображения было бы так: ../images/filename.jpg. .. будет использоваться для доступа к основной (корневой) папке из папки pages, а затем откройте папку images.

Как работает этот пример смены изображения, без использования ..? Файл main.js находится в подпапке корня.

Answer 1

Как этот пример смены изображения работает тогда, без .. есть б/у?

Это работает, потому что файл js не живет один, он включен в файл HTML и этот файл HTML находится в корневой папке.

Answer 2

JavaScript добавляет новый путь к узлу <img> на странице html. Все, что он делает, это вставить некоторую информацию на страницу, она ничего не знает о изображениях.

Браузер видит, что что-то в DOM изменилось, поэтому он считывает новый атрибут src, загружает изображение и перерисовывает.

Поскольку путь написан на html-странице, это относительно того, где находится эта страница. Не имеет значения, что JS вставил его.