📒JS/⚡ver.0
section24~25-DOM이란~DOM 이벤트
4:Bee
2023. 3. 24. 14:40
728x90
문서 객체 모델(DOM) - Web API | MDN
문서 객체 모델(DOM)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로
developer.mozilla.org
| -getElementById | |
| -getElementByTagName & className | |
| -querySelector & querySelectorAll | -> All을 이용해서 배열로 지정할 수 있다. |
| -innerHTML, textContent & innerText | |
| -속성(Properties & methods)-Attributes | |
| -style, window.getCompuredStyle : 스타일 변경하기 | scripts는 무조건 아래에 있어야한다. 많은 영향을 받는다. |
Event - Web API | MDN
Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.
developer.mozilla.org
Manage Your Team’s Projects From Anywhere | Trello
Task management Use Trello to track, manage, complete, and bring tasks together like the pieces of a puzzle, and make your team’s projects a cohesive success every time.
trello.com
| <button onclick="">/<button ondblclick=""> | ||
|
btn.onclick = function () {};
|
addEventListner와의 차이는? | |
|
btn3.addEventListener('click', function () {});
|
1.하나의 버튼으로 여러 함수를 불러올 수 있다. 2. {once : true}라는 구문을 사용할 수 있다. |
|
|
btn3.addEventListener ('click',function(e) {~});
|
여기서 오는 event를 의미 정확히 e가 어떻게 작동하는지 잘모름. |
|
|
e.preventDefault();
|
||
|
doucment.createElement();
|
||
|
const usernameInput = tweetForm.elements.property{username};
|
elemensts의 사용법이 미숙함. tweetForm이라는 Form태그 안에서 elements를 찾는다. |
|
|
.append(~)
|
append의 node의 순서가 헷갈린다. |
728x90