HTML DOM의 search 속성은 앵커 태그(<a>)와 함께 사용되며, href 속성 값에 포함된 쿼리 문자열(query string) 부분을 반환하거나 설정할 수 있습니다. 쿼리 문자열이란 URL에서 물음표(?) 뒤에 위치하는 부분으로, 주로 GET 방식 요청 시 서버에 정보를 전달하기 위해 사용됩니다. 이때 전달되는 데이터는 링크 안에 일반 텍스트(cleartext) 형태로 그대로 노출됩니다.
문법(Syntax)
1) search 속성 값 반환하기
anchorObject.search
2) search 속성 값 설정하기
anchorObject.search = querystring
예제
다음은 HTML DOM 앵커 search 속성을 활용한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" target="_blank"
href="https://www.examplesite.com/ex.htm?id=Username">Example Site</a></p>
<p>버튼을 클릭하면 위 웹사이트 링크의 쿼리 문자열 부분이 변경됩니다.</p>
<p>변경 사항을 확인하려면 버튼을 클릭하기 전후의 URL을 비교해 보세요.</p>
<button onclick="demo()">Change Search</button>
<script>
function demo() {
document.getElementById("myAnchor").search = "program=Sample";
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
버튼 클릭 전 − 링크는 다음과 같습니다.
www.examplesite.com/ex.htm?id=Username
"Change Search" 버튼 클릭 후 − 링크의 쿼리 문자열이 다음과 같이 변경됩니다.
www.examplesite.com/ex.htm?program=Sample
코드 설명
위 예제에서 수행한 작업을 단계별로 살펴보겠습니다.
먼저, id가 "myAnchor"인 앵커 태그를 생성하고, href 속성에 쿼리 문자열이 포함된 URL을 지정했습니다. 이 앵커 요소의 search 속성을 조작하면 검색 문자열 값을 자유롭게 설정하거나 반환할 수 있습니다.
<p><a id="myAnchor" target="_blank" href="https://www.examplesite.com/ex.htm?id=Username">Example Site</a></p>
그다음, 클릭 시 demo() 함수를 실행하는 "Change Search" 버튼을 만들었습니다.
<button onclick="demo()">Change Search</button>
demo() 함수는 기존 쿼리 문자열인 id=Username을 program=Sample로 변경하는 역할을 합니다.
function demo() {
document.getElementById("myAnchor").search = "program=Sample";
}
이처럼 search 속성을 활용하면 JavaScript만으로 링크의 쿼리 문자열을 동적으로 제어할 수 있어, 동적 URL 생성이나 추적 파라미터 삽입 등 다양한 상황에서 유용하게 사용됩니다.