자바 스크립트에서 RSS 리더 앱을 만드는 방법

우리는 피드 가져 오기 우리의 RSS 독자 신청으로. 웹 사이트에서 RSS 피드의 URL은 내부에서 발견 태그를 사용하여 애플리케이션 / rss + xml 유형. 예를 들어 Hongkiat.com에서 다음 RSS 피드 링크를 찾을 수 있습니다..

먼저, 웹 사이트의 피드 URL 가져 오기 JavaScript 사용.

 doc = domParser.parseFromString (htmlTxt, 'text / html') var에 새로운 DOMParser ()를 보냅니다. var () catch (() => console.error ( '웹 사이트 가져 오기 오류')) 

그만큼 술책() 메소드는 비동기 적으로 자원을 가져옵니다.. 인수 (코드에서 웹 사이트의 URL)로 자원의 URL을 사용합니다. 그것 ~을 반환합니다. 약속 객체이므로 웹 사이트가 성공적으로 가져올 때 (즉, 약속 성취된다). 그때() 성명서 가져온 응답을 처리합니다. (입술 위 코드에서).

가져온 응답은 다음과 같습니다. 텍스트 문자열로 완전히 읽는다. ~을 사용하여 본문() 방법. 이 텍스트는 가져온 웹 사이트의 HTML 텍스트. 처럼 술책(), 본문() 또한 ~을 반환합니다. 약속 목적. 따라서 응답 스트림에서 응답 텍스트를 성공적으로 만들면, 그때() 해당 응답 텍스트를 처리합니다 (htmlText 위 코드에서).

웹 사이트의 HTML 텍스트를 사용할 수있게되면 DOMParser API 에 그것을 DOM 문서로 파싱한다.. DOMParser XML / HTML 텍스트 문자열을 DOM 문서로 구문 분석합니다. 그 방법, parseFromString (), 걸리다 두 가지 주장: 구문 분석 할 텍스트 그리고 컨텐츠 타입.

그런 다음, 만들어진 DOM 문서에서 우리는 찾아라 href 관련 가치 꼬리표 ~을 사용하여 querySelector () 피드의 URL을 얻기위한 메소드.

피드 파싱 및 표시

웹 사이트의 피드 URL을 얻은 후에는 RSS 문서 가져 오기 및 읽기 해당 URL에서 찾았습니다..

 doc = domParser.parseFromString (xmlTxt, 'text / xml') doc doc = domParser.parseFromString (xmlTxt, 'text / xml') 문서를 가져 오려면 fetch (feedUrl) .then (res) => res.text (). 다음 (xmlTxt) => var domParser = new DOMParser textContent document.querySelector ( 'output') .querySelectorAll ( 'item') .forEach (item) => h1 = document.createElement ( 'h1') h1.textContent = item.querySelector ( 'title'). appendChild (h1))) 

우리가 웹 사이트를 가져 와서 파싱 한 것과 같은 방식으로, 이제 우리는 XML 피드를 가져 와서 DOM 문서로 파싱한다.. 이를 위해 우리는 '텍스트 / xml' 콘텐츠 유형 parseFromString () 방법.

파싱 ​​된 문서에서 우리는 모든 것을 선택하십시오. 집단 ~을 사용하여 querySelectorAll 방법 및 각각 반복하다.

각 요소 내부에서 액세스 태그 처럼