# HTML 엘리먼트(태그/노드) 선택/취득 방법
브라우저 환경의 전역객체인 winodw의 documet객체에 정의된 메서드를 활용하여
HTML 노드를 선택하여 조작할 수 있다.
# documet.getElement...종류
1. id로 1개의 엘리먼트 선택
window.document.getElementById('아이디') => HTMLxxxElement 반환
*window 생략 가능
2. class로 여러개의 엘리먼트 선택
document.getElementsByClassName('클래스') => HTMLCollection(이터러블) 반환
3.태그명으로 여러개의 엘리먼트 선택
document.getElementsByTagName('태그') => HTMLCollection(이터러블) 반환
# document.querySelector... 종류
1. CSS선택자로 1개의 엘리먼트 선택
document.querySelector('CSS선택자') => HTMLxxxElement
2. CSS선택자로 여러개의 엘리먼트 선택
document.querySelectorAll('CSS선택자') => NodeList(이터러블)
# HTMLCollection, NodeList 주의 사항
HTMLCollection, NodeList 모두 선택된 HTMLxxxElement 객체를 순회할 수 있는 이터러블인데,
상태 변화를 체크하여 조작하기 어려운 부분이 있다.
그래서 배열로 변환(Array.from(), [...스프레드문법] 등 활용)한 다음,
각 HTML엘리먼트들을 조작하는게 안전하다.
# 샘플 예제 소스코드
위에서 정리한 HTML 엘리먼트 취득 방법을 모두 사용했으며,
HTMLCollection, NodeList 는 배열(Array)로 변환하여 사용했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="divId"></div>
<div class="divClass"></div>
<div class="divClass"></div>
<h2>h2 입니다</h2>
<h2>h2 입니다</h2>
<script>
// 1. document.getElementById('아이디') => HTMLxxxElement
const divById = document.getElementById('divId');
divById.innerHTML = "<h3>id로 접근했어요</h3>";
// 2. document.getElementsByClassName('클래스'); => HTMLCollection
const divByClass = document.getElementsByClassName('divClass');
[...divByClass].forEach(function(item, index, array){ // 배열로 변환하여 사용하는 것이 안전(스프레드 문법)
item.innerHTML = "<h3>class로 접근했어요</h3>";
})
// 3. document.getElementsByTagName('태그'); => HTMLCollection
const headerByTag = document.getElementsByTagName('h2');
Array.from(headerByTag).forEach((item)=>{ // 배열로 변환하여 사용하는 것이 안전.(Array.from()메서드)
item.innerHTML = "<h2>tag로 접근했어요</h2>";
});
// 4. document.querySelector('CSS선택자') => HTMLxxxElement
const divByQuery = document.querySelector('div:nth-of-type(2)');
divByQuery.style.color = 'hotpink';
// 5. document.querySelectorAll('CSS선택자') => NodeList
const headersByQuery = document.querySelectorAll('h2');
Array.from(headersByQuery).forEach((value)=>{
value.style.backgroundColor = 'skyblue';
});
</script>
</body>
</html>
<실행 결과>
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| [자바스크립트] HTML엘리먼트 생성, 추가, 삭제, 속성/텍스트/내부html 설정 방법 (0) | 2021.07.07 |
|---|---|
| [node.js] Socket.IO 웹 소켓 모듈 기본 사용 방법 (1) | 2021.07.06 |
| Node.js: Web Socket 통신 - ws모듈 사용 방법 (0) | 2021.07.02 |
| Javascript: URI, URL, QueryString과 인코딩/디코딩 정리 (0) | 2021.07.02 |
| Node.js: NPM 명령어 정리, package.json(+scripts) 생성 및 사용 방법 (0) | 2021.07.01 |
댓글