JQuery 없이 특정 텍스트가 들어간 HTML Element 찾기

들어가며

JQuery 없이도, XPath Expression을 사용하면 태그명과 evaluate 메서드로 찾을 수 있습니다.

사용법

Document.evaluate() - Web APIs | MDN

The evaluate() method of the Document interface selects elements based on the XPath expression given in parameters.

MDN Web Docs.logo-m{fill:var(--text-link)}

let searcher = document.evaluate("//태그[contains(., '텍스트')]", document, null, XPathResult.ANY_TYPE, null);
let searcherIterator = searcher.iterateNext();

searcher에 해당하는 Element들이 저장되며, iteratorNext를 활용해 탐색할 수 있습니다.
위 코드에서 searcherIterator에는 해당 HTMLElement가 저장됩니다.

예시

지금 보고 계신 이 페이지에서 F12로 관리자 도구를 여신 뒤, Console 탭에서 바로 테스트할 수 있는 예시입니다.

let searcher = document.evaluate("//p[contains(., '저장되며')]", document, null, XPathResult.ANY_TYPE, null);
let searcherIterator = searcher.iterateNext();

위 코드 실행 시 searcherIterator의 값은 다음과 같습니다. 타입은 HTMLElement입니다.

<p>
    <code>searcher</code>에 해당하는 Element들이 저장되며, 
    <code>iteratorNext</code>를 활용해 탐색할 수 있습니다.<br>
    위 코드에서 <code>searcherIterator</code>에는 해당 HTMLElement가 저장됩니다.
</p>