태그 가져오기

  • 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;
  •  

'WEB > Javascript' 카테고리의 다른 글

[JS] promise~  (0) 2024.05.27
[JS] console.dir과 console.log의 차이  (0) 2024.05.21
[JS] this란?  (0) 2024.05.15
JS 동기와 비동기  (0) 2024.04.09
JS 변수와 함수 선언하기  (0) 2024.04.02

+ Recent posts