태그 가져오기
- 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) – 속성값을 지움
부모와 자식 태그 찾기
- 부모 찾기
- parent = document.querySelector('.parent');
- document.getElementsByClassName('parent')[0];
- 자식 찾기
- 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 |