[새싹x코딩온] 웹 퍼블리싱 과정 4주차 - 2 | JS - DOM 요소 다루기

요소 다루기

태그 내부 내용

- 태그 내에 들어갈 문자열을 지정

• innerText : 요소 안의 텍스트를 가져오거나 수정한다.
• innerHTML : 요소 안의 '코드'를 가져오거나 수정한다.
• textContent : innerText처럼 텍스트 정보를 표시한다.

 

속성

• setAttribute() : 속성값 설정할 수 있다.
• getAttribute() : 속성값 가져올 수 있다.

html
<img src='./image/naver_logo.png' alt='로고' id='pooh'>


js
const pooh = document.querySelector('#pooh')

# 메소드로 속성에 접근
pooh.getAttribute('src');

# 점으로 속성에 접근
pooh.src;

 

 

js에서 style 속성 바꾸기

요소.style.속성 = '속성값';

ex)
li.style.backgroundColor = 'pink';

 

classList

- 선택 요소에 class를 더하거나, 빼거나, 클래스가 존재하는지 체크하는 메소드

- 해당 기능과 css를 잘 활용하면 액티브한 웹피이지 구성이 가능하다.

• 요소.classList.add('class 이름') : 요소에 해당 class를 추가한다.
• 요소.classList.remove('class 이름') : 요소에 해당 class를 삭제한다.
• 요소.classList.contains('class 이름') : 요소에 해당 class가 존재하는지 체크한다. (결과값으로 true 또는 false가 나온다.)
• 요소.classList.toggle('class 이름') : 요소에 해당 class가 있으면 class를 삭제하고 해당 class가 없으면 class를 추가한다.

 

요소에 접근하기

요소.children  # 자식 노드에 접근
요소.parentNode  # 부모 노드에 접근
요소.previousElementSibling  # 앞에 있는 형제 노드에 접근
요소.nextElementSibling  # 뒤에 있는 형제 노드에 접근

 

요소 생성하기

- html의 특정 노드를 생성한다.

const 변수 = document.createElement('요소');

 

요소 추가하기

• 요소.append('추가할 요소') : 선택된 요소의 맨 뒤의 자식 요소로 추가된다.
• 요소.prepend('추가할 요소') : 선택된 요소의 맨 앞쪽인 자식 요소로 추가된다.
• 요소.before('추가할 요소') : 선택된 요소의 앞에 있는 형제 요소로 추가된다.
• 요소.after('추가할 요소') : 선택된 요소의 바로 뒤인 형제 요소로 추가된다.

 

요소 삭제하기

• 요소.remove() : 선택된 요소가 삭제된다.
• 요소.removeChild('요소의 자식요소') : 선택된 요소의 자식요소가 삭제된다.