홈페이지에 다양한 기능을 집어넣기 위해 페이지가 load 된 이후에 특정 text노드를 html요소로 replace 하는 방식으로 새로운 기능을 만들어볼까 한다.

Text 노드 찾기

일단 text노드를 찾아야 할 것 같다. article 요소 하위에 있는 노드 중에서 찾고 싶은데 다음과 같은 찾으면 될 것 같다.

const nodes = document.querySelector('article').childNodes

HTML요소로 교체

다음과 같은 과정으로 교체 가능하다.

// HTML요소 생성
const span = document.createElement('span')
span.innerHTML = 'HTML요소로 교체하였습니다.'

// 모든 텍스트 노드를  span 요소로 교체
nodes.forEach(node => {
  if (node instanceof Text) {
    node.replaceWitdh(span)
  }
})