eadgnus

노드(node)

- HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장

노드종류

- 문서노드: 문서 전체를 나타내는 노드
- 요소노드: HTML의 요소는 요소노드, 속성노드를 가질수 있음
- 속성노드: 속성은 모두 속성노드이며, 요소노드의 관한 정보를 가지고 있다
- 텍스트노트: 텍스트는 모두 텍스트노드
- 주석노드: 주석은 모두 주석노드

노드의 관계

parentNode: 부모 노드
children: 자식
childsNodes: 자식 노드 리스트
firstchild: 첫번째 자식 노드  // 아래의 경우에 엔터키가 찾아질수도 있다
firstElementChild: 첫번째 자식 요소 노드 // 요소만 찾아지므로 li태그가 바로 찾아진다
lastChild: 마지막 자식 노드 // 마찬가지로 엔터키, 공백, 주석이 찾아질수도 있다
lastElementChild: 마지막 자식 요소 노드 // 요소만 찾아짐
nextSibling: 다음 형제 노드
preiousSibling: 이전 형제 노드

    <ul>
        <li>김사과</li>
        <li>오렌지</li>
    </ul>

노드 추가

appendChild(): 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
insertBefore(): 새로운 노드를 특정 자식노드 바로 앞에 추가
insertData(): 새로운 노드를 텍스트 데이터로 추가

노드 생성

createElement(): 새로운 요소 노드를 만듬
createAttribute(): 새로운 속성 노드를 만듬
createTextNode(): 새로운 텍스트 노드를 만듬

노드 제거

removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거. 노드가 제거되면 해당노드를 반환. 노드가 제거될 때 노드이 자식들도 다같이 제거
removeAttribute(): 특정 속성 노드를 제거

노드 복제

clonenode(): 기존의 존재하는 노드와 동일한 노드를 새롭게 생성하여 반환

문서 객체 모델(document object model)

- html 문서 또는 xml문서 등을 접근하기 위한 일조으이 인터페이스 역할
- 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공

document 객체
- 웹 페이지 자체(body)를 의미하는 객체
- 웹 페이지에 존재한 html 요소에 접근하고자 할때 반드시 document 객체로 부터 시작

getElementById(): 해당 아이디의 요소를 선택
getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택
getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택
getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택 // name -> 서버에서 데이터베이스로 송신해주는역할

querySelectorAll(): 선택자로 선택되는 요소를 모두 선택
querySelector(): 선택자로 선택되는 요소를 선택

Location 객체

현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용

history 객체

- 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체
- 사용자의 개인정보를 보호하기 위해 이 객체 이 객체의 대부분의 기능을 접근 제한

navigator 객체

브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체

form 객체

- 일반적인 폼 요소에 접근할 때 사용
- document.forms 컬렉션을 이용해서도 접근할 수 있음

1. setInterval()

일정 시간마다 매개변수로 제공된 함수를 실행

2. clearInterval()

일정 시간후에 일어날 setInterval() 함수를 취소함

버튼을 사용하여 활용한 모습

setTimeout()

- 일정시간이 지난후 매개변수로 제공된 함수를 실행

clearTimeout()

- 일정 시간후에 일어날 setTimeout() 함수를 취소함

✔ 사용예시

clear 해주게 되면 아무런 반응도 일어나지 않는다