[Yeu] HTML를 파싱해보자
문제링크)
해결법)
HTML DOM String을 DOM으로 파싱 후 ->
a태그의 title attribute를 얻는 문제
DOM Parser()을 이용해서 풀어보자
1. DOMParser()
객체를 생성하고 2. parseFromString
메서드를 사용해서 DOM 객체를 생성하자
button.addEventListener('click', () => {
let domparser = new DOMParser();
let containerDOM = domparser.parseFromString( container.textContent , 'text/html');
});
DOMParser()
객체를 생성하고 2. parseFromString
메서드를 사용해서 DOM 객체를 생성하자button.addEventListener('click', () => {
let domparser = new DOMParser();
let containerDOM = domparser.parseFromString( container.textContent , 'text/html');
});
변수 containerDOM
에는 container에 담긴 HTML DOM String을 DOM으로 변환한 DOM 객체가 담겨있다
2. containerDOM의 a태그를 가져온 뒤 a태그의 title attribute를 얻어내자
let aArr = containerDOM.querySelectorAll('li a');
let titleArr = [];
aArr.forEach( a => titleArr.push( a.getAttribute('title')) );
aArr에는 a태그 객체들이
titleArr에는 title attirubte들이 담겨있다. getAttribute()를 사용해서 Attribute 값을 얻어냈다
3. JSON 형식으로 만든 뒤 result에 담아내자
result.textContent = JSON.stringify( titleArr );
전체 코드
let container = document.querySelector('#container'); // 황색박스
let button = document.querySelector('button'); // 버튼
let result = document.querySelector('#result'); // 분홍박스
button.addEventListener('click', () => {
let domparser = new DOMParser();
let containerDOM = domparser.parseFromString(container.textContent , 'text/html');
let aArr = containerDOM.querySelectorAll('li a');
let titleArr = [];
aArr.forEach( a => titleArr.push( a.getAttribute('title')) );
result.textContent = JSON.stringify( titleArr );
});
Author And Source
이 문제에 관하여([Yeu] HTML를 파싱해보자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sa02045/Yeu-HTML를-파싱해보자저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)