Fetch API 응답에 대해 DOM 쿼리 방법을 사용할 수 있습니까?

Question

현재 사용자 중심 양식 만 노출하는 이전 웹 인터페이스와의 상호 작용을 자동화하려고하므로 동적 요청이있는 웹 페이지에서 일부 정보를 긁어 내야합니다.

XHR을 사용하는 경우 응답을 Document으로 처리 할 수 ​​있으므로 querySelector과 같은 메서드를 사용하여 특정 노드에서 정보를 검색 할 수 있습니다. 그래도 Fetch API를 사용하려고합니다. Body 만 제공합니다. 이것은 blob, formData, json 및 text입니다.하지만 Document으로 처리 할 수있는 내용은 없습니다.

내가 누락 된 항목이 있습니까? fetch에서 직접 문의 할 수있는 문서 또는 다른 것을 얻을 수 있습니까? 그렇지 않다면 문자열 (Body.text()에서)을 가져와 문서로 변환하는 간단한 방법이 있습니까?

Answer 1

가져 오기에서 직접 쿼리 할 수있는 문서 또는 다른 것을 얻을 수 있습니까? 그렇지 않다면 Body.text()에서 문자열을 가져와 문서로 변환하는 간단한 방법이 있습니까?

Fetch API 자체에서 직접 Document을 다시 가져올 수 없습니다. 그러나 DOMParser을 사용하고 parseFromString 메서드에 Body.text() 가져 오기가 해결할 텍스트를 제공 할 수 있습니다.

fetch("https://enable-cors.org/") 
 
    .then(response => response.text()) 
 
    .then(text => { 
 
    const parser = new DOMParser(); 
 
    const htmlDocument = parser.parseFromString(text, "text/html"); 
 
    const section = htmlDocument.documentElement.querySelector("section"); 
 
    document.querySelector("div").appendChild(section); 
 
    })

<div></div>