DOM 문서 객체 모델
웹브라우저에서 사용하려고 만든 언어.
-> 현재는 다양한 사용처와 플랫폼을 지원함
window 호스트환경 // 다른 호스트환경들이 많음..(게임이나 웹사이트 등등)
1)DOM(Document Object Model)
웹페이즈 내의 모든 콘텐츠를 객체로 나타내줌.
<html> -> document.documentElemant
<body> -> document.body
<head> -> document.head
- 자식노드 탐색
childNodes // 자식노드탐색 사이사이의 공간을 text노드라는 객체로 포함시키고 주석노드도 확인함
노드의 종류
1) text노드
2) 요소노드
3) 주석노드
children // 요소노드에만 접근함
firstChild // 자식노드중 첫번째 자식노드
lastChild // 자식노드중 마지막 자식노드
firstElementChild - 자식 요도노드중 첫번째 요소노드
nodeName // 노드의 이름을 나타냄
(text노드는 #text 요소노드는 태그명 주석노드는 #comment)
nodeType // 1 = 요소노드 3 = text노드
선택한 요소의 내용 조작
innerHTML = '<h1>안녕하세요</h1>'
textContent = '<h1>안녕하세요</h1>'
요소 생성하기
1) 요소 생성하기
document.creatElement(tag)
2) 텍스트노드 생성하기
document.createTextNode('안녕하세요')
요소추가하기
1)node.append - 노드나 문자열을 node안의 끝에 추가합니다.
2)node.prepend - 노드나 문자열을 node안의 맨앞에 추가합니다.
3)node.before - 노드나 문자열을 node밖의 이전에 추가합니다.
4)node.after - 노드나 문자열을 node밖의 다음에 추가합니다.
5)node.insertAdjacentHTML(where, html) / 원하는 위치에 html을 추가합니다.
'beforebegin' node밖의 바로앞에 html을 추가
'afterbegin' node안의 첫번째 자식요소 앞에 html을 추가
'beforeend' node안의 마지막 자식요소 다음에 html을 추가
'afterend' node밖의 바로 다음에 html을 추가
이전 요소추가하기 메서드
node.appendChild(추가할요소) 마지막 자식으로 추가
node.insertBefore(추가할요소, nextSibling)
요소 복제하기
elem.cloneNode(true) 자식까지 다복사
elem.cloneNode(false) 선택한요소하나만 복사
요소 삭제하기
elem.remove()
선택한 요소의 자식 요소노드에 접근 children
선택한 요소의 자식요소노드중 마지막 요소노드 접근 lastElementChild
선택한 요소의 자식요소노드중 마지막 요소노드 접근 firstElementChild
선택한 요소의 부모요소노드 접근 parentElement
선택한 요소의 이전 요소노드 접근 previousElementSibling
선택한 요소의 다음 요소노드 접근 nextElementSibling
'프론트앤드 수업' 카테고리의 다른 글
| [javascript] 홈페이지메뉴 이벤트창 만들기 (0) | 2022.05.16 |
|---|---|
| [javascript] before,after,append,prepend, createElement 사용 (0) | 2022.05.13 |
| [javascript] 슬라이드 화면 넣기 (0) | 2022.05.11 |
| [javascript] 간단한 클릭게임만들기 (0) | 2022.05.06 |
| [javascript] 객체, 생성자함수, in연산자, 객체의 복사 (0) | 2022.05.04 |