DOM을 수정하지 않고 요소에서 텍스트 노드를 추출하려면 어떻게 해야 합니까?

DOM 구조를 변경하지 않고 텍스트 노드 검색

특정 시나리오에서는 구조를 수정하지 않고 요소의 텍스트 콘텐츠를 추출해야 합니다. . 예를 들어, 다음 HTML 코드에서:

<div>

원하는 출력이 "편집" 태그를 유지하면서 "I am text node"라는 텍스트를 얻는 것이라면 크로스 브라우저 솔루션이 필요합니다.

JavaScript의 Element.contents()와 Node.TEXT_NODE

이를 달성하기 위해 JavaScript의 Element.contents() 및 Node.TEXT_NODE 속성을 활용할 수 있습니다. 다음은 간결하면서도 효과적인 코드 조각입니다.

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

솔루션 분석:

• $(".title").contents(): This 함수는 클래스가 있는 선택된 요소 내의 모든 직접 하위 노드의 컬렉션을 반환합니다. "title".
• .filter(): 필터 함수는 각 하위 노드를 반복하고 Node.TEXT_NODE 유형인 항목만 반환합니다.
• .text(): 이 메서드는 필터링된 결과의 텍스트 콘텐츠입니다.

따라서 이 기술을 사용하면 HTML을 변경하지 않고도 "나는 텍스트 노드입니다" 부분을 성공적으로 얻을 수 있습니다. 구조. 이 솔루션은 모든 주요 웹 브라우저와 호환되므로 브라우저 간 기능이 보장됩니다.

위 내용은 DOM을 수정하지 않고 요소에서 텍스트 노드를 추출하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!