Frontend (278) 썸네일형 리스트형 [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.. [JavaScript] 요소 노드 추가 / 이동 / 삭제 1. 요소 노드 추가 const today = document.querySelector('#today'); today.innerHTML = '처음' + today.innerHTML; today.innerHTML = today.innerHTML + '마지막'; today.outerHTML = '이전' + today.outerHTML; const newToday = document.querySelector('#today'); newToday.outerHTML = newToday.outerHTML + '다음'; // 요소 노드 추가하기 const tomorrow = document.querySelector('#tomorrow'); // 1. 요소 노드 만들기: document.createElement('태그이.. [JavaScript] DOM 트리 DOM트리 HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리라고 한다. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현함. 요소노드(Element Node) : 태그를 표현하는 노드 텍스트노드(TextNode) : 문자를 표현하는 노드로 일반적으로 요소노드의 자식요소가 되며 자식요소를 가질 수 없음. 요소노드에 대한 이동 프로퍼티 프로퍼티 유형 결과 element.children 자식 요소 노드 element의 자식 요소 모음(HTMLCollection) element.firstElementChild 자식 요소 노드 element의 첫 번째 자식 요소 하나 element.lastElementChild 자식 요소 노드 element의 마지막 자식 요소 하.. [JavaScript] 이벤트 핸들링, 이벤트 핸들러 이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ... 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 함. [이벤트 핸들러를 등록하는 2가지 방법] 1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록 const btn = document.querySelector('#myBtn'); btn.onclick = function() { console.log('Hello Codeit!'); }; 2. HTML 태그의 onclick 속성에 바로 표시 (권장되지 않음) 클릭! 예) 1의 버튼클릭 이벤트 정답일.. [JavaScript] 태그 선택하기 메소드 의미 결과 document.getElementById('id') HTML id속성으로 태그 선택하기 id에 해당하는 태그 하나 document.getElementsByClassName('class') HTML class속성으로 태그 선택하기 class에 해당하는 태그 모음(HTMLCollection) document.getElementsByTagName('tag') HTML 태그 이름으로 태그 선택하기 tag에 해당하는 태그 모음(HTMLCollection) document.querySelector('css') css 선택자로 태그 선택하기 css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 document.querySelectorAll('css') css 선택자로 태그 선택하기 css 선택.. [JavaScript] 다양한 이벤트 [이벤트 등록] 1. 프로퍼티에 함수 적용 let btn = document.querySelector('#myBtn'); // btn.onclick = function () { // console.log('Hi Codeit!'); // }; onclick 프로퍼티에 바로 함수를 적용하면 여러개의 이벤트를 적용할 수 없다는 단점이 있음 (권장되지 않음) 2. elem.addEventListener(event, handler) let btn = document.querySelector('#myBtn'); function event1() { console.log('Hi Codeit!'); } function event2() { console.log('Hi again!'); } // elem.addEventLi.. 이전 1 ··· 31 32 33 34 35 다음
