⭐식별 키의 id와 class 그리고 name
id 보다는 class 를 사용하자 그 이유는?
id class name
| id | class | name |
| 하나만 있을 수 있다 <페이지에서 유일함> | 똑같은게 여러번 나올수도있고 값을 여러개를 가질수있다 | 똑같은게 여러번 나올수도있고 값을 여러개를 가질수있다 |
| CSS에서 식별자로 사용 #아이디로 사용 | CSS에서 식별자로 사용 .클래스명 으로 사용 | CSS에서 사용 불가 |
| jQuery : $(”#아이디”) | jQuery : $(”.클래스명”) | jQuery : $(”input[name = 이름]”) |
⭐CSS Selector
Document.querySelector()
- Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 [Element]를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
Document.querySelector(문자열)
- (문자열) → css문법을 사용 : button , #id , .btn(클래스이름)
querySelectorAll( ) → 배열로 나옴
⭐검색 조건 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="type">
<option value="t">제목</option>
<option value="tc">제목내용</option>
<option value="tcw">제목내용작성자</option>
</select>
<button class="btn">TEST</button>
<script>
const btn = document.querySelector(".btn")
btn.addEventListener("click" ,function(){
console.log("CLICKED")
},false)
</script>
</body>
</html>실행해보자
TEST를 누르면 console창에 CLICKED 가 찍힌다
select name 찾기
<select name="type">
<option value="t">제목</option>
<option value="tc">제목내용</option>
<option value="tcw">제목내용작성자</option>
</select>
<button class="btn">TEST</button>
<script>
const btn = document.querySelector(".btn")
const selectType = document.querySelector("select[name = 'type']")
btn.addEventListener("click" ,function(){
console.log("CLICKED")
console.log(selectType)
},false)
</script>document.querySelector("select [name = 'type']") 이름을 찾고 있다
확인해보기
TEST를 누르면 name 태그가 나온다
selectType value 값 구하기
<select name="type">
<option value="t">제목</option>
<option value="tc">제목내용</option>
<option value="tcw">제목내용작성자</option>
</select>
<button class="btn">TEST</button>
<script>
const btn = document.querySelector(".btn")
const selectType = document.querySelector("select[name = 'type']")
btn.addEventListener("click" ,function(){
console.log("CLICKED")
console.log(selectType)
console.log(selectType.value)
},false)
</script>console.log(selectType.value)으로 확인해 볼 수 있다
keyword 가져오기
<select name="type">
<option value="t">제목</option>
<option value="tc">제목내용</option>
<option value="tcw">제목내용작성자</option>
</select>
<input type="text" name="keyword" value="홍길동">
<button class="btn">TEST</button>
<script>
const btn = document.querySelector(".btn")
const selectType = document.querySelector("select[name = 'type']")
const inputText = document.querySelector("input[name = 'keyword']")
btn.addEventListener("click" ,function(){
console.log("CLICKED")
console.log(selectType.value)
console.log(inputText.value)
},false)
</script>확인해보기
⭐복합적인 페이지 이동 구현하기
<body>
<select name="type">
<option value="">----</option>
<option value="t">제목</option>
<option value="tc">제목내용</option>
<option value="tcw">제목내용작성자</option>
</select>
<input type="text" name="keyword" value="홍길동">
<button class="btn">TEST</button>
<form class = "actionForm" action="" method="get">
<input type="hidden" name="page" value="10">
<input type="hidden" name="size" value="10">
<input type="hidden" name="type" value="">
<input type="hidden" name="keyword" value="">
</form>
<script>
const btn = document.querySelector(".btn")
const selectType = document.querySelector("select[name = 'type']")
const inputText = document.querySelector("input[name = 'keyword']")
const actionForm = document.querySelector(".actionForm")
btn.addEventListener("click" ,function(){
console.log("CLICKED")
console.log(selectType.value)
console.log(inputText.value)
actionForm.action = "/board/list"
actionForm.querySelector("input[name = 'type']").value = selectType.value
actionForm.querySelector("input[name = 'keyword']").value = inputText.value
actionForm.querySelector("input[name = 'page']").value = 1
},false)
</script>
</body>
- 기존 게시판에 적용하려면 :<input type="hidden" name="page" value="${listDTO.page}">
- 검색을 하면 항상 1 page로 가게 하기 위해 : actionForm.querySelector("input [name = 'page']"). value = 1
확인해보기
Form 전송 < actionForm.submit() >
console.log("CLICKED")
console.log(selectType.value)
console.log(inputText.value)
actionForm.action = "/board/list"
actionForm.querySelector("input[name = 'type']").value = selectType.value
actionForm.querySelector("input[name = 'keyword']").value = inputText.value
actionForm.querySelector("input[name = 'page']").value = 1
actionForm.submit()
'JavaScript' 카테고리의 다른 글
| JavaScript 이벤트 (0) | 2022.04.25 |
|---|---|
| JavaScript preventDefault() , target (0) | 2022.04.24 |
| ⭐ JavaScript 버블링 , 캡쳐링 (0) | 2022.04.24 |
| 객체야 어디 있니~ 객체 검색 방법 (0) | 2022.04.24 |
| JavaScript를 이해해 보자 (0) | 2022.04.23 |