코딩캠프/AI 웹개발 취업캠프
[AI 웹개발 취업캠프] 9Day - JS의 WebAPI(1)
고랑E
2023. 7. 27. 18:00
728x90
Web API의 Document 객체
Document 객체는 웹 페이지 그 자체를 의미합니다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작한다.
(HTML 요소들은 다 document 안에 있기 때문에)
Document 메소드
HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
HTML 요소의 선택
| 메소드 | 설명 |
| document.getElementsByTagName | 해당 태그 이름의 요소를 모두 선택함 |
| document.getElementById | 해당 아이디의 요소를 선택함 |
| document.getElementsByClassName | 해당 클래스에 속한 요소를 모두 선택함 |
| document.getElementsByName | 해당 name 속성값을 가지는 요소를 모두 선택함 |
| document.querySelectorAll | 해당 선택자로 선택되는 요소를 모두 선택함 |
HTML 요소의 생성
| 메소드 | 설명 |
| document.createElement | 지정된 HTML 요소를 생성함 |
| document.write | HTML 출력 스트림을 통해 텍스트를 출력함 |
HTML 이벤트 핸들러 추가
| 메소드 | 설명 |
| document.getElementById.onclick = function() { 코드 } | 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함 |
HTML 객체의 선택
| 메소드 | 설명 |
| document.body | <body>요소를 반환함 |
| document.cookie | HTML 문서의 쿠키를 반환함 |
| document.domain | HTML 문서가 위치한 서버의 도메인 네임을 반환함 |
| document.forms | <form>요소를 모두 반환함 |
| document.images | <img>요소를 모두 반환함 |
| document.links | href 속성을 가지는<area>요소와 <a>요소를 모두 반환함 |
| document.referrer | 링크되어 있는 문서의 URL를 반환함 |
| document.title | <title>요소를 반환함 |
| document.URL | HTML 문서의 완전한 URL 주소를 반환함 |
HTML DOM 의 Node
HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다.
HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.
| 노드 | 설명 |
| 문서 노드(document node) | HTML 문서 전체를 나타내는 노드 |
| 요소 노드(element node) | 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드 |
| 속성 노드(attribute node) | 모든 HTML 요ㅗ소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음 하지만 해당 요소 노드의 자식 노드에는 포함되지 않음 |
| 텍스트 노드(text node) | HTML 문서의 모든 텍스트 |
| 주석 노드(comment node) | HTML 몬서의 모든 주석 |
노드간의 관계를 이용하여 접근하는 방법
프로퍼티(properties)
- parentNode : 부모 노드
- childNodes : 자식 노드 리스트
- firstChild : 첫 번째 자식 노드
- lastChild : 마지막 자식 노드
- nextSibling : 다음 형제 노드
- previousSibling : 이전 형제 노드
노드 정보
- nodeName
- nodeValue
- nodeType
본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성되었습니다.