<div id="readability-page-1" class="page"><div>
<p>HTML<sub>(과 XML)</sub>에서 특정 요소를 찾을 때 CSS 선택자만으로 부족한 경우 XPath <sub>(XML Path Language)</sub>를 쓰곤 합니다.</p>



<p>XPath는 HTML/XML 문서를 트리 형태로 보고 노드를 경로로 지정해 선택하는 언어입니다. </p>



<p>기본 경로 표현부터 텍스트 포함 검색까지 가능합니다.</p>


<h2 id="xpath-%25ea%25b8%25b0%25eb%25b3%25b8-%25ea%25b5%25ac%25ec%25a1%25b0">XPath 기본 구조</h2>


<p>기본적으로 문서 구조를 따라 선택자를 씁니다. 기본적인 표현은 이렇습니다:</p>



<pre><code>/bookstore/book/title</code></pre>



<p>중간 생략시 사이에 <code>//</code>를 씁니다.</p>



<pre><code>/bookstore//title</code></pre>



<ul>
<li><code>/</code> : 루트부터 내려가는 절대 경로</li>



<li><code>//</code> : 문서 어디서든 해당 요소를 찾는 전체 경로</li>



<li><code>@속성명</code> : 속성 선택</li>



<li><code>*</code> : 모든 노드(태그)</li>



<li><code>[조건]</code> : 조건 필터</li>
</ul>



<pre><code>//book[@lang="en"]</code></pre>



<p>→ <code>lang="en"</code> 속성을 가진 모든 book 요소 선택.</p>


<h2 id="%25ec%259d%25b8%25eb%258d%25b1%25ec%258a%25a4-%25ec%25a7%2580%25ec%25a0%2595%25ea%25b3%25bc-%25ec%259c%2584%25ec%25b9%2598">인덱스 지정과 위치</h2>


<p>개별 노드를 직접 선택할 수도 있습니다<sub>(인덱스는 1부터 시작합니다)</sub>.</p>



