HTML DOM Element Object 설명
Properties and Methods
//======================================================
https://www.w3schools.com/jsref/dom_obj_all.asp
The HTML DOM Element Object
Properties and Methods
//
노드(Node) : 태그 , 텍스트
요소(Element) : 태그 만
//
accessKey - 단축키 설정
addEventListener() - 이벤트 추가
appendChild() - 자식노드 추가
attributes - 요소가 가진 속성 갯수 조회
blur() - 요소 제거
childElementCount - 자식 요소 갯수
childNodes - 자식 노드의 집합 (text , comment nodes 포함)
children - 자식 요소의 집합 (text , comment nodes 제외)
classList - 클래스 이름의 배열
className - 클래스 이름 반환 or 설정
click() - 마우스 클릭 동작 시뮬
clientWidth - 넓이 ( padding 포함)
clientHeight - 높이 ( padding 포함)
clientLeft - 좌측 경계선(border)의 넓이
clientTop - 상단 경계선(border)의 넓이
cloneNode() - 요소 복제
compareDocumentPosition() - 두 요소의 위치를 비교
contains() - 노드끼리의 포함관계
contentEditable - 편집가능 상태 조회 및 설정
dir - 요소 표시 방향 설정
exitFullscreen() - 전체화면 취소
focus() - 요소에 포커싱
getAttribute() - 해당 속성을 리턴
getAttributeNode() - 해당 속성의 노드를 리턴
getBoundingClientRect() - 요소의 크기 리턴
getElementsByClassName() - 클래스 이름으로 요소 조회
getElementsByTagName() - 태그 이름으로 요소 조회
hasAttribute() 해당 속성을 가지고 있나?
hasAttributes() 속성을 1개 이상 가지고 있나?
hasChildNodes() 자식 노드를 가지고 있나?
id - id 속성
innerHTML - 요소 안에 있는 모든 HTML
innerText - 요소 안에 있는 text 만
insertAdjacentElement() - 요소를 삽입
insertAdjacentHTML() - HTML을 삽입
insertAdjacentText() - text를 삽입
insertBefore() - 자식노드를 삽입
isContentEditable - 편집 가능한가?
isDefaultNamespace() - Default Namespace 인가?
https://stackoverflow.com/questions/34407468/what-is-the-default-namespace-for-html-html5
namespaceURI - 네임스페이스 URI 리턴
isEqualNode() - 두 요소가 동일한 값인가?
isSameNode() - 두 요소가 같은 노드인가?
isSupported() - 동작 안함 (지원 종료)
lang - html 태그의 언어 속성
//
firstChild - 첫번째 자식 노드 ( 주의! 처음에 빈칸이 있으면 'undefined'가 리턴)
firstElementChild - 첫번째 자식 요소 (텍스트 노드는 무시)
lastChild - 마지막 자식 노드 ( 주의! 마지막에 빈칸이 있으면 'undefined'가 리턴)
lastElementChild - 마지막 자식 노드( text 제외?)
parentNode - 요소의 부모 노드
parentElement - 요소의 부모 요소
nextSibling - 현재 노드의 다음 노드(같은 레벨)
nextElementSibling - 현재 노드의 다음 요소(같은 레벨)
previousSibling - 현재 노드의 이전 노드(같은 레벨)
previousElementSibling - 현재 요소의 이전 요소(같은 레벨)
//
nodeName - 태그 이름
nodeType - 노드 타입
1 = element node
2 = attribute node (사용 중단)
3 = text node
8 = comment node (주석 <!-- --> )
9 = Document node.
10 = DocumentType node (예) <!DOCTYPE html> for HTML5 documents.
11 = DocumentFragment node
nodeValue - 노드 값, text node인경우만 값이 반환
element.childNodes[0].nodeValue
normalize() - text node를 합침
offsetHeight - 요소의 높이( padding, border , scrollbar 포함)
offsetWidth - 요소의 넓이( padding, border , scrollbar 포함)
offsetParent - 요소의 offset container(상위 포함 요소)를 반환
offsetLeft - offsetParent에서 좌측 간격
offsetTop - offsetParent에서 상단 간격
ownerDocument - 요소의 상위 document node 를 반환
querySelector() - CSS selector 로 검색된 첫번째 자식 요소
querySelectorAll() - CSS selector 로 검색된 모든 자식 요소
- CSS 선택자(selector)
https://www.w3schools.com/csSref/css_selectors.asp
removeAttribute() - 속성 제거
removeAttributeNode() - 속성 노드 제거, 반환값 있음
setAttribute() - 속성 설정
setAttributeNode() - 속성 노드 설정
removeChild() - 자식 노드 제거
removeEventListener() - 이벤트 핸들러 제거
replaceChild() - 자식 요소 제거
requestFullscreen() - 전체 화면 모드
scrollHeight - 요소의 전체 높이 ( padding 포함)
scrollWidth - 요소의 전체 넓이 ( padding 포함)
scrollIntoView() - 요소의 맨 처음으로 스크롤
scrollLeft - 좌우 스크롤된 정보 조회, 설정
scrollTop - 상하 스크롤된 정보 조회, 설정
style - style 속성 조회, 설정
tabIndex - 탭 이동 순성 설정
tagName - 태그 이름
textContent - text 설정
title - title 속성 설정
toString() - 요소를 문자열로 변환
'Code > Web' 카테고리의 다른 글
| [Bootstrap] 부트스트랩 정보 (0) | 2019.01.24 |
|---|---|
| nginx 웹서버 리다이렉트 설정 (0) | 2019.01.20 |
| Font Awesome 사용법 (0) | 2018.12.19 |
| Visual studio code 사용법 (0) | 2018.11.13 |
| [W3School] Bootstrap 정리 (0) | 2018.11.08 |
