✔ id / class
id: 고유한 이름을 붙일 때 사용
class: 반복되는 영역을 유형별로 분류할 때 사용, 하나의 태그에 class를 여러개 작성해주고 싶을 땐 하나의 문자열 안에서 띄어쓰기로 구분한다.
<input id="id-input" class="input focus" type="text" placeholder="ID"></input><!DOCTYPE html>
<!-- <div id ="writing-section"> => selector: div#writing=secrtion -->
<!-- <li class ="comment"> => selector: li.comment -->
<!-- ex) 뉴스 댓글 란 -->
<!-- 쓰기영역 id붙여주기(seletor 사용) -->
<div id="writing-section"></div>
<div></div>
<input type="" id="new-comment-content">
<button><div id="register"></div>
<!-- 읽기영역 id붙여주기(seletor 사용) -->
<ul id="comments"> <!-- 읽기 영역 자체는 고유하므로 id로 이름을 붙임 -->
<li class="comment"> <!-- 반복되는 항목들은 id 가 아닌 class로 지정한다. 같은 class값을 지정해줌으로서, 동일한 유형임을 알 수 있다.-->
<div class="username"></div>
<div class="content"></div>
<span class="createAt"></span>
<button class="voteUp"></button>
<button class="voteDown"></button>
</li>
</ul>✔ 조회 API
element를 조회하는 기능으로, document.getElementsBy* 메소드를 사용하여 element를 조회하며, document 객체는 문서 전체를 의미하기때문에 문서 전체를 대상으로 element를 조회한다.
| 메소드 | 설명 |
|---|---|
| document.getElementsByTagName | 문서 내 특정 태그에 해당되는 element 조회 |
| document.getElementsByClassName | 문서 내 특정 class 속성 값에 해당하는 element 조회 |
| document.getElementById | 문서 내 특정 id 속성 값에 해당하는 element 조회(id값은 중복되지 않으므로 s가 붙지 않는다.) |
//document.getElementsByClassName()
//해당 class 이름을 가진 모든 요소에 접근하여 정보를 취득 한 후, 해당 요소에 입력된 문자열을 변경할 수 있는 코드.
document.getElementsByClassName('class name')[0].textContent = "변경된 텍스트.";Reference: 코드스테이츠
