JS

[JS] Event / 버블링 / 캡쳐링

이벤트 마우스 이벤트(click, mouseover, mouseout, mousemove ...) 폼 요소 이벤트(submit, focus) 키보드 이벤트(keydown, keyup) 문서 이벤트 등의 DOM 이벤트 들이 있는데 이러한 이벤트가 발생했을 경우 실행되는 함수를 이벤트 핸들러라고 하며 핸들러를 할당하는 방법은 다양하다. 1. HTML 속성 HTML 안의 onevent 속성에 이벤트 핸들러 할당하는 방법 Ex. 등 간단한 코드는 그냥 작성하기도 하지만 코드가 길다면 별도의 함수를 만들고 이를 호출한다. 클릭해보세요 마우스를 올려보세요 2. DOM 프로퍼티 요소 객체가 가지고 있는 onevent 속성에 이벤트 핸들러를 연결 하는 방법 Ex. element.onclick = 이벤트핸들러(함수); ..

[JS] 문서 수정하기

문서 수정 노드 생성 document.createElement(tag) : 태그 이름을 사용해 새로운 요소를 만든다. document.createTextNode(value) : 텍스트 노드를 만든다. (잘 쓰이지 않음) element.cloneNode(deep) : 요소를 복제함. deep == true 일 경우 모든 자손 요소도 복제한다. 노드 삽입, 삭제 node.append(노드나 문자열) : node 끝에 노드나 문자열을 삽입 node.prepend(노드나 문자열) : node 맨 앞에 노드나 문자열을 삽입 node.before(노드나 문자열) : node 이전에 노드나 문자열을 삽입 node.after(노드나 문자열) : node 이후에 노드나 문자열을 삽입 node.replaceWith(노드나..

[JS] DOM / 요소검색 / 주요 노드 프로퍼티

DOM (Document Object Model) HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것 모든 노드 객체에 접근할 수 있는 요소와 메소드를 제공한다. HTML에 있는 태그를 구조화(트리) 했을 때 각각의 태그가 노드이다. 문서객체 - HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것 - 모든 노드객체에 접근할 수 있는 요소와 메소드를 제공 노드 - HTML에 있는 태그를 구조화(트리)하였을 때 각각의 태그가 노드 elements node와 textnode - 요소노드 : 태그 그 자체를 의미 - 텍스트노드 : 태그에 기록되어 있는 문자 -> 텍스트 노드를 가지는 태그(h?,p 등)와 가지지않는 태그(img등)가 있다. DOM 탐색하기 1. 자식 노드 ..