AJAX - захватить определенные элементы DOM из другого файла HTML?

Question

Я пытаюсь использовать vanilla JS для загрузки контента без обновления. Если щелкнуть пункт меню, я хотел бы получить содержимое из другого html-файла, но получить только тело или определенный класс.

Это выполнимо без jQuery?

Заранее спасибо!

var AJAX = function(page){

  var call = new XMLHttpRequest();

  call.open("GET", page);

  call.send();

  call.addEventListener("load", function(e){
    console.log(e.target.responseText); // this shows all the HTML as text, but I only want to grab either the body or a particular class, and use it in an innerHTML method.
  });
}

Answer 1

Вы можете либо:

1. назначить содержимое скрытому div. А затем запросите DOM.
2. разобрать ответ как XML и получить доступ к тегам.

Для 1:

ajaxRequest.onreadystatechange = function() {

           if(ajaxRequest.readyState == 4) {
              var ajaxDisplay = document.getElementById('ajaxDiv');
              ajaxDisplay.innerHTML = ajaxRequest.responseText;
           }
        }

Для 2 это может помочь: https://stackoverflow.com/a/13460821/1364747

Answer 2

С XMLHttpRequest это довольно просто - с responseType как document, сглаженное XMLHttpRequest свойство .response будет содержать ответ document , который вы можете использовать обычным Методы DOM включены. Например, следующий код выберет и зарегистрирует текст первого элемента с именем класса foo из документа ответа:

function get(url){
  var r = new XMLHttpRequest();
  r.open('GET', url, true);
  r.responseType = 'document';
  r.onload = function () {
    if (r.readyState !== 4 || r.status !== 200) return;
    // also handle error statuses

    // now, r.response is a document:

    const doc = r.response;
    console.log(doc.querySelector('.foo').textContent);
  };
  r.send();
}

Если вы используете более современный метод fetch, вам придется явно преобразовать текст ответа в документ, возможно, с помощью DOMParser. Например:

function get(url){
  fetch(url)
    .then(res => res.text())
    .then((text) => {
      const doc = new DOMParser().parseFromString(text, 'text/html')
      console.log(doc.querySelector('.foo').textContent);
    });
}

Одна из приятных особенностей DOMParser заключается в том, что вы можете использовать его для преобразования любой (допустимой) строки HTML в документ.