JavaScript/Interactive JavaScript (21) 썸네일형 리스트형 [JavaScript] 태그 이름으로 태그 선택하기 document.getElementsByTagName('태그이름') : 태그이름으로 태그를 선택하는 메소드 const btns = document.getElementsByTagName('button'); 태그 이름으로 요소를 찾는 경우에, 여러 태그를 선택할수 있으므로 반드시 Elements 로 작성해 주어야 한다. 또한 실행결과 역시 HTMLCollction 으로 유사배열을 리턴함. const btns = document.getElementsByTagName('button'); const allTags = document.getElementsByTagName('*'); 이처럼 '*' 을 입력하면 모든 태그를 선택할수도 있음. [JavaScript] class 로 태그 선택하기 자바스크립트에서 여러요소의 값을 한번에 선택할 때, 같은 class 를 가진 태그를 선택하는 방법이다. document.getElementsByClassName('class'); (여러요소를 선택하므로 Elements 라고 작성해야한다.) /* HTML */ const myTags1 = document.getElementsByClassName('color-btn'); console.log(myTags1); console.log(myTags1[1]); // 특정 인덱스 번호에 접근 console.log(myTags1.length); // length property 사용 가능 for (let tag of myTags1) { console.log(tag); } 배열이 아니기 때문에 배열의 메소드는 사용할 수.. [JavaScript] id로 태그 선택하기 어떤 태그를 움직이거나, 사용자의 마우스 속성에 반응하도록 하려면 내가 다루고자하는 태그를 선택해야 한다. Id 로 태그를 선택하는 것은 자바스크립트로 원하는 태그를 선택하는 방법중 하나로 , 고유한 id 를 가진 하나의 태그를 선택할 때 유용하다. document.getElementById(); document.getElementById('id'); const myTag1 = document.getElementById('myNumber'); console.log(myTag1); const myTag2 = document.getElementById('btns'); console.log(myTag2); const myTag3 = document.getElementById('codeit'); console... [JavaScript] input 태그 [input 태그] 이벤트 타입 설명 focusin 요소에 포커스가 되는 순간 focusout 요소에 포커스가 빠져나가는 순간 focus 요소에 포커스가 되는 순간 (버블링이 일어나지 않음) blur 요소에 포커스가 빠져나가는 순간 (버블링이 일어나지 않음) change 입력된 값이 바뀌는 순간 input 값이 입력되는 순간 select 입력 양식의 하나가 선택되는 순간 submit 폼을 전송하는 순간 [JavaScript] 마우스 이벤트 1. MouseEvent.button 마우스 이벤트 객체의 버튼 프로퍼티를 활용하면, 어떤 버튼을 눌러서 일어난 이벤트 인지 확인 가능 마우스 버튼을 눌렀을 때 일어난 이벤트에 대해서 어떤 버튼을 눌러서 일어난 이벤 값 내용 0 마우스 왼쪽 버튼 1 마우스 휠 2 마우스 오른쪽 버튼 3 X1 (일반적으로 브라우저 뒤로 가기 버튼) 4 X2 (일반적으로 브라우저 앞으로 가기 버튼) mouseenter, mouseleave, mouseover, mouseout, mousemove 처럼 마우스 이동과 관련된 이벤트는 값이 null 이나 undefined가 아니라 0임. 2.MouseEvent.type 이벤트 타입 설명 mousedown 마우스 버튼을 누르는 순간 mouseup 마우스 버튼을 눌렀다 떼는 순간 .. [JavaScript] 브라우저 기본동작 및 제한 브라우저 기본동작 : 브라우저에는 각 태그별, 상황별로 기본적으로 약속한 동작이 있음. 예 ) 마우스 오른쪽 클릭시 메뉴 창이 뜸 const link = document.querySelector('#link'); const checkbox = document.querySelector('#checkbox'); const input = document.querySelector('#input'); const text = document.querySelector('#text'); link.addEventListener('click', function(e) { e.preventDefault(); // 브라우저의 기본동작을 제한하는 메소드 alert('지금은 이동할 수 없습니다.'); }); input.addEve.. [JavaScript] 스타일 다루기 1. style 프로퍼티 활용하기 : element.style.styleName = 'value'; const today = document.querySelector('#today'); const tomorrow = document.querySelector('#tomorrow'); today.children[0].style.textDecoration = 'line-through'; today.children[0].style.backgroundColor = '#DDDDDD'; today.children[2].style.textDecoration = 'line-through'; today.children[2].style.backgroundColor = '#DDDDDD'; 프로퍼티에 styleName을 넣을 .. [JavaScript] HTML 속성 비표준인 HTML 속성도 다룰 수 있는 메소드 1. 속성에 접근하기 : element.getAttribute('속성') // HTML 속성 (HTML attribute) const tomorrow = document.querySelector('#tomorrow'); const item = tomorrow.firstElementChild; const link = item.firstElementChild; // elem.getAttribute('속성'): 속성에 접근하기 console.log(tomorrow.getAttribute('href')); console.log(item.getAttribute('class')); 2. 속성 추가하기 : element.setAttribute('속성', '값') // H.. 이전 1 2 3 다음