DOM

요소가져오기

• firstElementChild
• lastElementChild
• nextElementSibling
• parentElement
• getElementsByTagName(‘li’)
• getElementsByClassName(‘simple’)
• getElementById(‘simple’)
• querySelector(‘h1’)
• querySelectorAll(‘h1’)

요소생성하기

• createElement
• element.textContent
• target.appendChild(삽입할 노드)
• target.insertBefore(삽입할 노드, 자식 노드)
• target.insertAfter(element)

요소삭제하기

• target.remove(자식노드);
• parentElement.removeChild(element);

요소교체

특정 부모 노드의 한 자식 노드를 다른 노드로 교체

• target.replaceChild(새로운 노드, 자식 노드)

이벤트

이벤트 핸들러와 이벤트 리스너는 다름. 이벤트 리스너는 이벤트에 함수를 연결하거나 제거 할 수 있음.

function test() {
  console.log("test");
}
element.click = test; //이벤트 핸들러 방식
element.addEventListener("click", test); //이벤트 리스너 방식
element.removeEventListener("click", test);

DOM 트리 프로퍼티

프로퍼티 이름	설명
parentNode	이 노드의 부모 노드를 참조한다. Document 객체의 부모 노드는 null이 된다.
childNodes	이 노드의 자식 노드의 참조를 저장한 유사 배열 객체
firstChild	이 노드의 첫번째 자식 노드. 자식 노드가 없을 때는 null이 된다.
lastChild	이 노드의 마지막 자식 노드. 자식 노드가 없을 때는 null이 된다.
nextSibling	이 노드와 같은 부모 노드를 가진 이 노드 다음의 형제 노드
previousSibling	이 노드와 같은 부모 노드를 가진 이 노드 이전의 형제 노드
nodeType	노드 유형을 뜻하는 숫자(1:요소 노드, 3:텍스트노드, 9:Document)
nodeValue	텍스트 노드의 텍스트 콘텐츠. 요소 노드에서는 null이 된다.
nodeName	요소 노드는 대문자로 바뀐 요소 이름이 들어간다. 텍스트 노드는 “#text”가 들어간다.

프로퍼티 이름	설명
childNodes	이 요소의 자식 요소 참조를 저장한 유사 배열 객체
parentElement	이 요소의 부모 요소 객체를 참조한다.
firstElementChild	이 요소의 첫번째 자식 요소 객체를 참조한다.
lastElementChild	이 요소의 마지막 자식 요소 객체를 참조한다.
nextElementsSibling	이 요소와 같은 부모를 가진 이 요소 다음의 형제 요소 객체를 참조한다.
previousElementSibling	이 요소와 같은 부모를 가진 이 요소 이전의 형제 요소 객체를 참조한다.
childElementCount	자식 요소의 개수. children.length와 같다.

프로퍼분류	설명
요소 객체.getAttribute(attibute)	속성가져오기
요소 객체.setAttribute(attibute,value)	속성 설정하기
요소 객체.hasAttribute(attibute)	속성을 가지고 있는 여부를 논리값으로 반환
요소 객체.removeAttribute(attibute)	속성 삭제
요소 객체.attributes()	전체속성 삭제