>웹 프론트엔드 >JS 튜토리얼 >내부 텍스트를 기반으로 HTML 요소를 어떻게 검색합니까?

내부 텍스트를 기반으로 HTML 요소를 어떻게 검색합니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-04 17:44:02430검색

How Do You Retrieve HTML Elements Based on Their Inner Text?

InnerText로 요소 가져오기: 종합 가이드

HTML 태그 내에 포함된 특정 텍스트를 아는 것은 웹 개발에 유용할 수 있습니다. 이러한 지식을 통해 개발자는 특정 요소를 정확하게 조작하고 상호 작용할 수 있습니다. 이 기사에서는 내부 텍스트를 기반으로 요소를 가져오는 다양한 방법을 살펴보겠습니다.

방법 1: XPath 활용

XPath(XML Path Language)는 강력한 XML 및 HTML 문서를 쿼리하고 탐색하기 위한 유연한 접근 방식입니다. 이를 통해 개발자는 내부 텍스트를 포함한 특정 기준에 따라 요소를 검색할 수 있습니다.

샘플 코드:

var xpath = "html//a[text()='SearchingText']";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

이 코드 조각은 XPath 표현식과 일치하는 첫 번째 요소를 검색합니다. "//a[text()='SearchingText']", "SearchingText"라는 텍스트가 포함된 앵커 태그를 선택합니다. 이제 matchElement 변수는 발견된 요소에 대한 참조를 보유합니다.

방법 2: 텍스트를 포함하는 요소 검색

또는 다음을 포함하는 요소를 검색할 수 있습니다(그러나 반드시 독점적으로 포함할 필요는 없음) XPath의 "contains" 기능을 사용하여 지정된 텍스트.

샘플 코드:

var xpath = "html//a[contains(text(), 'Searching')]";
var matchingElements = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

이 코드는 XPath의 모든 앵커 태그의 순서가 지정된 목록을 반환합니다. "Searching"이라는 하위 문자열이 포함된 문서입니다. 일치하는 요소 목록을 반복하면 각 개별 요소에 액세스할 수 있습니다.

위 내용은 내부 텍스트를 기반으로 HTML 요소를 어떻게 검색합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.