02. JS - 조건문, 반복문, append

11. DOM 메소드 및 속성

메소드 이름	역할
document.querySelector(x)	CSS 선택자 x를 기반으로 첫 번째 요소 선택
document.querySelectorAll(x)	CSS 선택자 x에 해당하는 요소 전부 선택, 결과값 -> NodeList
document.getElementById(x)	id 속성 값을 기반으로 요소 선택
document.getElementsByClassName(x)	해당 class 속성 값의 요소 전부 선택, 결과값 -> HTMLCollection
document.write(x)	문서에 콘텐츠 x를 해석해서 추가 입력

메소드 이름	역할
Element.textContent	요소가 가진 텍스트 콘텐츠 반환, 코드상의 공백도 포함
Element.innerText	요소가 가진 텍스트 콘텐츠 반환, 공백 x
Element.innerHTML	요소 내에 쓰여진 HTML 코드를 해석하여 텍스트 형태로 반환
Element.className	요소가 갖고 있는 class 속성값들을 반환
Element.style	요소의 style 관련 속성값들을 반환
Element.title	요소의 title 속성값을 반환

16. createElement & appendChild

createElement()

document.createElement() 메소드는 지정된 이름의 HTML 요소를 만들어 반환한다.

예시)

document.createElement('div')

만들어지고 반환된 요소가 곧장 웹 브라우저 화면에 추가되는 것이 아님
해당 요소를 화면에 표시하는 작업을 추가로 해줘야함 -> append

appendChild()

appendChild() 메소드는 DOM 내 개별 요소(노드)에 자식 요소를 추가할 때 사용

예시)

const p = document.createElement('p')
document.body.appendChild(p)
// body 태그 안에 p 태그 추가

append()와 appendChild()의 차이

타겟 요소에 자식 요소를 추가한 다는 점은 같으나 차이점도 존재

• append는 요소에 노드 객체 또는 문자열을 자식 요소로 추가 가능, appendChild는 노드 객체만 추가 가능
• appendChild는 추가한 자식 노드를 반환, append는 반환값 없음