JavaScript
-
DOM요소에 접근하고 속성 가져오기JavaScript/DOM 2022. 11. 23. 20:09
HTMl 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변한다 노드 객체들로 구성된 트리 자료 구조를 DOM이라 한다. 노드 객체의 트리로 구조화되어 있기 대문에 DOM을 DOM트리라고 부르기도 한다 Hello div => 시작태그 (start tag) class => 어트리뷰트 이름(attritute name) gretting => 어트리뷰트 값(attribute value) Hello => 콘텐츠(contents) => 종료태그(end tag) 노드의 종류 12개 요소노드(Element Node) - HTML구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다 - 텍스트노드는 요소노드의 자식 노드, 어튜리뷰트 노드는 요소노드와 연결되어 있기 때문에..
-
스타일(css style)다루기JavaScript/DOM 2022. 11. 22. 08:33
두가지의 방법 1. 스타일 프로퍼티(style property)를 사용해서 요소를 직접 수정 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'; 문제점?! 스타일태그에 직접 적용되기 때문에 style우선순위가 생기기도 하고 여러코드에 적용할때는 비슷한 코드를 적용해서 불필요하게 된다 2. css파일을 만들어 원하는 스타일의 클래스를 만들어놓고 JS로 클래스 속성을 다루..
-
속성(Attribute)와 프러퍼티(Property)JavaScript/DOM 2022. 11. 21. 18:57
- 속성 — HTML 안에 쓰임 - 프로퍼티 — DOM 객체 안에 쓰임 - 브라우저(browser)는 웹페이지를 만나면 HTML을 읽어(파싱(parsing)) DOM 객체를 생성한다 (즉, 브라우저(browser)가 HTML문서를 해석할 때 DOM객체가 만들어진다) - HTML태그들이 가지고 있는 속성들은 요소노드의 프로퍼티(property)가 된다 - 하지만 모든 속성들의 요소들의 프로퍼티(property)가 되지는 않는다 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 // HTML 속성 (HTML attribute) const tomorrow = document.querySelector('#tomorrow'); con..
-
DOM(Document Object Model)이란?!JavaScript/DOM 2022. 11. 19. 17:56
DOM(Document Object Model)이란?! - XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 - DOM을 활용하면 JS로 HTML태그를 자유롭게 활용할 수 있다 - JS를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 (웹 문서를 제어할 수 있도록 해 주는 것) DOM 종류 1. Core DOM : 모든 문서 타입을 위한 DOM 모델 2. HTML DOM : HTML 문서를 위한 DOM 모델 3. XML DOM : XML 문서를 위한 DOM 모델 HTML DOM 구조 HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보인다 노드 트리는 ..
-
setTimeout과 setInterval을 이용한 호출 스케줄링JavaScript/Basic 2022. 11. 18. 08:10
호출 스케줄링(scheduling a call) - 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것 - setTimeout, setInterval 두가지의 방법이 있다 setTimeout - 일정 시간이 지난 후에 함수를 실행하는 방법 - Syntax setTimeout(func|code, [delay], [arg1], [arg2], ...) function sayHi() { alert('안녕하세요.'); } setTimeout(sayHi, 1000); // arg 추가해보깅 function sayHi(who, phrase){ alert(who + "님" + phrase); } setTimeout(sayHi, 1000, "연아", "좋은하루보내세요!"); - 아래처럼 하면은 s..
-
이벤트 전파 흐름 파악하기JavaScript/EventHandler 2022. 11. 12. 18:50
이벤트 흐름에는 3가지 단계 1. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계 2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계( 가장 처음 이벤트 핸들러가 동작하게 되는 순간) 3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 오늘 할 일 자바스크립트 공부 독서 캡쳐링 단계(Top-to-Bottom) - window객체 -> document 객체 -> html태그 -> body태그 -> div태그 -> ol태그 -> li태그 버블링 단계(Bottom-to-Top) - li 태그 -> ol태그 -> div태그 -> body태그 -> html태그 -> document 객체 -> window객체 프로세스(Process) - 이벤트가 발생하면 가장 먼저 window 객체에서부터 target..
-
이벤트 등록 & 이벤트 삭제JavaScript/EventHandler 2022. 11. 10. 11:13
이벤트 등록 1. JavaScript에 직접 등록하기 - 자바스크립트 코드를 사용해 DOM엘리먼트 즉, 특정 HTML 태그를 선택해 속성으로 이벤트 발생시 호출될 콜백 메서드를 정의하는 형식 let btn = document.guerySelector('#myBtn'); btn.onclick = function(){ console.log("안녕세상아!") } Click 2. HTML태그의 속성에 이벤트 핸들러를 직접기술하는 방식 클릭해주세욤 클릭해주세욤 3. addEventListener를 사용해 기술하는 방식 let btn = document.querySelector('#myBtn'); function event1(){ console.log("안녕!!"); } function event2(){ conso..