Как преобразовать jq в чистый js?

#javascript

Есть код, который использует jq. Не хотелось бы загружать библиотеку , только из-за
нескольких строк кода. 
Помогите преобразовать код в чистый js.

$('document').ready(function(){
    $('.historyAPI').on('click', function(e){      
        // отменяем стандартное действие при клике
        e.preventDefault();
        // Получаем адрес страницы
        var href = $(this).attr('href');
        // Передаем адрес страницы в функцию
        getContent(href, true);
    });
});

// Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед
в браузере  
window.addEventListener("popstate", function(e) {
    // Передаем текущий URL
    getContent(location.pathname, false);
});

// Функция загрузки контента
function getContent(url, addEntry) {
    $.get(url).done(function(data) {
        // Обновление только текстового содержимого в блоке
        $('#content').html($(data).find("#content").html());
        $('#content2').html($(data).find("#content2").html());
        // Если был выполнен клик в меню - добавляем запись в стек истории сеанса
        // Если была нажата кнопка назад/вперед, добавлять записи в историю не надо
        if(addEntry == true) {
            // Добавляем запись в историю, используя pushState
            history.pushState(null, null, url); 
        }
    });
}


Пока что получилось вот так:

document.addEventListener('DOMContentLoaded',function(){

[].forEach.call( document.getElementsByClassName('historyAPI'), function(e) {

       // отменяем стандартное действие при клике
        e.preventDefault();
        // Получаем адрес страницы
        var href = $(this).attr('href');
        // Передаем адрес страницы в функцию
        getContent(href, true);

});



// Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед
в браузере  
window.addEventListener("popstate", function(e) {
    // Передаем текущий URL
    getContent(location.pathname, false);
});

// Функция загрузки контента
function getContent(url, addEntry) {
    $.get(url).done(function(data) {
        // Обновление только текстового содержимого в сером блоке
        $('#content').html($(data).find("#content").html());
        $('#content2').html($(data).find("#content2").html());
        // Если был выполнен клик в меню - добавляем запись в стек истории сеанса
        // Если была нажата кнопка назад/вперед, добавлять записи в историю не надо
        if(addEntry == true) {
            // Добавляем запись в историю, используя pushState
            history.pushState(null, null, url); 
        }
    });
}

    

Ответы

Ответ 1

$('.historyAPI').on('click', function(e){



Лучше всё это заменить на обработку всплытия клика:

document.addEventListener('click', function (e) {
  var a = e.target.closest("a.historyAPI");
  a && getContent(a.href, true);
});



$.get(url).done(function(data) {
    // Обновление только текстового содержимого в сером блоке
    $('#content').html($(data).find("#content").html());
    $('#content2').html($(data).find("#content2").html());



Приблизительно так:

fetch("url").then(function (resp) {
  return resp.text();
}).then(function (data) {
  var doc = (new DOMParser).parseFromString(data, "text/html");

  for (var id of ["content", "content2"]) {
    var dest = document.getElementById(id);
    var elem = doc.getElementById(id);

    if (elem) {
      dest.parentElement.replaceChild(elem, dest);
    } else {
      dest.textContent = "";
    }
  }


Ответ 2

$() - в контексте получения массива элементов и .find() можно заменить на querySelectorAll();
attr() - меняется на attributes;
$.get - на fetch() (ссылка на английском);


Естественно будет это все работать только если вы ориентируетесь на относительно
новые браузеры