<pre><code>(//div[@class="post"])[1]</code></pre>



<p>→ <code>class="post"</code>인 <code>&lt;div&gt;</code> 중 첫 번째 요소를 선택합니다.</p>


<h2 id="%25ed%2585%258d%25ec%258a%25a4%25ed%258a%25b8%25ea%25b0%2580-%25ec%25a0%2595%25ed%2599%2595%25ed%259e%2588-%25ec%259d%25bc%25ec%25b9%2598%25ed%2595%2598%25eb%258a%2594-%25eb%2585%25b8%25eb%2593%259c-%25ec%2584%25a0%25ed%2583%259d">텍스트가 정확히 일치하는 노드 선택</h2>


<p>완전한 일치 텍스트 검색은 다음처럼 씁니다:</p>



<pre><code>//h1[text()="Hello World"]</code></pre>



<p>정확히 <code>"Hello World"</code>라는 텍스트를 가진 <code>&lt;h1&gt;</code> 요소를 모두 선택합니다.</p>


<h2 id="%25ed%2585%258d%25ec%258a%25a4%25ed%258a%25b8%25ea%25b0%2580-%25eb%25b6%2580%25eb%25b6%2584-%25ed%258f%25ac%25ed%2595%25a8%25eb%2590%259c-%25eb%2585%25b8%25eb%2593%259c%25eb%25a5%25bc-%25ec%2584%25a0%25ed%2583%259d%25ed%2595%2598%25eb%25a0%25a4%25eb%25a9%25b4">텍스트가 부분 포함된 노드를 선택하려면</h2>


<p>특정 문자열을 포함한 노드를 찾을 때는 <code>contains()</code> 함수를 사용합니다.</p>


<h3 id="%25eb%25b0%25a9%25eb%25b2%2595-1-%25ec%25a0%2584%25ec%25b2%25b4-%25eb%25ac%25b8%25ec%259e%2590%25ec%2597%25b4-%25ec%2582%25ac%25ec%259a%25a9">방법 1 — <code>. (전체 문자열)</code> 사용</h3>


<pre><code>//button[contains(., "로그인하기")]</code></pre>



<ul>
<li>버튼 노드(<code>//button</code>) 중에서</li>



<li>자신 안의 전체 텍스트(자식 포함)에 <code>"로그인"</code>이 들어간 요소를 찾습니다.</li>
</ul>



<p>이 방법은 문서 전체 텍스트를 하나의 문자열로 본 후 검색합니다. 그래서 텍스트가 여러 노드로 쪼개진 경우에도 부모 요소를 기준으로 찾아냅니다.</p>



<p>예컨대 아래처럼 로그인과 하기가 각각 다른 노드에 있어도 검색해낸다는 장점이 있습니다.</p>



<pre><code>&lt;button&gt;&lt;b&gt;로그인&lt;/b&gt;하기&lt;/button&gt;</code></pre>



<p>만약 아래처럼 <code>*</code>를 쓰면 최상위 요소인 <code>html</code> 요소부터 찾아들어갑니다.</p>



<pre><code>//*[contains(., "로그인하기")]</code></pre>



<p>직접 해보는 방법도 있습니다. 브라우저 개발자 도구 JS 콘솔에서 아래 명령을 쳐 보시면 됩니다<sub>(<code>$x</code>는 브라우저 콘솔에서만 작동합니다)</sub>.</p>



<pre><code>$x('//*[contains(., "다")]') </code></pre>



<p><code>contains()</code>는 <code>contains(string, string) → boolean</code> 형태의 XPath 함수입니다. 첫 번째 인자는 문자열로 자동 변환되는데, <code>.</code>처럼 노드를 가리키는 표현식도 사용할 수 있습니다.</p>



<p><code>.</code>은 현재 노드를 의미하고, 문자열이 필요한 자리에 노드가 들어오면 해당 노드의 문자열 값이 사용됩니다. 이 값은 현재 노드와 그 하위 노드에 포함된 모든 텍스트를 하나로 합친 문자열입니다<sub>(개념적으로 DOM의 <code>textContent</code>에 가깝습니다)</sub>.</p>



<p>따라서 <code>contains(., "...")</code> 형태로 사용하면, 현재 노드 전체에 포함된 텍스트 중에 <code>...</code>이 들어 있는지를 검사하게 됩니다.</p>


<h3 id="%25eb%25b0%25a9%25eb%25b2%2595-2-text%25ec%2599%2580-contains-%25ed%2595%25a8%25ea%25bb%2598-%25ec%2593%25b0%25ea%25b8%25b0">방법 2 — <code>text()</code>와 contains() 함께 쓰기</h3>


<pre><code>//*[text()[contains(., "로그인")]]</code></pre>



<p>이 표현은 다음과 같습니다:</p>



<ul>
<li><code>text()</code> – 텍스트 노드를 일일이 검사</li>



<li><code>[contains(., "로그인")]</code> – 텍스트 노드 중 하나라도 <code>"로그인"</code>을 포함하면 해당 부모 요소를 선택</li>
</ul>



<p>즉 <code>"로그인"</code>이라는 문자열이 포함된 텍스트 노드를 가진 요소만 고르게 됩니다.</p>


<h2 id="%25ec%25a3%25bc%25ec%259d%2598-contains-vs-containstext">주의: contains vs contains(text())</h2>


<p><code>contains(. , "문자열")</code>과 <code>contains(text(), "문자열")</code>은 비슷해 보이지만 의미가 다릅니다.</p>



<p>첫 번째는 전체 자식 텍스트를 하나의 문자열로 합친 결과에서 검사하고, 두 번째는 각 텍스트 노드별로 <code>contains()</code>를 적용합니다.</p>



<p>실전에서 보통 찾고 싶은 것은 문자열이 포함된 요소 전체이므로 <code>contains(., "문자열")</code>이나 <code>text()[contains(., "문자열")]</code>를 많이 씁니다.</p>


<h2 id="%25ec%2598%2588%25ec%258b%259c">예시</h2>


<p>다음과 같은 HTML 구조가 있다고 해봅시다:</p>



<pre><code>&lt;li&gt;&lt;a&gt;로그인하기&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;지금 로그인&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;회원가입&lt;/a&gt;&lt;/li&gt;</code></pre>



<ul>
<li><code>//a[text()="로그인하기"]</code><br>→ 텍스트가 정확히 <code>로그인하기</code> 인 <code>&lt;a&gt;</code> 요소만 선택<br>→ 결과: 첫 번째 요소만 선택</li>



<li><code>//a[contains(text(), "로그인")]</code><br>→ 텍스트에 <code>로그인</code>이 포함된 <code>&lt;a&gt;</code> 요소 선택<br>→ 결과: 첫 번째 / 두 번째 요소 모두 선택</li>



<li><code>//*[@class="login" and contains(., "로그인")]</code><br>→ <code>class="login"</code> 속성을 가지면서<br>→ 텍스트(자식 노드 포함)에 <code>로그인</code>이 포함된 요소 선택<br>→ 결과: 텍스트 + class 조건을 모두 만족하는 요소만 선택</li>
</ul>


<h2 id="%25ec%2586%258d%25ec%2584%25b1%25ec%2597%2590-%25eb%258c%2580%25ed%2595%259c-%25ed%2585%258d%25ec%258a%25a4%25ed%258a%25b8-%25ed%258f%25ac%25ed%2595%25a8-%25ea%25b2%2580%25ec%2583%2589">속성에 대한 텍스트 포함 검색</h2>


<p>속성 텍스트 안에서도 부분 검색이 가능합니다:</p>



<pre><code>//input[contains(@placeholder, "이메일")]</code></pre>



<p>→ <code>placeholder</code> 속성에 <code>"이메일"</code>이 포함된 <code>input</code> 요소 선택.</p>


<h2 id="%25ea%25b3%25a0%25ea%25b8%2589-%25ed%258c%2581-%25eb%258c%2580%25ec%2586%258c%25eb%25ac%25b8%25ec%259e%2590-%25eb%25ac%25b4%25ec%258b%259c-%25eb%25a7%25a4%25ec%25b9%25ad">고급 팁 — 대소문자 무시 매칭</h2>


<p>원래 <code>contains()</code>는 대소문자 구분합니다. 대소문자 구분 없이 찾으려면 <code>translate()</code>, <code>normalize-space()</code> 등을 조합할 수 있습니다.</p>


<h2 id="%25ec%25a0%2595%25eb%25a6%25ac">정리</h2>


<ul>
<li><code>//tag[text()="..."]</code><br>→ 텍스트가 정확히 일치하는 요소 선택</li>



<li><code>//tag[contains(text(), "...")]</code><br>→ 텍스트에 특정 문자열이 부분 포함된 요소 선택</li>



<li><code>//*[contains(., "...")]</code><br>→ 자신과 자식 노드를 포함한 전체 텍스트에 문자열이 포함된 요소 선택</li>



<li><code>//@attr="value"</code><br>→ 속성값이 정확히 일치하는 속성 선택</li>



<li><code>//*[contains(@attr, "part")]</code><br>→ 속성값에 특정 문자열이 부분 포함된 요소 선택</li>
</ul>



<p>XPath는 한 번 익히면 광범위한 노드 선택 + 텍스트 기반 검색이 가능해서 유용합니다.</p>
</div></div>

웹으로 말하기

HTML(과 XML)에서 특정 요소를 찾을 때 CSS 선택자만으로 부족한 경우 XPath (XML Path Language)를 쓰곤 합니다. XPath는 HTML/XML 문서를 트리 형태로 보고 노드를 경로로 지정해 선택하는 언어입니다. 기본 경로 표현부터 텍스트 포함 검색까지 가능합니다. XPath 기본 구조 기본적으로 문서 구조를 따라 선택자를 씁니다. 기본적인 표현은 이렇습니다: 중간 생략시 사이에 //를 씁니다. → lang="en" 속성을 가진 […]

[메모] XPath 기본 문법

댓글