Javascript HTML 요소 조작 및 스타일링 (공부_2)

이번에는 자바스크립트로 HTML 요소를 조작하고 스타일링 하는 방법에 대해서 공부를 했고 정리해 보려고 한다.

 

1. HTML 요소 선택하는 방법

get 메서드

• document.getElementByID : HTML 요소에 할당한 고유한 ID를 찾을 수 있음
• document.getElementsByClassName : HTML 클래스명으로 요소를 찾을 수 있음
• document.getElementsByTagName : HTML 태그명으로 요소를 찾을 수 있음

★ 중요 포인트★

ID는 중복이 되면 안 됨 (= 고유하기 때문에 하나밖에 없음) 그렇기 때문에  getElement 뒤에 s 붙이면 안 됨!!

ClassName, TagName은 중복이 될 수 있기 때문에 getElements 뒤에 s를 꼭 붙여줌!!

 

예시)

<h2 id="title">운동</h2>

let title = document.getElementById('title');
console.log(title);
title.textContent = '헬스 3대 운동';

---> textContent를 사용해 title의 콘텐츠 내용을 바꿀 수 있음

<ul class="list">
        <li class="item">스쿼트</li>
        <li class="item">벤치프레스</li>
        <li class="item">데드리프트</li>
 </ul>

let items = document.getElementsByClassName('item');
console.log(items);
console.log('스쿼트 : ', items[0]);
console.log('벤치프레스 : ', items[1]);
console.log('데드리프트 : ', items[2]);

---> 배열 형태로 접근할 수 있음

let liList = document.getElementsByTagName('li');
console.log(liList);

 

 

DOM 요소 쿼리

• document.querySelector(CSS Selecor) : 지정된 선택자에 일치하는 문서 내 첫 번째 요소를 반환, 일치하는 요소가 없을 경우 null 반환
• document.querySelectorAll : 지정된 선택자에 일치하는 요소 목록을 반환

예시)

// HTML 코드는 위에 작성된 것과 동일
let h2 = document.querySelector('#title');
console.log('h2 : ', h2);

let item = document.querySelector('.item');
console.log('query item : ', item); // 첫 번째 요소 출력

let itemAll = document.querySelectorAll('.item');
console.log('itemAll : ', itemAll);	// All을 썼기 때문에 모든 요소 출력
console.log('itemAll : ', itemAll[0]);
console.log('itemAll : ', itemAll[1]);
console.log('itemAll : ', itemAll[2]);

 

 

 

2. HTML 요소 조작하기

콘텐츠 수정

• textContent : HTML 태그를 모두 제거하고 본인이 입력한 텍스트로 바뀜
• innerHTML : 입력한 HTML 태그로 바꿈

예시)

h2.textContent = '운동';
h2.innerHTML = '<span>운동@@@</span>';

 

 

속성 제어

• setAttribute : 요소에서 주어진 이름의 속성값 입력
• removeAttribute : 요소에서 주어진 이름의 속성 제거

예시)

<input type="text" name="myText" placeholder="운동을 입력해주세요." />

let input = document.querySelector('input');
input.setAttribute('placeholder', '헬스 운동을 입력해주세요!');
input.setAttribute('required', ''); // 빈 값으로 넣으면 required 속성만 따로 생김, 요소검사에서 확인할 것
input.removeAttribute('placeholder');
input.removeAttribute('required');

 

 

 

3. HTML 요소 스타일링

요소의 프로퍼티 직접 수정

• style : style 프로퍼티를 사용하여 직접 수정

예시)

<p class="hello">안녕하세요</p>

let helloItem = document.querySelector('.hello');
helloItem.style.color = 'white';
helloItem.style.backgroundColor = 'black';

여기서 새로 알게 된 점

- 모든 html 요소는 객체로 취급된다.

 

 

CSS 클래스 이용

• classList : classList 객체를 사용하여 class를 수정

.dark {
  color: white;
  background-color: black;
}

.light {
  color: black;
  background-color: white;
}

helloItem.classList.add('dark'); // helloItem이라는 요소의 class에다가 dark를 넣음
helloItem.classList.add('one', 'two');
helloItem.classList.remove('dark');

---> 최종 결과 : <p class="hello one two">안녕하세요</p>

 

 

 

4. 느낀점

자바스크립트를 사용하기 위해 HTML 요소를 선택해서 다양한 속성들을 사용해 수정하고 추가하는 과정이 처음 배워서 다소 어려웠지만 익숙해질 때까지 계속 쓰다 보면 괜찮아질 것 같다.

style 프로퍼티를 처음 알게 됐을 때 이게 왜 프로퍼티인지 이해가 안 돼서 따로 검색해 보니 모든 HTML 요소가 객체로 취급된다는 사실을 알게 되어 궁금증이 해결됐다. 아직 내가 모르는 기본 개념들이 많아서 더욱더 열심히 공부를 해야겠다는 생각이 들었다.