브라우저

요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElementById(id)를 이용해 접근할 수 있을뿐아니라 id 속성값을 그대로 딴 전역변수를 이용해 접근할 수도 있다.< div id='div-ab'>abcd< /div >docume

DOM트리의 노드들은 종류에 따라 각각 다른 프로퍼티를 지원한다. < a >태그에 대응하는 요소노드엔 링크 관련된 프로퍼티를, < input > 요소노드엔 입력 관련프로퍼티를 제공한다. DOM노드들은 공통 조상으로부터 만들어지기 때문에 노드종류는 다르더라도

innerHTML프로퍼티를 사용하면 요소노드안의 HTML을 문자열형태로 받아올 수 있고 요소노드안 HTML을 수정하는 것도 가능하다. < script >태그를 innerHTML로 넣으면 브라우저가 script태그를 해석하지 않기때문에 식별자로 인식되지 않는다.in

텍스트노드의 값을 얻거나 변경할때는 nodeValue 또는 data 프로퍼티를 이용하면 된다.주석 텍스트노드의 활용개발자들은 종종 정보나 지시사항을 주석으로 HTML에 삽입한다.이럴 때 data 프로퍼티 기능을 사용해 주석 노드의 내용을 읽고 삽입된 지시사항을 처리하면

hidden은 인라인코드로 쓸 수도 있고 자바스크립트에서도 쓸 수 있다.hidden은 기술적으로 style="display:none"와 동일하다.

document객체는 HTMLDocument클래스의 인스턴스다.HTMLDocument클래스는 어떤 상위클래스를 상속할까?HTMLDocument클래스 -> Document클래스 -> Node클래스 -> EventTarget클래스document.firstChild를 사용하

브라우저는 웹페이지를 만나면 HTML을 파싱하여 DOM트리를 위한 객체들을 생성한다. 파싱될때 태그에 있는 표준 HTML속성(attribute)들이 DOM객체의 프로퍼티(property)가 된다.태그 < body id="page" >가 있을 때, DOM객체는 b

태그 표준속성이 변하면 대응하는 DOM객체 프로퍼티는 자동으로 갱신된다. 몇몇 경우를 제외하고 DOM객체 프로퍼티가 변하면 태그 표준속성 역시 마찬가지로 갱신된다.

태그속성의 값의 타입은 문자열이다.DOM객체 프로퍼티 값의 타입은 여러가지다.boolean, string, number의 원시값을 가질 수 있다.스타일속성값의 타입은 문자열이지만 DOM객체 프로퍼티값의 타입은 객체다.a태그 속성은 '

비표준속성을 이용하여 요소노드의 스타일적용.html요소노드의 값을 서버로부터 받아와서 설정해야 할때 요소노의 비표준속성에 필드값을 넣고 서버로부터 받은 객체프로퍼티와 매핑하여 스타일을 설정할때 비표준속성을 사용할 수 있다.커스텀속성(비표준)을 CSS에 사용할 수 있다.

외부링크에만 스타일 설정하기외부링크는 조건1\. href에 ://가 포함되어 있어야 합니다.2\. http://internal.com으로 시작하지 않아야 합니다.document.querySelectorAll('a'); 컬렉션을 반복순회하면서 href속성값 또는

div태그와 CSS를 사용해 화면에 공지사항을 사용자에게 보여준다.브라우저가 HTML태그를 파싱하면서 div요소노드를 DOM트리에 추가한다.div태그없이 자바스크립트로 div요소노드를 생성하여 DOM에 추가함으로써 위와 같은 작업을 할 수 있다.DOM노드를 생성하는 2

node.remove() 사용하면 노드를 삭제할 수 있다.append, after등의 메소드로 이동도 가능하다.

elem.cloneNode(true)을 호출하면 elem의 ‘깊은’ 복제본이 만들어져 속성 전부와 자손 요소 전부가 복제된다. elem.cloneNode(false)을 호출하면 후손 노드 복사 없이 elem만 복제된다.

DocumentFragment는 여러 노드드로 구성된 그룹을 감싸 다른 곳으로 전달하게 해주는 컨테이너로 작동하며 DocumentFragment를 문서 어딘가에 삽입하면 DocumentFragment는 사라지고 DocumentFragment에 추가한 노드만 남는다.배열

요소노드의 스타일은 2가지 방법 , class속성은 CSS 속성과 연결되며 style속성은 html코드에 인라인으로 작성된다.자바스크립트로 2가지방법 모두 설정이 가능하지만 주로 className프로퍼티를 사용하며 style프로퍼티는 left, top같은 동적으로 계산

style프로퍼티는 style속성과 매핑되어있기때문에 요소노드가 class속성으로 스타일이 설정되었을때는 style프로퍼티로 스타일값을 알 수 가 없다.자바스크립트는 getComputedStyle(element, pseudo) 메소드를 지원하여 요소노드의 스타일값을 가

요소노드는 자신의 스타일에 설정된 크기로 화면에 자리를 차지하는데 기본적으로 html코드 위치에따라 다른 컨텐츠와 자리를 잡는다.자바스크립트는 요소의 너비나 높이 같은 기하 정보 관련 프로퍼티를 지원하며 요소를 움직이거나 특정 좌표에 위치시킬 때 사용할 수 있다.CSS

