Model
웹페이지를 구성하는 JS 객체들의 모음
DOM 요소 접근
선택 요소의 HTML/CSS 등 정보를 객체 형태로 출력
ID
document.getElementById();
1개 요소만, HTML collection으로 반환
TAG NAME
document.getElementsByTagName();
2개 이상의 요소 반환
- p
- div
- img
- input …
CLASS NAME
document.getElementsByClassName();
2개 이상의 요소 반환
QUERY SELECTOR
document.querySelector();
일치하는 요소 중 최초의 요소 하나만 출력
'div': tag name'.class': class name'#id': id'input[type="text"]': attribute
document.querySelectorAll();
일치하는 모든 요소 출력
parent-children
//1계층 상위 요소 접근
elmt.parentElement;
//2계층 상위 요소 접근
elmt.parentElement.parentElement;
// 하위요소 목록 출력 (iterator 가능)
elmt.children;
//첫번째 하위 요소 지정
elmt.children[0];
elmt.priviousSibling;
elmt.nextSibling;
텍스트 조회, 추가, 변경
innerText
// (사용자에게 보여지는) 텍스트 확인
// display:none 설정된 요소 안보임
document.querySelector('div').innerText;
// 텍스트 단일 추가, 변경
const alphabet = document.querySelector('div').innerText = 'abc';
// 텍스트 다중 추가, 변경
const alphabets = document.querySelectorAll('div');
for (let alp of alphabets){
alp.innerText='abc';
}
textContent
// (display:none 포함) 모든 텍스트 출력
document.querySelector('div').textContent;
//텍스트 추가, 변경
document.querySelector('div').textContent = 'abc';
innerHTML
//태그를 포함한 마크업 텍스트 전체 반환
document.querySelector('div').innerHTML;
document.querySelector('div').innerHTML = <div style='color:red'>abc</div>;
attrubute / style
document.querySelector('div').getAttribute('id');
document.querySelector('div').setAttribute('id', 'newId');
document.querySelector('div').id = 'id';
// 모든 스타일 설정은 카멜케이스로
document.querySelector('div').style.borderRadious = '50%';
classList
// 클래스 속성 추가
document.querySelector('div').classList.add();
//삭제
document.querySelector('div').classList.remove();
//조회
document.querySelector('div').classList.constains();
//상태 전환 on-off, 펼치기-접기
document.querySelector('div').classList.toggle()
새로운 DOM 요소 생성
1개 요소 생성
//태그 생성
document.createElement('img')
//변수에 담기
cosnt newH1 = document.createElement('img')
//정보 담기
newImg.src = '소스정보'
newH1.innerText = 'HelloWorld!"
newH1.classList.add('클래스이름')
//위치 배정
document.body.appendChild(newH1)
//body 내 마지막 요소로 추가
1개 이상 요소 생성 (IE 불가)
//기존 요소 지정, 변수에 담기
const div = document.querySelector('p')
//기존 요소 내부에 텍스트 or 자식요소 추가
p.prepend('hello') //맨앞
p.append('bye', 'see you again'') //맨뒤
//기존 요소 인접 형제 요소 추가
p.insertAdjacentElement(position, newElement)
//'beforebegin' 형제요소 앞
//'afterbegin' 내부 첫 자식요소
//'beforeend' 내부 마지막 자식요소
//'afterend' 형제요소 뒤
요소 제거
node.removeChild() past
특정 요소 제거 시 부모 요소로 접근해 자식 요소를 지정, 삭제해야 함
b.parentElement.removeChild(b);
itself.remove() present
직접 지정해 삭제 가능해짐
img.remove();