문제링크)

문제

해결법)

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');
});

변수 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 );
});