addEventListener

addEventListener() 란?
document의 요소에 event를 부착할 때 사용하는 함수

 

원형 : 대상객체.addEventListener(이벤트명, 이벤트리스너(실행할 함수))

• document - 웹 페이지 그 자체
• DOMContentLoadedd - HTML과 script가 로드된 시점에 발생하는 이벤트이다.
• innerHTML - HTML의 content에 접근

 

객체 지정

• 함수 안 (event) 매개변수 => event.currentTarget = 이벤트를 발생시킨 객체
• 함수 안 function () => this = 이벤트를 발생시킨 객체

 

document 메소드

메소드	설명
document.getElementsByTagName(tag)	해당 태그 이름의 요소를 모두 선택함.
document.getElementById(id)	해당 아이디의 요소를 선택함.
document.getElementsByClassName(class)	해당 클래스에 속한 요소를 모두 선택함.
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelector(선택자)	해당 선택자 중 선택되는 요소를 하나를 선택함.
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함.

TagName 이나 ClassName 이나 SelectorAll 은 모든 요소를 선택하기 때문에 반복문을 통해 해당 요소의 인덱스에 

접근하여 개별적으로 요소를 추가하거나 변경해줘야 한다.

 

 

노드

 

• 노드 추가

메서드	설명
parent.appendChild(node)	parent에 node를 추가
parent.insertBefore(node, 기준 parent node)	기준 parent의 node 앞에 node를 추가
parent.insertData(오프셋, 으data)응	parent의 오프셋번째에 data를 추가

 

• 노드 생성

메서드	설명
createElement(노드)	새로운 요소 노드를 생성
createAttribute(속성 노드)	새로운 속성 노드를 생성
setAttributeNode(속성 노드)	기존 요소 노드에 속성 노드를 생성
createTextNode("text")	새로운 텍스트 노드를 생성

 

• 노드 제거

메서드	설명
removeChild(노드)	해당 노드 제거
노드.parentNode.removeChild(노드)	위 보다 접근을 쉽게 하여 노드를 제거
removeAttribute(속성 노드)	해당 속성 노드 제거

 

기타 등..

• node.nodeValue - 노드의 값 접근
• parent.replaceChild(new node,기존 node) - 기존 노드를 새로운 노드로 교체
• event.preventDefalut() - 기본값을 제거하여 제한한다 ex)불법 공유 방지
• .selectedIndex - 선택한 해당 인덱스를 가져옴
• .selected - 선택한 것을 가리킴

 

 

 

local Storage

기록을 저장해주는 API

• localStorage.clear() - 모든 key 삭제
• localStorage.removeItem(key) - 해당 key 삭제
• localStorage.setItem(key,value) - key에 value 저장
• localStorage.getItem(key) - key value 불러오기