요소 (element)
웹 문서의 각 HTML 요소와 속성에 접근할 수 있도록 하는 메서드
| 요소 접근 메서드 | 설명 |
|---|---|
| getElementById() | id 속성값으로 특정 값을 갖는 요소 반환 |
| getElementsByTagName() | 특정 태그(tag)명을 갖는 모든 요소를 반환 |
| getElementsByClassName() | class 속성값으로 특정 값을 갖는 모든 요소 반환 |
| getElementsByName | name 속성값으로 특정 값을 갖는 모든 요소 반환 |
| querySelector() | 특정 CSS 선택자 형식과 일치하는 첫 번째 요소를 반환 |
| querySelectorAll() | 특정 CSS 선택자 형식과 일치하는 모든 요소를 반환 |
요소조작
요소의 내용 확인 및 수정
- textContent - Node의 기능
요소 노드의 모든 텍스트에 접근한다
innerText
요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근한다
innnerHTML
요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근한다
텍스트에 관한 접근자 프로퍼티
innerText 차이점
- nodeValue - Node의 기능
텍스트 노드 전용 접근자 프로퍼티 - 다른 노드에서는 null 반환
- className - Element의 기능
클래스에 관한 접근자 프로퍼티 - 문자열로 다룸
- classList - Element의 기능
클래스에 관한 읽기 전용 프로퍼티
<노드>.classList.add("class 속성값"); // 추가
<노드>.classList.remove("class 속성값"); // 삭제
<노드>.classList.toggle("class 속성값"); // 추가와 삭제 반복
- style - HTMLElement의 기능
스타일에 관한 읽기 전용 접근자 프로퍼티
-
getComputedStyle - 💡 window의 기능
인자로 전달받은 요소의 계산된 CSS 속성 정보 반환 -
getAttribute, setAttribute - Element의 기능
요소들의 속성에 관한 메서드
<노드>.getAttribute("속성명"); - 속성값을 가져온다
<노드>.setAttribute("속성명", "속성값"); - 속성값을 설정한다
<노드>.removeAttribute("속성명"); - 속성값을 삭제한다
- value, checked - 인풋 요소들의 기능
인풋 값에 대한 접근자 프로퍼티
요소 제거
<부모 노드>.removeChild(<자식 노드>) - Node의 기능
인자로 주어진 자식 노드를 제거 - 자식 노드이어야 동작
요소 생성 및 추가
createElement - Document의 기능
인자로 주어진 태그명의 Element 요소 생성하여 반환
createTextNode() - 텍스트 노드를 생성한다
createAttribute() - 속송 노드를 생성한다
<기준 노드>.appendChild(<자식노드>) - Node의 기능
인자로 주어진 요소를 자식요소 중 마지막 위치로 이어붙임
<기준 노드>.setAttributeNode(속성 노드>) - 기준 노드에서 속성 노드를 연결한다
