판봉 개발 일기
[02]Browser[document] - javascript 본문
Selector
이번에는 browser의 selector 즉 선택자에 대해서 알아볼겁니다.
저번시간에 배웠던 것을 이용하면 가까기에 붙어있는 요소들만 접근 할 수 있었습니다.
하지만 언제나 그렇지는 않습니다.
웹 페이지 내에서 원하는 요소 노드에 대해 바로 접근하는 방법이 있습니다.
바로 getElemenet와 querySelector입니다.
<html>
<body>
<div id="elem">
<div id="elem-content">Element</div>
</div>
<script>
// 요소 얻기
// document.getElementById('id값');
// 해당 id를 가지는 요소를 선택함
// 변수에 대입 -> 해당 요소의 자바스크립트 이름을 짓는다고 생각
let elem = document.getElementById("elem");
console.log(elem);
elem.style.background = "red";
// document.getElementById("elem").style.background = 'red'; // 일반적인 엘리먼트의 속성들은 자동완성이 됨
</script>
</body>
</html>요소에 id 속성이 있다면 위치에 상관없이 저 메서드를 이용하여 접근 할 수 있습니다.
하지만 선생님께선 저것 말고 두번째로 말씀드린 querySelector를 이용하라고 하십니다.
querySelector에는 크게 2가지가 있습니다.
바로 말 그대로 "querySelector"와 "querySelectorAll"이죠
이 두가지의 차이점은 단어에서 유추할수 있듯이 여러분들이 생각하시는 그게 맞습니다.
👇👇(참고 코드)(접었다가 펼수있음)
<html>
<body>
<div>영역</div>
<div>영역2</div>
<ul id="list">
<li>1-1</li>
<li>1-2</li>
</ul>
<ul>
<li class="item">2-1</li>
<li class="item">2-2</li>
</ul>
<ol>
<li>3-1</li>
<li>3-2</li>
</ol>
<input type="text"> <!--입력박스-->
<input type="checkbox"><!--체크박스-->
<script>
// let obj = {
// name: "john",
// phone: {
// home: "02---",
// org:"032",
// }
// }
// obj.phone
// 상위요소.querySelector("CSS선택자"); // 첫번째를 선택
// 상위요소.querySelectorAll("CSS선택자") // 여러개를 선택
// document에 하위 요소중 태그가 'div'인 요소를 선택
// 해당 요소중 첫번째 요소를 선택
const div = document.querySelector("div");
// console.log(div);
// document에 하위 요소중 태그가 'div'인 요소를 모두 선택
const divList = document.querySelectorAll("div");
// console.log(divList)
/*-------------같은 요소들을 선택함------------------------*/
// id가 list인 요소의 li태그 자식들
const liList1=document.querySelector("#list>li");
console.log(liList1);
// #id선택자
const ul = document.querySelector("#list");
// console.log(ul);
// 요소(document외에도 올 수 있음).querySelector
const liList2 = ul.querySelectorAll("li");
console.log(liList2);
/*-----------------------------------------------------*/
// class선택자
const liList = document.querySelectorAll(".item")
// console.log(liList);
// 후손/자손 선택자
const olLiList = document.querySelectorAll("ol>li");
// console.log(olLiList);
// pseudo class(의사 클래스)
const liFirst = document.querySelectorAll("ol>li:first-child");
// console.log(liFirst);
// // pseudo element(의사요소) 방법이 코드를 짜야해서 이거는 나중에 합시당 어려움
// const before = liFirst.querySelector("::before");
// console.log(before);
// 속성선택자(attribute selector)
// 태그[속성명=속성값] -> 해당 태그에 해당 속성이 있는 요소를 선택
const text = document.querySelector('input[type="text"]');
const chk = document.querySelector('input[type="checkbox"]');
console.log(text);
console.log(chk);
</script>
</li>
</body>
</html>
그리고 CSS에서 했던것과 마찬가지로 자식태그나 후손 태그들을 사용할 수도있죠
그리고 클래스 선택자, 의사 클래스 도 있습니다.
그리고 좀 특이한 것으로 속성선택자(attribute selector)가 있는데
이것은 태그[속성명=속성값]으로 찾습니다.
예제
만약에 이런 문제가 있따면 어떻게 풀까요?
https://ko.javascript.info/task/find-elements/table.html
https://ko.javascript.info/task/find-elements/table.html
ko.javascript.info
해당 링크를 올려드렸으니 개발자 툴에서 확인하여 코드를 작성해보세요
참고로 저는 마지막 쪽에서 막혔었는데 정답을 보니까 뭔가 허탈하더라구요
정답은 밑에 있습니다.(참고로 querySelector만 써야합니다!)
👇👇👇👇👇👇👇😁😁😁👇👇👇
.
<html>
<body>
<form name="search">
<label
>Search the site:
<input type="text" name="search" />
</label>
<input type="submit" value="Search!" />
</form>
<hr />
<form name="search-person">
Search the visitors:
<table id="age-table">
<tr>
<td>Age:</td>
<td id="age-list">
<label>
<input type="radio" name="age" value="young" />less than 18</label
>
<label>
<input type="radio" name="age" value="mature" />18-50</label
>
<label>
<input type="radio" name="age" value="senior" />more than
50</label
>
</td>
</tr>
<tr>
<td>Additionally:</td>
<td>
<input type="text" name="info[0]" />
<input type="text" name="info[1]" />
<input type="text" name="info[2]" />
</td>
</tr>
</table>
<input type="submit" value="Search!" />
</form>
<script>
// id = "age-table"인 테이블 찾기
const table = document.querySelector("#age-table");
console.log(table);
// 테이블 내의 label 요소 모두 (총 3개)
const label = table.querySelectorAll("label");
console.log(label);
// 테이블 내의 첫번째 td(Age가 적힌곳)
const td = table.querySelector("td");
console.log(td);
// name="search"인 form 선택
const form = document.querySelector(`form[name="search"]`);
console.log(form);
// 폼의 첫번째 input
// 2개의 폼을 선택
const forms = document.querySelectorAll("form");
console.log(forms);
// 첫번째 input만 배열에 넣음
const firstInputs = [];
for (let form of forms) {
firstInputs.push(form.querySelector("input"));
}
console.log(firstInputs);
// 폼의 마지막 input
const lastInputs = [];
for (let form of forms) {
// 각 폼에 있는 전체 input 목록
const inputs = form.querySelectorAll("input");
// 거기서 마지막 것만
lastInputs.push(inputs[inputs.length - 1]);
}
console.log(lastInputs);
</script>
</body>
</html>
이번 시간까지 browser에서 javascript로 특정 요소에 선택을 바로 하는법을 배웠습니다.
다음시간에는 dom의 노드에 대해서 알아보겠습니다.
'JAVA 웹개발 과정' 카테고리의 다른 글
| [04]Browser[document] - javascript (0) | 2021.08.12 |
|---|---|
| [03]Browser[document] - javascript (0) | 2021.08.12 |
| [01]Browser[document] - javascript (0) | 2021.08.12 |
| javascript-array-method2[0810] (0) | 2021.08.10 |
| Javascript(js)-Array(배열)에 대하여 [ 0809] (0) | 2021.08.09 |
