-JavaScript DOM
HTML DOM로 자바 스크립트는 HTML document의 모든 element를 접근하여 바꿀 수 있음
THE HTML DOM (Documen Object Model)
웹 페이지 로드 -> 브라우저는 페이지의 DOM을 생성
What is the HTML DOM?
; HTML DOM은 HTML elements를 get, change, add or delete 에 대한 것
-JavaScript - HTML DOM Methods
HTML DOM 메소드는 perform 할 수 있는 HTML Elements 에 대한 action
HTML DOM propeties는 set or change 할 수 있는 HTML Elements의 값
The DOM Programming Interface : 각 객체의 properties와 methods
getElementById 는 메소드, innerHTML은 property
getElementById : element 찾기 위해 id="demo" 를 사용함
innerHTML Property : element의 content를 얻기 위한 쉬운 방법은 innerHTML property를 사용하는 것
, HTML element 의 값을 얻고 변경하기위해 사용됨. <html>, <body> 포함
-JavaScript HTML DOM Document
The HTML DOM document object is the owner of all other objects in your web page.
document object는 웹 페이지를 나타냄.
HTML page에서 어떠한 element를 액세스 하기 위해서는, document object 먼저 접근하는 것 부터
Example of Finding HTML Elements
Chanding HTML Elements
Adding and Deleting Elements
Finding HTML Objects
PropertyDescriptionDOM
| document.anchors | Returns all <a> elements that have a name attribute | 1 |
| document.applets | Returns all <applet> elements (Deprecated in HTML5) | 1 |
| document.baseURI | Returns the absolute base URI of the document | 3 |
| document.body | Returns the <body> element | 1 |
| document.cookie | Returns the document's cookie | 1 |
| document.doctype | Returns the document's doctype | 3 |
| document.documentElement | Returns the <html> element | 3 |
| document.documentMode | Returns the mode used by the browser | 3 |
| document.documentURI | Returns the URI of the document | 3 |
| document.domain | Returns the domain name of the document server | 1 |
| document.domConfig | Obsolete. Returns the DOM configuration | 3 |
| document.embeds | Returns all <embed> elements | 3 |
| document.forms | Returns all <form> elements | 1 |
| document.head | Returns the <head> element | 3 |
| document.images | Returns all <img> elements | 1 |
| document.implementation | Returns the DOM implementation | 3 |
| document.inputEncoding | Returns the document's encoding (character set) | 3 |
| document.lastModified | Returns the date and time the document was updated | 3 |
| document.links | Returns all <area> and <a> elements that have a href attribute | 1 |
| document.readyState | Returns the (loading) status of the document | 3 |
| document.referrer | Returns the URI of the referrer (the linking document) | 1 |
| document.scripts | Returns all <script> elements | 3 |
| document.strictErrorChecking | Returns if error checking is enforced | 3 |
| document.title | Returns the <title> element | 1 |
| document.URL | Returns the complete URL of the document | 1 |
-JavaScript HTML DOM Elements
HTML 페이지에서 elements 를 찾고 접근하는 방법을 알려줌
element찾는 여러가지 방법
- Finding HTML elements by id
- Finding HTML elements by tag name
- Finding HTML elements by class name
- Finding HTML elements by CSS selectors
- Finding HTML elements by HTML object collections
- Finding HTML elements by id
- Finding HTML elements by tag name
- Finding HTML elements by class name
- Finding HTML elements by CSS selectors
- Finding HTML elements by HTML object collections
-JavaScript HTMl DOM - Changing HTML : HTML elements의 값을 바꿈
JavaScript는 dynamic HTML content를 만들 수 있음 -> Date: Wed Jan 13 2021 23:34:41 GMT+0900 (대한민국 표준시)
document.write()는 값을 HTML output stream으로 바로 내보냄
changing HTML Content : content를 수정하는 가장 쉬운 방법은 innerHTML property 사용
Changing the Value of an Attribute
-JavaScript HTML DOM -changing CSS
-JavaScript HTML DOM Events
이벤트 종류
- When a user clicks the mouse
- When a web page has loaded
- When an image has been loaded
- When the mouse moves over an element
- When an input field is changed
- When an HTML form is submitted
- When a user strokes a key
-JavaScript HTML DOM EventListener
addEventListener() method : 지정된 요소에게 이벤트 핸들러, 존재하는 이벤트 핸들러를 오버라이팅하지 않고 요소에게 이벤트 핸들러.
한가지 요소에 여러가지 이벤트 핸들러 추가가능
'Web Developement' 카테고리의 다른 글
| 9-2. JavaScript로 AJAX 구현하는 간단한 예제 (0) | 2021.01.15 |
|---|---|
| 9-1. JavaScript BOM ~ JavaScript AJAX (0) | 2021.01.15 |
| 7. JavaScript (2) (0) | 2021.01.13 |
| 6. JavaScript 정리 (0) | 2021.01.10 |
| 5. CSS 정리 (2) (0) | 2021.01.10 |