JavaScript로 DOM 텍스트 노드 래핑

때로는 CSS를 사용할 때 스타일을 제대로 적용하기 위해 특정 DOM 요소가 있어야 합니다. 예는 텍스트 노드와 간격의 사용입니다. 텍스트 블록 사이에 공백을 넣으려면 여백을 적절하게 적용하기 위해 범위로 감싸야 합니다.

CMS 시스템과 같이 콘텐츠가 제어할 수 없는 일부 경우에는 이러한 텍스트 노드를 찾아 랩핑하여 스타일을 올바르게 지정해야 할 수 있습니다. 예제를 살펴보겠습니다.

<section>
  <h1>A heading</h1>

  <p>a paragraph</p>

  some text

  <hr>

  some text
</section>

여기에 있는 HTML에는 래핑되지 않은 두 개의 텍스트 노드some text가 있습니다. 다음 노드에는 공백을 포함하여 두 HTML 요소 사이의 모든 텍스트 문자가 포함됩니다. 내 시스템이 이러한 요소 사이에 여백을 추가해야 하는 경우 불행히도 작동하지 않습니다.

이 문제를 해결하려면 자식 요소를 쿼리하고 문자가 있는 모든 텍스트 노드를 찾은 다음 span 요소로 래핑해야 합니다. 이상적인 출력은 다음과 같습니다.

<section>
  <h1>A heading</h1>

  <p>a paragraph</p>

  <span>some text</span>

  <hr>

  <span>some text</span>
</section>

모든 텍스트 노드를 찾고 래핑하려면 텍스트 노드 참조를 유지하도록 주의해야 합니다. 범위를 만들고 텍스트를 복사하는 대신 텍스트 노드를 새로 생성된 범위로 이동해야 합니다. 이것은 텍스트가 다른 곳에서 사용되고 있는 텍스트 노드일 수 있기 때문에 중요합니다. 이 예를 살펴보겠습니다.

<section>
  <h1>A heading</h1>

  <p>a paragraph</p>


  <hr>


</section>

여기에 일부 프레임워크 템플릿 바인딩을 사용하는 템플릿이 있습니다. 이 바인딩은 시간이 지남에 따라 텍스트 값을 업데이트할 수 있습니다. 이전 텍스트를 삭제하는 새 범위에 텍스트를 복사하면 앞으로 업데이트되는 텍스트 바인딩이 끊어집니다.

텍스트 노드를 span 요소로 안전하게 이동하려면 관심 있는 모든 텍스트 노드를 찾아야 합니다. 이것은 약간 다를 수 있지만 우리는 사용 사례에서 문자가 있고 빈 노드가 없는 모든 텍스트 노드를 원합니다.

const textNodes = getAllTextNodes(document.querySelector('section'));

function getAllTextNodes(element) {
  return Array.from(element.childNodes)
    .filter(node => node.nodeType === 3 && node.textContent.trim().length > 1);
}

이 함수를 사용하면 HTML 요소가 주어지면 nodeType 값이 3(텍스트)이고 노드에 하나 이상의 문자가 있는 모든 자식 노드를 찾을 수 있습니다.

이제 텍스트 노드 목록을 얻을 수 있으므로 새 범위 요소로 이동을 시작할 수 있습니다.

textNodes.forEach(node => {
  const span = document.createElement('span');
  node.after(span);
  span.appendChild(node);
});

각 텍스트 노드를 반복하고 다음 노드 뒤에 추가하는 span 요소를 만듭니다. 범위가 추가되면 기존 텍스트 노드를 사용하여 span 요소의 자식으로 추가합니다. 이를 통해 참조를 끊지 않고 텍스트 노드를 유지할 수 있습니다. 이것을 테스트하기 위해 setInterval를 사용하여 텍스트 노드 값을 초 단위로 변경할 수 있습니다.

const textNodes = Array.from(document.querySelector('section').childNodes)
  .filter(node => node.nodeType === 3 && node.textContent.trim().length > 1)

textNodes.forEach(node => {
  const span = document.createElement('span');
  node.after(span);
  span.appendChild(node);
});

setInterval(() =>
  textNodes.forEach(node => node.textContent = Math.random())
, 1000);

스팬 래퍼로 이동한 후에도 텍스트 노드를 계속 참조하는 방법을 볼 수 있습니다. 공간만 추가하려는 경우 다른 기술은 및 Grid Gap 속성을 사용하여 텍스트 노드를 포함하여 요소 사이에 공간을 추가하는 것입니다.

래퍼 로직 및 CSS Gap 대안이 포함된 전체 작업 데모를 아래에서 확인하세요!