해당 포스팅은 GOAT 자바스크립트 책으로 공부한 내용을 정리한 것이다.
요소 선택
웹페이지 내의 특정 요소를 선택할 때 사용하는 형식으로 하나의 요소만을 가리키는 것과 여러 개의 요소를 한꺼번에 가리키는 방식이 있다.
웹 문서가 브라우저에 로드되면, 문서 객체 형식이 되어 각 HTML 요소와 속성에 접근할 수 있게 된다.
| 요소 접근 메서드 | 방식 | 설명 |
|---|---|---|
| getElmentById() | 단수형 | id 속성값으로 특정값을 갖는 요소 반환 |
| getElementsByTagName() | 복수형 | 특정 태그(tag)을 갖는 모든 요소 반환 |
| getElementsByClassName() | 복수형 | class 속성값으로 특정값을 갖는 모든 요소 반환 |
| getElementsByName() | 복수형 | name 속성값으로 특정값을 갖는 모든 요소 반환 |
| querySelector() | 단수형 | 특정 CSS 선택자 형식과 일치하는 첫번째 요소 반환 |
| querySelectorAll() | 복수형 | 특정 CSS 선택자 형식과 일치하는 모든 요소 반환 |
주로 getElmentById() 메서드를 많이 사용한다.
getElementsByTagName(), getElementsByClassName(), getElementsByName()는 복수형으로 원하는 조건을 추가적으로 지정해줘야 하기 때문에 잘 쓰진 않는다.
querySelector()와 querySelectorAll()는 ES5 이후 만들어진 최신 함수로 원하는 요소를 빠르게 반환한다.
// 3번째 순서를 반환
const list2 = document.querySelector('li:**nth-of-type(3)**');querySelector의 ('li:nth-of-type(3)')은 의사-클래스 선택자 표현으로 <li>요소로부터 3번째 순서의 목록을 선택한다. nth는 n번째를 의미하는 표현이다.
quretSelector 사용예시 1)
<input id="mid" type=”text”>
<div id = "result"></div>document.querySelector(”#mid”).value // input 값 출력전용
document.querySelector(”#mid”).value = “user01” // input 값 입력전용
document.querySelector("#result").innerText = "Hello" // 값 입력기능 없음. 출력전용
document. querySelector ("#result") .innerHTML = "<b>HELLO</b>" // 값 입력기능. 입력전용getElementById 사용예시 1)
<div id="container"> </div>
document.getElementById("container").innerHTML = "<button>"+i+"</button>";`innerText` 태그가 동작하지 않고 글씨를 삽입
`innerHTML` 태그가 동작이벤트
웹페이지에서 이벤트는 HTML요소에서 발생하는 어떤 일이다. 어떤 일이 일어나기 위해서는 그것이 발생하는 원인과 발생하는 내용이 있어야 한다.
| 이벤트 속성 | 설명 |
|---|---|
| onclick | HTML 요소 클릭 시 발생 |
| onchange | HTML 요소 변경 시 발생 |
| onmouseover | 요소 위로 마우스를 이동할 때 발생 |
| onmousedown | 마우스 왼쪽 버튼을 누르는 동안 발생 |
| onkeydown | 키보드를 누를때 발생 |
| onload | 웹페이지 로딩이 완료될 때 발생 |
'이벤트 트리거(사용자의 행동)'이 발생하면 미리 정해진 코드가 실행되는데, 이를 '이벤트 처리기'라고 한다.
정리하면, 어던 HTML 요소에 특정 트리거가 발생할 때 이벤트 처리기 내의 코드가 실행되는 것이 '이벤트'이다.
onclick
'이벤트 처리기'는 하나의 요소에 하나의 이벤트만을 처리하는 '이벤트 핸들러'와 하나의 요소에 여러 개의 이벤트 처리가 가능한 '이벤트 리스너'가 있다.
// 이벤트 대상 + 이벤트 트리거 + 이벤트 핸들러
// 단순형태에서 주로 사용
// 덮어쓰기 기능
document.querySelector('.btn-danger').onclick = function() {
console.log('이벤트 핸들러#1');
}
document.querySelector('.btn-danger').onclick = function() {
console.log('이벤트 핸들러#2');
}
// 이벤트 대상 + 이벤트 트리거 + 이벤트 리스너
// 복잡한형태에서 주로 사용
// 따로 기능 작동
document.querySelector('.btn-warning').addEventListener('click', function() {
console.log('이벤트 리스너#1');
});
document.querySelector('.btn-warning').addEventListener('click', function() {
console.log('이벤트 리스너#2');
});위의 코드에 대한 결과는 다음과 같다.
이벤트 핸들러#2
이벤트 리스너#1
이벤트 리스너#2onchange
<form>의 입력값에서 요소의 값이 변경될 경우 onchange의 이벤트가 발생한다. text, radio, checkbox, select 등 대부분의 <input>에서 사용할 수 있다.
// 이벤트 대상 + 이벤트 트리거 + 이벤트 핸들러
document.querySelector('select[name="subject"]').onchange = function() {
console.log(this); // document.querySelector('select[name="subject"]')
console.log(this.value);
}
document.querySelector('[name="userid"]').onchange = function() {
console.log(this.value);
}
document.querySelector('[name="name"]').oninput = function() {
console.log(this.value);
}타이밍 이벤트
시간이 지나고 난 후 코드를 실행하도록 하는 하는 타이밍 이벤트가 있다.
setTimeout
setTimeout(함수, 밀리초 단위 시간): 정해진 시간이 지나면 한 번 실행
setInterval
setInterval(함수, 밀리초 단위 시간): 정해진 시간이 지나면 계속 실행
