🌳 예시 html 코드
아래는 이 글에서 사용될 전체 html 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content">
<h2 class="title">Cat-1</h2>
<ul id="list-1">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
</ul>
<h2 class="title">Cat-2</h2>
<ul id="list-2">
<li>Sphynx</li>
<li>Munchkin</li>
<li>Persian</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
🌳 태그 선택 메서드
1) getElementById('id_명칭')
- document.getElementById('id_명칭')
- html의 id 속성을 이용하여 해당 id를 가진 태그를 반환
- 선택된 태그 안에 다른 태그가 있다면 함께 선택됨
- id라고 명시했기 때문에 '#'을 작성할 필요 없음
- 코드 예시
const myId = document.getElementById('list-1');
console.log(myId);- 콘솔창 출력 내용
2) getElementsByClassName('class_명칭')
- document.getElementsByClassName('class_명칭')
- html의 class 속성을 이용하여 해당 class에 속한 태그 전체를 HTMLCollection으로 반환
- class라고 명시했기 때문에 '.'을 작성할 필요 없음
- 코드 예시
const myClass = document.getElementsByClassName('title');
console.log(myClass);- 콘솔창 출력 내용
3) getElementsByTagName('tag_종류')
- (잘 쓰이지 않음)
- document.getElementsByTagName('tag_종류')
- html의 tag를 이용하여 해당 tag를 가진 태그들을 HTMLCollection으로 반환
- 코드 예시
const myTag = document.getElementsByTagName('button');
console.log(myTag);- 콘솔창 출력 내용
id는 html 파일에서 유일하게 존재하는 명칭을 쓰기 때문에 'Element'라고 쓰지만,
class나 tag는 여러 요소가 존재할 수 있기 때문에 Element 뒤에 s를 붙여 'Elements'라고 써주어야 합니다.
4) querySelector('css_선택자')
- document.querySelector('css_선택자')
- css의 선택자를 이용하여 한 개의 태그만 선택
- 해당 선택자를 가진 태그 중 가장 첫 번째 태그만 반환
- 코드 예시
const mySelector = document.querySelector(".title");
console.log(mySelector);- 콘솔창 출력 내용
class="title"의 두 번째 태그인 <h2 class="title">Cat-2</h2>는 출력되지 않음
5) querySelectorAll('css_선택자')
- document.querySelectorAll('css_선택자')
- css의 선택자를 이용하여 여러 개의 태그를 선택
- 해당 선택자를 가진 태그들을 NodeList로 반환
- 코드 예시
const mySelector = document.querySelectorAll(".title");
console.log(mySelector);- 콘솔창 출력 내용
querySelector과 querySelectorAll 프로퍼티는 선택자를 활용하기 때문에 명칭 앞에 #(id) 또는 .(class)을 꼭 붙여주어야 합니다.
🌳 요소 노드 프로퍼티
1) innerHTML
- (잘 쓰이지 않음)
- 원하는_element.innerHTML
- 원하는 요소 노드가 감싸고 있는 내부의 html 코드를 문자열(줄바꿈 및 들여쓰기 포함)로 반환
- 요소 안의 정보를 확인하거나
- '='으로 값을 할당하여 기존 값을 새로운 값으로 완전히 교체할 때 활용
- 코드 예시
const myTag = document.querySelector('#list-1');
console.log(myTag.innerHTML);- 콘솔창 출력 내용
innerHTML 사용 시 주의할 점입니다.
2) outerHTML
- 원하는_element.outerHTML
- 원하는 요소 노드를 포함한 내부의 html 코드를 문자열(줄바꿈 및 들여쓰기 포함)로 반환
- 요소 안의 정보를 확인하거나
- '='으로 값을 할당하여 기존 값을 새로운 값으로 완전히 교체할 때 활용
- 코드 예시
const myTag = document.querySelector('#list-1');
console.log(myTag.outerHTML);- 콘솔창 출력 내용
3) textContent
- 원하는_element.textContent
- 원하는 요소 노드 내부의 코드를 html 태그를 제외한 문자열(줄바꿈 및 들여쓰기 포함)로 반환
- '='으로 값을 할당하여 기존 값을 새로운 값으로 완전히 교체할 때 활용
- 단순 텍스트만 다루기 때문에 태그를 입력해도 그냥 특수문자('<' =꺽쇠)로 인식함
- 코드 예시
const myTag = document.querySelector('#list-1');
console.log(myTag.textContent);- 콘솔창 출력 내용
🌳 활용 예시 - 객체 추가하기
예를 들어 자바스크립트로 html 파일의 리스트에 새로운 객체를 추가하고 싶다면 아래와 같이 작성하면 됩니다.
- querySelector로 리스트를 선택
- createElement로 새로운 li 요소 생성
- textContent로 li 태그 안에 새로운 내용을 할당
- append()로 리스트의 마지막에 해당 요소를 추가
const toDoList = document.querySelector("#list-1");
function addNewTodo(text) {
const last = document.createElement("li");
last.textContent = text;
toDoList.append(last);
}
addNewTodo("Russian Blue");
결과 화면은 다음과 같습니다.
새로운 값인 "Russian Blue"가 첫 번째 리스트의 마지막 항목으로 추가된 것을 볼 수 있습니다.
읽어주셔서 감사합니다:)
