Chrome DOM element 변화 감시 문의

Question

안녕하세요.

인스타그램 게시물의 DOM구조를 보다가 궁금한 것이 있어 문의 드립니다.

instagram에 접속을 하고, F12를 눌러서 chrome의 element에서 DOM tree를 보면,

#react-root > section > main > section > div > div:nth-child(2) > div selector아래에

<article> tag안에 각각의 게시물(feed)이 하나씩 들어 있습니다. 즉 PC에서 초기에 접속하면 4개의 게시물이 보이고

4개의 <article> tag가 있습니다.

그리고 화면을 scroll하면 계속해서 게시물이 늘어나지만 <article> tag는 최대 8개로 유지가 되는데요,

이 <article> tag의 내용이 바뀌는지를 observe할수 있는 방법이 있을지요?

정리하면,

instagram의 feed를 나타내는 <article> tag의 내용이 바뀌는 경우에 이를 event로 받아보는 것이 가능한지 궁금합니다.

만약 event로 받는것이 어렵다면 다른 방법으로 이 변화를 감지할수 있는 방법이 있는지도 궁금합니다.

Answer 1

DOM의 변화를 감지해주는 MutaionObserver라는 것이 있습니다.

인스타그램을 보니 <article> 태그가 하나 있고 스크롤이 내려갈때 <article> 태그 안에 <div>로 감싸진 다음 컨텐츠들을 추가해주는 방식입니다.

const article = document.getElementsByTagName('article')[0] const observer = new MutationObserver((mutationsList, observer)=>{ for(let mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } } }) observer.observe(article, {childList: true, subtree: true})

위와 같은 코드를 실행해주면 article 안에 컨텐츠가 생성(childList가 변화되는 이벤트)될 때마다 console이 찍히게 됩니다.

출처 : https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver