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
Posted by codens