브라우저 창이 차지하는 너비와 높이를 어떻게 구할 수 있을까요? 스크롤 때문에 보이지 않는 영역을 포함하여 문서 전체가 차지하는 너비와 높이는 어떻게 구할 수 있을까요? 자바스크립트를 사용해서 페이지를 스크롤 할 수 있을까요?위와 같은 물음에 답을 주는 루트문서 요소인

자바스크립트가 요소노드에 사용하는 좌표시스템창기준 : clientX/clientYposition:fixed와 유사하게 창(window) 맨 위 왼쪽 모서리를 기준으로 좌표를 계산문서기준 : pageX/pageYposition:absolute와 유사하게 문서 맨 위 왼쪽

Element.append(node or text);익스플로러 지원안함Node.appendChild(node);차이Element.append() 를 사용하면 문자열 객체를 추가 할 수도 있지만 Node.appendChild() 는 노드 객체 만 허용합니다.Element

브라우저는 창내에서 발생하는 모든 이벤트를 관장한다.마우스이벤트 : click, contextmenu, mouseover ...폼요소이벤트 : submit, focus ...키보드이벤트 : keydown, keyup ... 문서이벤트 : DOMContentLoaded

DOM트리내 요소노드들은 중첩구조를 가지기때문에 이벤트또한 중첩발생되는것은 당연한 현상이다.예를들어 document.body요소노드 내에 div요소노드가 있을때 div에 클릭이밴트가 발생했다면 div를 감싸고 있는 document.body 또한 클릭이벤트가 발생해야 한

표준 DOM이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다.캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계버블링 단계 – 이벤트가 상위 요소로 전파되는 단계이벤트가 발생하면 캡처링부터 시작하여 이벤트가 발생한

캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있다.유사한 내용의 핸들러를 여러개의 요소노드마다 할당하는 것은 중복개념이므로 피할 수 있다면 피하는 것이 유지보수에 좋다.상위요소에만 핸들러를 할당하여 하

상당수 이벤트는 발생 즉시 브라우저에 의해 특정 동작을 자동으로 수행하도록 되어있다.링크를 클릭하면 해당 URL로 이동폼전송버튼을 클릭하면 서버에 폼이 전송마우스버튼을 누른 채로 글자위에서 커서를 움직이면 글자가 선택그런데 어떨 때는 이러한 정해진 브라우저 기본동작 대

자바스크립트를 사용하면 핸들러를 할당할 수 있을 뿐만 아니라 이벤트를 직접 만들 수도 있다.Event의 생성자type – 이벤트 타입을 나타내는 문자열로 "click"같은 내장 이벤트, "my-event" 같은 커스텀 이벤트가 올 수도 있다.optionsbubbles:

mouseover이벤트event.target – 마우스가 오버된 요소노드event.relatedTarget – 오버되기 이전 요소노드(relatedTarget → target).mouseout 이벤트event.target – 마우스가 떠나기전 요소노드event.rela

폼과 요소 탐색하기폼은 특수한 컬렉션인 document.forms의 구성원이다.웹페이지내에 폼이 여러개일 수 있다.document.forms는 이름과 순서가 있는 '기명컬렉션(named collection)'이다. 내부 form controll들은 name/value

html 내부에는 여러개의 form들이 있을 수 있기 때문에 document.forms 로 제공된다.let f:HTMLCollectionOf = document.forms;HTMLCollection 요소는 length프로퍼티, item( number index ),

focus와 blur이벤트는 버블링되지 않는다.form요소에 focus, blur이벤트를 할당해도 버블링되지 않기때문에 이벤트위임을 사용할 수 없다.캡쳐링 이벤트위임form에서 focus핸들러를 할당하고 ev.target으로 처리를 하면 이벤트위임과 같은 효과를 내는

change이벤트는 변경이 끝나면 발생하는 이벤트다. 변경이 생길때마다 발생하는 이벤트가 아님을 유의하자.텍스트입력 요소노드는 변경이 끝나고 포커스를 잃을때 change이벤트가 발생한다.input이벤트는 값이 변경될때마다 발생한다. 마우스를 사용하여 글자를 붙여 넣거

submit이벤트는 form이 서버로 전송될때 발생하는 이벤트로서 form을 전송하는 방법을 알아보자.< input type="submit" >이나 < input type="image" > 클릭하기텍스트입력 요소노드에서 Enter키 누르기< button

DOMContentLoaded이벤트브라우저가 HTML을 전부 읽고 DOM트리 구성을 완료했을때 발생하며 이미지파일이나 스타일시트등의 자원은 기다리지 않는다.DOM노드에 핸들러를 할당할때 사용document요소노드에 on프로퍼티로 사용할 수 없다.load이벤트DOM트리

defer본문내에 있는 스크립트는 DOM트리구성을 멈추게한다.defer지연스크립트는 DOMContentLoaded이벤트 발생 바로전에 실행된다.defer스크립트에 DOM구성과 관련없는 스크립트를 넣을 필요가 없다.defer스크립트가 여러개일 경우 선언한 순서대로 실행된

MutationObserver는 DOM요소노드를 관찰하고 변경사항을 감지하여 콜백을 호출하는 객체다.config객체childList – changes in the direct children of node,subtree – in all descendants of no

Rangerange.setEnd(p, 2) p요소노드의 2번 바로앞까지를 설정Selection

이벤트 루프자바스크립트 엔진이 수행하는 메인루프작업이며 태스크가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우엔 잠드는, 끊임없이 돌아가는 자바스크립트 루프다.매크로태스크 큐외부스크립트 < script src="..." >가 로