JS dom 조작하기

태그 가져오기

• getElementById()
• getElementByName()
• getElementByClassName()
• getElementByTagName()

 

 

 

 

이벤트 리스너 추가하기

• addEventListener()

element.addEventListener(event, function);

 

 

이벤트 리스너 제거하기

• removeEventListener()

element.removeEventListener(type, eventListener);

 

 

키보드와 마우스 이벤트

 

• 마우스 이벤트dblclick : 더블클릭mouseup : 마우스 버튼을 뗄 때mouseenter : 요소 위로 마우스를 움직였을 때dragstart : 드래그 시작dragend : 드래그 종료mouseout : 마우스가 요소 밖으로 벗어났을 때. CSS의 :hover 클래스를 이용할 것.
• mouseover : 마우스를 요소 위로 올렸을 때. CSS의 :hover 클래스를 이용할 것.
• drag : 드래그
• mouseleave : 요소 밖으로 마우스를 움직였을 때
• mousemove : 마우스를 움직일 때
• mousedown : 마우스 버튼 누르고 있을때
• click : 사용자가 페이지 위에서 마우스를 클릭했을 때
• 키보드 이벤트keyup : 사용자가 키를 땔 때
• keypress : 사용자가 눌렀던 키의 문자가 입력되었을 때
• keydown : 사용자가 키를 처음 눌렀을 때

 

 

태그 속성 다루기

• elem.hasAttribute(name) – 속성 존재 여부 확인
• elem.getAttribute(name) – 속성값을 가져옴
• elem.setAttribute(name, value) – 속성값을 변경함
• elem.removeAttribute(name) – 속성값을 지움

 

 

부모와 자식 태그 찾기

1. 부모 찾기
   • parent = document.querySelector('.parent');
   • document.getElementsByClassName('parent')[0];
2. 자식 찾기
   • children = document.querySelector('.parent .child1');
   • children = document.querySelectorAll('.parent .child1');

 

 

새로운 태그 만들기

• let createDom = document.createElement('p'); createDom.innerHTML = '새로 생성된 p태그';

 

 

태그 복제하기 : cloneNode()  함수를 이용한다.

const testDiv = document.getElementById('test');

const newNode = testDiv.cloneNode(true);
const newNode = testDiv.cloneNode(false);

newNode.id = 'copyNode' + idNum;

•