Виктор

^(?:^https?\:\/\/)?(?:www\.)?[a-z0-9-]+\.[a-z]+(?:[?\/].*)?$

проверка

Нужно с помощью JS посылать AJAX запрос на PHP скрипт.

Далее 2 варианта:

1) PHP скрипт возвращает данные (например, в формате JSON), JS заполняет поля модального окна этими данными и отображает его

2) PHP скрипт возвращает HTML уже готового модального окна, JS только подставляет его в родительский элемент

Пример запроса:

async function openModal(id = 0){
    if(!id){
       return;
    }

    const response = await fetch(`library.php?id=${id}`);
    const responseText = await response.text();

   // Дальше делайте манипуляции с модальным окном и полученными данными
}

Разберем вопрос:

он уже есть в самом html документе

браузер разбирает HTML документ постепенно

js должен видеть

это в каком контракте написано?

почему если скрипт подключить в теге head то получим ошибку, а если внизу body то всё нормально

потому что скрипт блокирующий и браузер выполняет его до того, как появляется H1

Варианты решения:

1. Оставить скрипты внизу body, что-бы выполнялись после загрузки вышестоящих тегов
   
2. Атрибутом defer указать браузеру, что выполнять скрипт нужно после построения DOM дерева
   
3. Прослушивать события страницы на стороне JS, работать с тегами только после построения DOM дерева
   

скорости работы

Изменение класса быстрее (замеры проводили, можете воспроизвести)