HTML 요소 크로스 브라우저에서 텍스트 노드 콘텐츠만 검색하는 방법은 무엇입니까?

브라우저 간 요소 텍스트 노드 검색

HTML에서 요소에 텍스트와 요소가 모두 포함되어 있으면 요소의 텍스트 콘텐츠를 가져오는 것이 까다로울 수 있습니다. 다른 요소. 텍스트 노드를 효과적으로 추출하려면 크로스 브라우저 솔루션이 필요합니다.

문제:

다음 HTML 구조를 고려하세요.

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

목표는 "Edit" 앵커를 유지하면서 "I am text node"라는 텍스트 노드를 검색하는 것입니다. 태그.

해결책:

이는 jQuery 프레임워크를 사용하여 달성할 수 있습니다.

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

이 코드:

1. "제목" 클래스가 있는 요소를 선택합니다.
2. 다음을 사용하여 내용을 가져옵니다. content() 메서드.
3. filter() 메서드를 사용하여 콘텐츠를 필터링하고 텍스트 노드(nodeType == Node.TEXT_NODE)만 유지합니다.
4. 다음을 사용하여 필터링된 노드의 텍스트 콘텐츠를 검색합니다. text() 메서드.

결과적으로 변수 text에는 원하는 텍스트 노드만 포함됩니다. "나는 텍스트입니다. 노드."

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