[Javascript] selector - like 검색

// 단건 조회
document.querySelector("input[name=param_1]");

// StartsWith: param으로 시작하는 input
document.querySelectorAll("input[name^=param]")

// Contains: aram을 포함하는 input
document.querySelectorAll("input[name*=aram]")

// EndsWith: Param으로 끝나는 input
document.querySelectorAll("input[name$=Param]")

// 번외1. param 또는 Param을 포함하는 input
document.querySelectorAll("input[name*=param],input[name*=Param]")

// 번외2. 대소문자 구분없이 param을 포함하는 input
document.querySelectorAll("input[name*=param i]")

 

우선 아래와 같이 페이지가 구성되어있다고 가정합니다.

모두 10개의 input으로 구성되어 있고, 5개는 앞부분이 param으로 시작하고 나머지 5개는 뒤에 Param으로 끝나는 Element입니다.

 

우선 Element를 추출하기 위해 아래의 두 function을 사용할 예정입니다.

// 단건 추출 document.querySelector("지정자"); // 다건 추출 document.querySelectorAll("지정자");

---

  equals

 input의 name이 동일한 input을 추출하려는 경우 아래와 같이 추출 가능합니다.

// param_1의 값을 추출하는 경우 document.querySelector("input[name=param_1]").value

---

  startsWith

 name이 param으로 시작하는 input을 추출하려는 경우 등호(=) 앞에 ^ 특수문자를 사용해주면 됩니다.

// param으로 시작하는 모든 input값을 추출하는 경우 document.querySelectorAll("input[name^=param]")

 

---

  contains

 name이 aram을 포함하는 input을 추출하녀는 경우 등호(=) 앞에 * 특수문자를 사용해주면 됩니다.

※ 현재 예시는 대소문자를 구분하기 때문에 param으로 하는 경우 앞의 5개, Param으로 하는 경우 뒤의 5개가 추출됩니다.

// aram을 포함하는 모든 input값을 추출하는 경우 document.querySelectorAll("input[name*=aram]")

---

 만약 param과 Param 모두를 포함하는 input을 추출하고 싶다면 아래와 같은 방법이 있습니다.

 

  AND 사용법

document.querySelectorAll("input[name*=param],input[name*=Param]")

  대소문자 구분 무시

 값 뒤에 옵션값 i를 추가해주면 대소문자를 무시하고 추출하게 됩니다.

document.querySelectorAll("input[name*=param i]")

---

  endsWith

 name이 Param으로 끝나는 input을 추출하려는 경우 등호(=) 앞에 $ 특수문자를 사용해주면 됩니다.

// param으로 끝나는 모든 input값을 추출하는 경우 document.querySelectorAll("input[name$=Param]")