dom 요소의 선택. // 누르면 바뀌게하기.

DOM 요소의 선택

(답안 코드는 본 해설의 마지막 부분에 주어져 있습니다. 하지만 답안을 보시기 전에, 먼저 아래의 문제 설명 부분을 보시고 다시 문제를 스스로 풀어보신 후에, 답안 코드를 보는 것을 권장 드립니다.)

HTML의 요소들을 선택하고 조작하는 것은 javascript 의 대표적인 사용 목적 중 하나입니다. 하지만 아래의 이유들로 인해 헷갈릴 수 있습니다.

1. getElement~ 함수의 종류가 ById, ByClassName 등 다양합니다.
2. getElement 혹은 getElements 로, s가 붙을 때와 안 붙을 때가 있습니다.
3. 또한, 반환된 결과에 [0] 등 인덱싱을 할 때, 안할 때가 있습니다.

*인덱싱: 배열에서 특정 요소를 골라내는 방법입니다. 예를 들어, [1, 10, 100] 의 [0] 은 0번째의 1, [1]은 1번째의 10 입니다. 2번째는 100입니다.

따라서 다음과 같이 표로 정리하면 편리합니다.

함수 이름s가 붙는지 여부찾는 대상입력출력인덱싱 필요 여부

getElementsByTagName	s 붙음	태그 (div 등)	문자열	요소들의 모음	필요
getElementsByClassName	s 붙음	class 요소	문자열	요소들의 모음	필요
getElementsByName	s 붙음	name 요소	문자열	요소들의 모음	필요
getElementById	s 안붙음	id 요소	문자열	요소	불필요

*함수 이름 앞에 document 는 생략되었습니다.

또한 아래를 아는 것이 도움이 됩니다.

1. Id는 네이버 등의 사이트에서 쓰는 아이디 개념과 비슷합니다. 즉, 중복이 되면 안 됩니다. html 파일당 특정 id는 1번만 사용해야 합니다 (2번 쓴다고 에러가 발생하진 않지만, 권장 사항입니다). 따라서, getElementById 는 s가 안 붙습니다. 해당 id의 요소는 딱 1개만 있어야 하기 때문입니다.
2. 문자열은 문자를 “ “ 혹은 ‘ ‘ 로 감싸서 만듭니다. ‘div’, ‘myName’ 등입니다.
3. 출력에서 요소들의 모음인 경우, 마치 배열처럼 인덱싱 ( [0] 등으로 요소를 접근)이 되는 기능을 가집니다. 요소들의 모음은 object - collection 으로 나타납니다. 요소인 경우, object - Element 으로 나타납니다.
4. 일반적으로 getElement~ 로 s 가 없는 경우, 바로 요소가 반환됩니다. (id로 찾는 경우 등) 하지만, getElements ~ 로 s가 있는 경우, 여러 개의 요소를 동시에 반환해야 하므로, 우선 요소들의 모음이라고 생각할 수 있는 object로 반환합니다. 이후 인덱싱을 통해 특정 요소를 가져올 수 있습니다.

답안 코드

// HTML <img> 요소를 선택하도록 코드를 작성하세요.
var imgs = document.getElementsByTagName("img"); 

// HTML <div> 요소를 선택하도록 코드를 작성하세요
var selectedTagName = document.getElementsByTagName("div"); 

// 아이디가 “gtomato"인 요소를 선택하도록 코드를 작성하세요
var selectedId = document.getElementById("gtomato");

// 클래스가 "vegetable"인 모든 요소를 선택하도록 코드를 작성하세요
var selectedClassNameS = document.getElementsByClassName("vegetable"); 

// name 속성값이 "tomato"인 모든 요소를 선택하도록 코드를 작성하세요
var selectedNameS = document.getElementsByName("tomato"); 

 

 

--------

 

누르면 바뀌게

DOM 요소를 조작하여 버튼을 누르면 버튼의 배경색과 텍스트가 바뀌는 이벤트 동작을 구현해봅시다.
HTML 파일을 확인하면 텍스트가 포함된 버튼이 있는 것을 알 수 있습니다.

<button id="btn">버튼을 눌러주세요</button>

그리고 자바스크립트 파일에서 해당 버튼 요소를 가져오고 있고, 가져온 요소에 대해서 이벤트를 등록해주면 됩니다.
먼저 등록할 이벤트 함수 changeButtonOnclick()을 구현합니다.

먼저 버튼에 클래스를 추가하여, CSS 파일에 작성되어 있는 .changeColor이 적용될 수 있도록 해줍니다. 그리고 innerText를 이용해 버튼의 텍스트를 바꾸어 주면 됩니다.

function changeButtonOnclick() {
  /*지시사항 1번*/
  target.classList.add("changeColor");
  /*지시사항 2번*/
  target.innerText = "버튼 클릭 성공!";
}

그리고 불러온 요소 target에 대해 addEventListnener를 이용해 "click" 이벤트로 해당 함수를 등록해주면 됩니다.

target.addEventListener("click", changeButtonOnclick);

답안 코드

/*지시사항을 따라 작성해주세요*/
var target = document.getElementById("btn");

function changeButtonOnclick() {
  /*지시사항 1번*/
  target.classList.add("changeColor");
  /*지시사항 2번*/
  target.innerText = "버튼 클릭 성공!";
}

/*지시사항 3번*/
target.addEventListener("click", changeButtonOnclick);