JavaScript의 HTML 요소에서 텍스트 노드 콘텐츠를 추출하는 방법은 무엇입니까?

요소의 텍스트 노드 가져오기

JavaScript에서 HTML 요소로 작업할 때 해당 요소 내의 텍스트 콘텐츠를 가져와야 하는 경우가 많습니다. . 그러나 요소에는 텍스트 노드, 주석 노드, 요소 노드를 비롯한 다양한 유형의 노드가 포함될 수 있습니다. 이 기사에서는 텍스트 노드를 검색하기 위한 크로스 브라우저 솔루션을 살펴봅니다.

다음 HTML을 고려하세요.

<div class="title">
   I am text node
   <a class="edit">Edit</a>
</div>

우리의 목표는 텍스트 노드를 유지하면서 "나는 텍스트 노드입니다" 콘텐츠를 얻는 것입니다. "편집" 링크.

이를 수행하려면 jQuery의 content() 및 filter()를 활용할 수 있습니다. 함수:

var text = $(".title").contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).text();

이 코드는 "title" 클래스가 있는 요소를 선택하고 해당 내용을 가져옵니다. 그런 다음, nodeType이 Node.TEXT_NODE인 노드(예: 텍스트 노드)만 선택하여 콘텐츠에 필터 기능을 적용합니다. 마지막으로 필터링된 결과에서 텍스트 콘텐츠를 추출합니다.

이 접근 방식을 사용하면 "Edit" 태그를 제거하지 않고도 원하는 텍스트 노드 콘텐츠를 성공적으로 검색할 수 있습니다.

위 내용은 JavaScript의 HTML 요소에서 텍스트 노드 콘텐츠를 추출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!