목차
- 요소 검색 메소드
1-1. document.getElementById(id)
1-2. getElementById(id) 사용 예시 버튼 클릭 시마다 색상 변경
1-3. document.getElementsByTagName(태그명) querySelector(선택자)로 대체
1-4. document.getElementsByClassName(클래스명) querySelector(선택자)로 대체
1-5. document.getElementsByName(name) querySelector(선택자)로 대체 - 요소 검색 메소드
2-1. document.querySelector(선택자)/querySelectorAll(선택자)
2-2. element.querySelector(선택자)/querySelectorAll(선택자) - 요소 검색 메소드
3-1. element.closest(선택자)
3-2. element.matches(선택자) - 메소드별 반환값 차이
4-1. HTMLCollection
4-2. NodeList
4-3. 요소 검색 메소드별 반환값 비교
1. 요소 검색 메소드
| document .getElementById("아이디명") |
id 속성값 통해 태그 요소 객체의 정보를 호출 |
| document/element .getElementsByTagName("태그명") |
태그명 통해 해당 태그들의 객체 정보를 컬렉션에 담아 호출 |
| document/element .getElementsByClassName("클래스명") |
클래스명 통해 해당 태그들의 객체 정보를 컬렉션에 담아 호출 |
| document .getElementsByName("이름") |
name 속성값 통해 태그들의 객체 정보를 컬렉션에 담아 호출 |
getElementById(id) 외에는 querySelector(선택자)/querySelectorAll(선택자) 메소드로 대체되는 추세이다.
1-1. document.getElementById(id)
<body>
<div id="area1" class="area">
div 영역
<p id="area2">p 영역</p>
</div>
<!--
<div id="area1" class="area"></div>
-->
</body>id="area1"을 가진 요소가 두 개 존재할 때, 해당 id값을 가지고 style 지정이 일어난다면 첫 번째 요소에 대해서만 반영되고두 번째 요소에 대해서는 무시된다.
- 요소에 id 속성이 존재하는 경우 부모, 자식, 형제 등 상대적 위치에 상관 없이 이 메소드 통해 접근 가능하다.
- 문서 내의 id 속성값은 고유값으로서 중복될 수 없으며, 중복이 있다면 이 메소드 동작에도 오류를 낳는다.
<body>
<script>
// 요소 접근
let elem = document.getElementById('area1');
// 요소의 스타일 속성을 이용하여 배경색 변경
elem.style.backgroundColor = 'skyblue';
// let area2 = 10;
// area2.style.backgroundColor = 'blue';
</script>
</body>id 통해 속성을 지정하면 실제로 반영되기는 한다: area2.style....;
하지만 적용된 뒤 같은 이름의 변수라도 생겨나면 해당 변수를 대상으로 읽어 오류로 이어진다: let area2 = 10;
따라서 직접 id값을 대고 접근하는 방식은 지양하고, 요소 접근 방식으로 다가가야 한다:id.style....;
- id 속성값을 그대로 딴 전역변수 통한 접근도 가능은 하지만, 해당 id값과 동일한 이름의 변수가 생기면 이름 충돌 가능성이 있어 해당 요소가 아니라 변수가 먼저 읽히는 상황으로 이어질 수 있으므로 지양하는 것이 좋다.
- 따라서 id는 고유값으로 남겨놓고, 접근할 때는 요소 접근 방식으로 이 메소드를 활용하도록 한다.
1-2. getElementById(id) 사용 예시 버튼 클릭 시마다 색상 변경
<body>
<div id="area3" class="area"></div>
<button onclick="accessId();">클릭할 때마다 색상 변경</button>
<script>
function accessId() {
let area3 = document.getElementById('area3');
let bgColor = area3.style.backgroundColor;
console.log(bgColor);
if(bgColor == 'red') {
area3.style.backgroundColor = 'yellow';
} else {
area3.style.backgroundColor = 'red';
}
}
</script>
</body>1-3. document.getElementsByTagName(태그명) querySelector(선택자)로 대체
<body>
<ol>
<li><a href="#">목록1</a></li>
<li><a href="#">목록2</a></li>
<li><a href="#">목록3</a></li>
<li><a href="#">목록4</a></li>
<li><a href="#">목록5</a></li>
</ol>
<button onclick="accessTagName();">태그명으로 접근</button>
<script>
function accessTagName() {
let links = document.getElementsByTagName("a");
console.log("전달 받은 a 태그의 개수 : " + links.length); //5... 클릭해야 콘솔창에 결과뜸
let changeColor = 50;
for(let i=0; i < links.length; i++) {
console.log(links[i]);
links[i].style.backgroundColor = "rgb(130, 220," + changeColor + ")";
changeColor += 50; //반복문 돌면서 blue 컬러가 조금씩 바뀔 것
}
}
</script>
</body>- 주어진 태그에 해당하는 요소들의 컬렉션을 반환한다.
- 예시에서는 반복문을 돌며 blue 컬러가 조금씩 바뀌도록 그라데이션 적용한다.
1-4. document.getElementsByClassName(클래스명) querySelector(선택자)로 대체
<body>
<script>
console.log(document.getElementsByClassName("area")); //HTMLCollection 형태로 출력됨
</script>
</body>- 주어진 클래스명에 해당하는 요소들의 컬렉션을 반환한다.
- 결과는 HTMLCollection 형태로 나온다.
1-5. document.getElementsByName(name) querySelector(선택자)로 대체
<body>
<form>
<fieldset>
<legend>취미</legend>
<table>
<tr>
<td>
<input type="checkbox" name="hobby" value="game" id="game">
<label for="game">game</label>
</td>
<td>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">music</label>
</td>
<td>
<input type="checkbox" name="hobby" value="movie" id="movie">
<label for="movie">movie</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="hobby" value="book" id="book">
<label for="book">book</label>
</td>
<td>
<input type="checkbox" name="hobby" value="travel" id="travel">
<label for="travel">travel</label>
</td>
<td>
<input type="checkbox" name="hobby" value="exercise" id="exercise">
<label for="exercise">exercise</label>
</td>
</tr>
</table>
</fieldset>
</form>
<button onclick="accessName();">name으로 접근</button>
<script>
function accessName() {
let hobby = document.getElementsByName("hobby");
console.log(hobby);
let checkItem = "";
hobby.forEach(function(item) { //NodeList의 요소들이 반복돼 하나씩 출력됨
console.log(item);
if(item.checked) {
checkItem += item.value + "선택함\n"; //앞에서 설정한 value속성 travel... game...
}
});
alert(checkItem);
}
</script>
</body>- 주어진 name 속성값에 해당하는 요소들의 컬렉션이 반환된다.
2. 요소 검색 메소드
| document .querySelector("선택자") |
선택자와 일치하는 문서 내 첫 번째 요소 반환 |
| document .querySelectorAll("선택자") |
선택자와 일치하는 문서 내 모든 요소 반환 |
| element .querySelector("선택자") |
선택자와 일치하는 요소 내 첫 번째 요소를 반환 |
| element .querySelectorAll("선택자") |
선택자와 일치하는 요소 내 모든 요소를 반환 |
2-1. document.querySelector(선택자)/querySelectorAll(선택자)
<body>
<div class="test">
<h1>first</h1>
</div>
<div class="test">
<h1>second</h1>
</div>
<script>
let myDiv = document.querySelector(".test");
console.log(myDiv); //first
let myDivs = document.querySelectorAll(".test");
console.log(myDivs); //NodeList -- 0번 인덱스 first, 1번 인덱스 second
myDivs[0].style.color = 'red';
myDivs[1].style.color = 'green';
</script>
</body>- document.querySelector(선택자)는 문서 내 첫 번째 요소를 반환한다.
- document.querySelectorAll(선택자)의 경우 문서 내 일치하는 모든 요소를 NodeList 형태로 내놓는다: [0] first, [1] second
2-2. element.querySelector(선택자)/querySelectorAll(선택자)
<body>
<div class="first">
<div class="second">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
</div>
<script>
let first = document.querySelector(".first");
let myLi = first.querySelector(".second li:nth-child(3)"); //test3
let myLis = first.querySelectorAll("li"); //NodeList(4)
console.log(myLi);
console.log(myLis);
myLi.style.color = 'red';
myLis[0].style.backgroundColor = 'gray';
</script>
</body>- 요소 내 요소를 탐색한다.
- 조회할 요소를 하나의 변수에 담는다. 이때 역시 문서 내 요소 검색 메소드를 활용할 수 있다: document.querySelector(".first");
- 생성한 변수 토대로 n번째 요소는 무엇인지, 해당되는 전체 요소는 무엇인지 등등 요소 내 요소 검색이 가능하다.
- 나아가 조회한 대상으로 속성 지정 역시 가능하다. 특히 전체 요소 검색 시에는 유사 배열인 NodeList 형태로 반환되므로 이것의 인덱스를 활용할 수도 있다.
3. 요소 검색 메소드
| element .closest("선택자") |
자신 포함 선택자와 일치하는 가장 가까운 조상 요소 반환 |
| element .matches("선택자") |
요소가 선택자와 일치하는지 여부 반환 |
3-1. element.closest(선택자)
<body>
<div class="area">
<ul class="korean-food">
<li class="menu">김치</li>
<li class="menu">김치전</li>
<li class="menu">김치찌개</li>
</ul>
</div>
<script>
let menu = document.querySelector('.menu'); //김치
console.log(menu.closest('.korean-food')); //ul태그
console.log(menu.closest('.area')); //area
</script>
</body>- 자기자신 포함해 일치하는 가장 가까운 조상 요소를 반환하는 메소드이다.
- 예시에서처럼 고스란히 자기자신을 가리키곤 한다.
console.log(menu.closest('h3')); //null- 같은 <script> 내에서 위처럼 작성한 경우는 결과값으로 null이 나온다.
- 해당 <li> 요소가 조상으로 갖는
<h3> 태그가 존재하지 않기 때문이다. - 클래스명 .area를 가진 <div> 태그의 조상은 <body>로 거슬러 올라간다.
3-2. element.matches(선택자)
<body>
<script>
for(let elem of document.body.children) {
if(elem.matches('.area')) {
console.log(elem);
}
}
</script>
</body>- 문서 내 <body> 태그에 속한 자식 요소들 중에서(document.body.children), 선택자와 일치하는 요소들을 찾는다.
- children을 검색함에 따라 결과값은 HTMLCollection 형태로 출력된다.
4. 메소드별 반환값 차이
❗ HTMLCollection과 NodeList는 문서 내 노드들을 가지고 있는 컬렉션이자 유사 배열이다.
HTMLCollection은forEach()와 같이 편리한 메소드들을 제공하지 못한다. 따라서 일반 for문 통해 각 요소에 접근할 수 있다. 반면 NodeList는 forEach() 메소드 사용이 가능하다.
단, HTMLCollection과 NodeList는 유사 배열이므로 배열 메소드를 직접 쓰기 위해서는 Array.from() 메소드 통해 배열로 바꾸는 절차가 필요하다.
4-1. HTMLCollection
보다 자세한 설명은 사이트 참조: MDN Web Docs - HTMLCollection
// HTMLCollection은 forEach 사용 불가
// test4.forEach(item => console.log(item));- HTMLCollection은 일반 for문 통한 출력만 가능하며,
forEach() 메소드사용 불가하다. 정의돼 있지 않아 오류라는 메시지가 뜬다: Uncaught TypeError: test4.forEach is not a function
4-2. NodeList
보다 자세한 설명은 사이트 참조: MDN Web Docs - NodeList
// NodeList는 forEach 사용 가능
test6.forEach(item => console.log(item)); //요소들이 하나씩 출력되는 모습- NodeList는 forEach() 메소드 사용 가능하다. 요소들이 하나씩 출력되는 모습을 확인할 수 있다.
// Array.from()으로 배열로 변환하면 배열 메소드 사용 가능
console.log(Array.from(test6).indexOf(test6[0])); //0... 정상실행
console.log(Array.from(test6).indexOf(travel)); //(값)을 넣어야 함. "", ''으로 감싸면 인식 못함- 배열 메소드 직접 사용을 위해서는 Array.from() 통해 배열로 변환하는 절차가 요구된다.
4-3. 요소 검색 메소드별 반환값 비교
<body>
<script>
// Element 1개
let test1 = document.getElementById('area1'); //id값 전달해 하나의 요소, 단일값을 전달 받음
// Element 1개
let test2 = document.querySelector("#area1");
/* 위에 단일값 test1.style 처럼 접근할 거고, 아래 복수값들은 test1[0].style로 접근할 것
MDN Web Docs에서 NodeList, HTMLCollection 검색해 참고해볼 것
NodeList는 forEach() 포함해 제공하는 메소드가 상대적으로 많음
HTMLCollection 메소드가 두 개뿐이고 forEach() 쓸 수 없음
또, 이 둘은 유사배열로 array가 아니라는 공통점은 있음
NodeList는 Array.from()을 사용하여 array로 만들 수도 있음*/
// NodeList
let test3 = document.querySelectorAll(".area");
// HTMLCollection
let test4 = document.getElementsByTagName("a");
// HTMLCollection
let test5 = document.getElementsByClassName("area");
// NodeList
let test6 = document.getElementsByName("hobby");
</script>
</body>'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] 문서 수정 | 노드 메소드 | insertAdjacentHTML | classList (0) | 2022.02.22 |
|---|---|
| [JavaScript] 주요 노드 프로퍼티 | innerHTML | textContent | value (0) | 2022.02.21 |
| [JavaScript] DOM | 요소 노드 | 텍스트 노드 | 문서 객체 (1) | 2022.02.20 |
| [JavaScript] 숫자 | 문자 | 날짜 | 객체 메소드 (0) | 2022.02.20 |
| [JavaScript] 객체 | for in | 메소드 | 객체 배열 | filter (0) | 2022.02.19 |
