addEventListener()
정의 : 객체에 이벤트를 추가해주는 메서드이다.
사용법 : 이벤트를실행할타겟.addEventListener('이벤트타입', 실행할함수)
예제)
1. HTML파일 소스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM에 접근하기</title>
<title>이벤트 처리하기</title>
<link rel="stylesheet" href="css/domevent.css">
</head>
<body>
<div id="container">
<img id="pic" src="images/girl.png" alt="">
</div>
<script src="js/domevent-result.js"></script>
</body>
</html>
2. JS파일 소스
var pic = document.querySelector('#pic'); //Html img태그를 가르킴(id가 pic이라서)
pic.addEventListener("mouseover", changePic, false);
pic.addEventListener("mouseout", originPic, false);
function changePic() {
pic.src = "images/boy.png";
}
function originPic() {
pic.src = "images/girl.png";
}
설명 : pic에 이벤트가 두개가 추가되었다 하나는 마우스가 사진위로 올라갔을때 하나는 사진으로부터
마우스가 사라졌을때이다.
마우스가 올라가면 changePic함수가 실행되고 사라지면 originPic이 실행된다.
출처 : https://slidesplayer.org/slide/15071349/
innerText와 innerHTML의 차이점
element.innerText;
이 속성은 element 안의 text 값들만을 가져옵니다.
element.innerHTML;
innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옵니다.
요약 : innerText는 element의 text값만 가져오고 innerHTML은 태그까지 가져온다!
getAttribute와 setAttribute
setAttribute : 특정 속성에 값을 변경하거나 새로 지정한다.
getAttribute : 특성 속성을 추출한다.
예제)
const elem = document.querySeletor(‘div’);
elem.setAttribute(‘Id’, wrap);
결과 값 : <div id=“wrap”></div>
elem.getAttribute(‘id’);
결과 값 : wrap
출처 : https://velog.io/@yangareum1818/JS-속성과-프로퍼티-setAttribute-getAttribute-비표준-속성-dataset
querySelectorAll와 querySelector
querySelectorAll
- 지정된 셀렉터 그룹에 일치하는 도큐먼트의 element list를 나타낸다. 즉 NodeList를 반환한다. 지정된 셀렉터가 없는 경우에는 비어있는 NodeList로 반환된다.
querySelector
- 지정된 선택자와 일치하는 도큐먼트의 첫 번째 element를 반환한다. 일치하는 요소가 없으면 null을 반환한다.
예제)
1. HTML
<div class="clock">
<h1 class="title" id="clickEffect"></h1>
</div>
<form class="form">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class="greetings"></h4>
<form class="toDoForm">
<input type="text" placeholder="My tasks" />
</form>
<ul class="toDoList"></ul>
<span class="js-weather"></span>
</div>
2.JS
const title = document.querySelector('#clickEffect');
const CLICKED_CLASS = 'clicked';
function handleClick() {
title.classList.toggle(CLICKED_CLASS);
}
function init() {
title.addEventListener('click', handleClick);
}
init();
설명 : title이라는 변수에는 id가 clickEffect인 태그
display와 visibility의 차이점
둘 다 none을 하면 화면에서 감추기가 된다. 하지만 display는 화면에 감추면 공간도 사라지는데 visibility는 공간이 그래로 있는다.
insertbefore()
- 부모 노드에 자식 노드를 추가할 때 기준이 되는 노드를 지정하고 그 앞에 자식노드를 추가가능
removeChild()
- 부모 노드에서 자식 노드를 삭제하는 함수 괄호 안에는 삭제하려는 자식 노드가 들어감
hasChildNodes()
- 자식 노드가 있다면 true, 자식 노드가 없다면 false 반환해줌
childNodes()
- 요소 노드뿐만 아니라 태그와 태그 사이의 줄 바꿈도 빈 텍스트 노드인 자식 노드로 인식함
getElementById() = id 선택자
- id 속성 값은 한 문서 안에서 유일하기 때문에 자주 사용
예제)
<h1 id="heading">이름</h1>
document.getElementById("heading").onclick = function() {
this.style.fontSize = "5em";
}
설명 : id가 heading인걸 클릭하면 글자크기를 5em으로 해라라는 의미입니다. 이 처럼 id를 선택해주는
메서드입니다.
폼과 BOM
- 폼(Form)
- 폼 요소에 접근하는 방법은 id나 class 값을 이용하는 것은 같음
- → id 값은 폼 요소 하나에만 접근하고,class 값은 폼의 여러 요소를 가져와 배열 형태로 저장
- id나 class 속성이 없고 name 속성만 있어도 해당 요소에 접근 가능!
- → 단, 이 방법을 사용하려면 <form> 태그에 name 속성이 지정되어 있어야 하고, <form> 태그 안에 포함된 폼 요소에서 name 속성이 있어야 함
