1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html lang="ko-KR"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>문서객체모델(DOM) API × JavaScript</title> <link href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css" onload="if(media!=='all')media='all'" rel="stylesheet" media="none"> <link rel="stylesheet" href="css/style.css"> </head> <body> <figure class="cloud is-slow is-big" aria-label="크고 느린 구름"></figure> <figure class="cloud is-normal is-regular" aria-label="보통 크기, 속도인 구름"></figure> <figure class="cloud is-fast is-small" aria-label="작고 빠른 구름"></figure> <figure id="boy" class="boy" aria-label="서있는 소년"></figure> <p class="info"> <kbd>space</kbd> 키를 누르세요. </p> <script src="js/dom-api.js"></script> </body> </html> | cs |
document 에서 id값으로 속성을 선택하는 경우
var element = document.getElementById(id);
주어진 ID와 일치하는 앨리먼트 속성을 찾는다. ID 요소는 대소문자를 구별하며 , 문서내에서 유일한 값이어야한다.
document 에서 TagName 으로 선택하는 방법
var elements = document.getElementsByTagName(name)
TagName에 해당하는 엘리먼트를 찾고 HTMLCollection 형태를 반환한다. (과거 브라우저 방식)
HTMLCollection 형태에 DOM 을접근하기 위해서는 item 메서드를 사용하거나 배열형태로 접근한다.
document 에서 클래스명으로 선택하는경우
var elements = document.getElementsByClassName(names);
클래스 이름을 가진 모든 자식 요소를 반환한다. (HTMLCollection 형태를 반환한다. )
클래스선택자를 사용하는 경우
var element = document.querySelector(selectors)
선택자에 해당하는 첫 번째 Element 를 반환한다. selectors 요소느 하나 이상의 선택자를 포함하는 DOMString 이어야한다.
참고원문
- getElementsByTagName()
- getElementById()
- getElementsByClassName()
- querySelector()
- querySelectorAll()
- 노드(Node)
- 요소 노드(Element Node)
- 노드리스트(NodeList)
패스트컴퍼스 프론트엔드 강의
'자바스크립트' 카테고리의 다른 글
| ES6 템플릿 문자열 (Template literals) (0) | 2019.01.09 |
|---|---|
| 자바스크립트 객체지향 프로그래밍 (0) | 2018.10.10 |
| 객체 생성방법 3가지 (0) | 2018.10.09 |
| jqGrid 환경설정하기 (0) | 2016.02.18 |
| 동적 colModel (0) | 2016.01.05 |
클라인STR