HTML DOM Location search 속성이란?
HTML DOM의 Location search 속성은 현재 페이지 URL에서 물음표(?) 뒤에 따라오는 쿼리 문자열(query string), 즉 쿼리 매개변수에 해당하는 문자열을 반환하거나 설정하는 속성입니다. 예를 들어 URL이 https://example.com/page?id=10&sort=asc라면, search 속성은 ?id=10&sort=asc를 반환합니다. 만약 URL에 쿼리 문자열이 존재하지 않으면 빈 문자열("")을 반환합니다.
문법(Syntax)
search 속성의 기본 문법은 다음과 같습니다.
- search 속성 값 가져오기
location.search- search 속성 값 설정하기
location.search = searchString예제(Example)
다음은 Location search 속성을 활용해 현재 URL의 쿼리 문자열을 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Location search</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Location-search</legend>
<label for="urlSelect">현재 URL:</label>
<input type="url" size="30" id="urlSelect" value="https://www.example.com:2544/aboutUs/CTO.htm?language=ko&page=2">
<input type="button" onclick="getSearch()" value="Get search value">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
function getSearch(){
divDisplay.textContent = 'URL search: '+location.search;
}
</script>
</body>
</html>
출력 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'Get search value' 버튼을 클릭하기 전 −
'Get search value' 버튼을 클릭한 후 −
