요소 찾고 선택하기
먼저 다음 코드를 작성해줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="today=info">
<div class="date" id="date">
02.10.금요일
</div>
<div class="clock" id="clock">
15:03
</div>
<script src="src/index.js"></script>
</body>
</html>위 코드의 브라우저 실행화면입니다.
document.getElementById(id)
특정 요소를 찾을 때에는, 가장 먼서 문서노드 document에 접근해야하기 때문에, document를 작성해줍니다.
getElementById는 말 그대로 특정 요소를 id값으로 가져온다는 의미이고, 실제로 특정 요소객체를 반환합니다.
console.log(document.getElementById("date"));실제로 id값이 date인 요소가 반환된 것을 볼 수 있습니다.
만약 동일한 id를 갖고 있는 요소가 여러개인 경우, 가장 위에 있는 첫 번째 요소만 반환하는 API입니다.
dcoument.querySelector(cssSelector)
querySelector는 요소의 id값이 아닌, css선택자로 요소 노드를 반환하는 API입니다.
div라는 태그로 감싸져있는 요소들 중, class 이름이 date인 요소를 반환해보겠습니다.
console.log(document.querySelector("div.date"));
document.querySelectorAll()
먼저 위의 html코드에서 class 이름이 clock인 요소의 class 이름을 date로 변경해준 다음,
<div class="today-info">
<div class="date" id="date">
02.10.금요일
</div>
<div class="date" id="clock">
15:03
</div>
</div>class이름이 date인 요소를 찾아 출력해보면, 이번엔 2개의 요소가 출력되는 것을 볼 수 있습니다.
document.getElementsByClassName(class)
동일한 class 이름을 갖고있는 모든 요소들을 출력하는 getElementByClassName을 사용해보겠습니다.
console.log(document.getElementsByClassName("date"));두개의 값이 출력되는 것을 볼 수 있습니다.
document.getElementsByTagName
이번에는 tag의 이름으로 여러 요소들을 한 번에 찾아보겠습니다.
console.log(document.getElementsByTagName("div"));div태그를 사용한 모든 요소들이 이렇게 3개가 모두 출력됩니다.
요소 조작하기
이번에는 어트리뷰트 노드에 접근하고, 값을 조작해보겠습니다.
className
먼저 getElementById를 사용해 id 값이 date인 요소들을 가져온 다음, 이 요소의 class 이름을 출력해보도록 하겠습니다.
console.log(document.getElementById("date").className);코드를 실행하면 실제 class 이름인 date가 나옵니다.
위의 class 이름을 change로 수정해보겠습니다.
const dateElement = document.getElementById("date");
dateElement.className = "change");
결과를 확인해보면
id
이번에는 class이름이 아닌 date인 요소를 찾고 해당 요소의 id값을 출력해보겠습니다.
class이름이 date인 요소를 하나만 찾기 위해서는 querySelector를 사용해야합니다.
console.log(document.querySelector("div.date").id);
id값을 change로 변경해보겠습니다.
classList
이번에는 className과 비슷하게 요소의 class값에 접근 가능한 classList를 사용해보겠습니다.
console.log(document.getElementById("date").classList);className을 사용했을 때와는 다른 결과값이 나오는 것을 볼 수 있습니다.
classList는 className처럼 특정 요소의 class 속성에 접근하지만, class와는 다르게 여러가지 메서드들을 사용할 수 있습니다. (add, remove, item, toggle, contains, replace와 같은 메서드를 제공)
add를 사용해 class이름을 change로 변경해보겠습니다.
const dateElement = document.getElementById("date");
dateElement.classList.add("change")
console.log(dateElement);기존 이름인 date에 change가 추가된 것을 볼 수 있습니다.
className은 요소에 무언가를 대입하면 class 이름 전체가 변경되지만, classList는 기존의 값에 특정 값을 추가하거나 제거하고 변경 가능한 속성입니다.
remove를 이용해 date라는 class이름을 지워보겠습니다.
const dateElement = document.getElementById("date");
dateElement.classList.add("change");
dateElement.classList.remove("date");
console.log(dateElement);
어트리뷰트 노드들을 선택하고 조작해봤으니, 이번에는 텍스트 노드들의 값을 변경해보겠습니다.
textContent
html코드입니다.
<div class="today-info">
<div class="date" id="date">
02.10.금요일
</div>
<div class="clock" id="clock">
15:03
</div>
</div>
그리고 index.js로 돌아와서 15:03이라는 텍스트를 변경해보겠습니다.
텍스트는 textContent를 통해 요소에 새로운 텍스트를 할당할 수 있습니다.
먼저 id값이 clock인 요소를 선택해준 다음, textContent를 사용해 텍스트를 12:00로 변경해보겠습니다.
const clockElement = document.getElementById("clock");
clockElement.textContent = "12:00";결과브라우저 화면입니다.
이번에는 class 이름이 date인 요소를 선택해 "02.10.금요일" 값을 "06.04.일요일"로 변경해보겠습니다.
const dateElement = document.querySelector("div.date");
dateElement.textContent="06.04.일요일";결과 브라우저 화면입니다.
참고자료
웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의
웹 프론트엔드 개발자를 희망한다면? 친절하고 꼼꼼한 자바스크립트 강의로 첫걸음을 내딛어보세요✨, - 강의 소개 | 인프런
www.inflearn.com
'프론트엔드 > javascript' 카테고리의 다른 글
| javascript - Date 객체와 날짜 (0) | 2023.06.05 |
|---|---|
| javascript - DOM API -2 (0) | 2023.06.04 |
| 자바스크립트 - 웹페이지를 조작하는 DOM (0) | 2023.06.03 |
| 자바스크립트 - API 호출 (0) | 2023.06.02 |
| 자바스크립트 - async/await (0) | 2023.06.02 |
