JavaScript에서 DOMParser로 HTML 문자열 구문 분석

내 게시물을 팔로우했다면 내가 JavaScript에서 새로운 것을 발견하는 것을 좋아한다는 것을 알게 될 것입니다.

이것도 다르지 않습니다. 들어가 볼까요😎

비디오 튜토리얼

DOM 파서에 대한 비디오 자습서를 보고 싶다면 아래에서 자유롭게 시청하십시오 👇

DOM 파서

이름에 있습니다. DOMParser 객체는 HTML/XML 문자열을 받아 HTMLDocument 로 구문 분석합니다.

정말 멋지다.

실제로 작동하는 것을 봅시다:

const html = `
  <html>
    <body>
        <h1 id="title">Page Title</h1>
    </body>
  </html>
`;

const parser = new DOMParser();
const parsedDocument = parser.parseFromString(html, "text/html");

console.log(parsedDocument);

이 코드를 실행한 후 콘솔을 확인하면 각 페이지와 함께 제공되는 일반document과 매우 유사한 완전한 문서 객체를 볼 수 있습니다. 😎

이는 다음과 같은 다른 작업을 수행할 수 있음을 의미합니다.

// Select the <h1> page title
const pageTitle = parsedDocument.getElementById("title");

// Update the title's text
pageTitle.textContent = "A new page title.";

내가 보기에 이 기능에는 두 가지 주요 사용 사례가 있습니다.

HTML 문자열에서 DOM 요소 생성(요즘에는 <template> )와 같은 다른 기술이 있지만

데이터로 가득 찬 XML 문서를 가져와 구문 분석합니다 😊

어느 쪽이든 DOMParser이(가) 흥미로웠기를 바랍니다. 즐거운 코딩하세요!

지금 등록하세요 👉 JavaScript DOM 단기집중과정

웹 개발을 배우고 있다면 아래 링크에서 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Reference

이 문제에 관하여(JavaScript에서 DOMParser로 HTML 문자열 구문 분석), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dcodeyt/parse-html-strings-with-domparser-in-javascript-3bl6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다