HTML DOM 노드
HTML DOM에서 (Document Object Model) , 모든 노드는 다음과 같습니다
- 문서 자체는 문서 노드입니다
- 모든 HTML 요소 요소 노드입니다
- 모든 HTML 속성은 속성 노드입니다
- HTML 요소 내부의 텍스트 텍스트 노드는
- 댓글 댓글 노드입니다
요소 객체
HTML DOM에서 요소 객체는 HTML 요소를 나타냅니다.
요소 객체 유형의 요소 노드, 텍스트 노드, 또는 주석 노드의 자식 노드를 가질 수 있습니다.
있는 NodeList 객체는 자식 노드의 HTML 요소의 모음과 같은 노드의 목록을 나타냅니다.
요소는 속성을 가질 수있다. 속성은 속성 노드이다 (See next chapter) .
브라우저 지원
| 목적 | |||||
|---|---|---|---|---|---|
| Element | 예 | 예 | 예 | 예 | 예 |
| NodeList | 예 | 예 | 예 | 예 | 예 |
요소 객체와 노드 목록 개체는 모든 주요 브라우저에서 지원됩니다.
속성 및 메서드
다음 속성과 메서드는 모든 HTML 요소에서 사용할 수 있습니다 :
| 재산권 / 방법 | 기술 |
|---|---|
| element .accessKey | 설정하거나 반환 accesskey 요소의 속성을 |
| element . addEventListener() | 지정된 요소에 이벤트 핸들러를 연결합니다 |
| element . appendChild() | 마지막 자식 노드로, 요소에, 새 자식 노드를 추가합니다 |
| element .attributes | 요소의 속성 NamedNodeMap입니다을 반환 |
| element . blur() | 요소에서 포커스를 제거합니다 |
| element .childElementCount | 요소가있다 하위 요소의 수를 돌려줍니다 |
| element .childNodes | (텍스트 및 주석 노드 포함) 요소의 자식 노드 컬렉션을 반환 |
| element .children | 요소의 자식 요소 컬렉션을 반환합니다 (텍스트 및 주석 노드를 제외) |
| element .classList | 클래스 반환 name(s) 요소의를 |
| element .ClassName과 | 설정 또는 값 반환 class 요소의 속성을 |
| element . click() | 요소에 마우스 클릭을 시뮬레이션 |
| element .clientHeight | 패딩을 포함하여, 요소의 높이를 돌려줍니다 |
| element .clientLeft | 요소의 왼쪽 테두리의 폭을 돌려줍니다 |
| element .clientTop | 요소의 위쪽 테두리의 폭을 돌려줍니다 |
| element .clientWidth | 패딩을 포함하여, 요소의 폭을 돌려줍니다 |
| element . cloneNode() | 클론 요소 |
| element . compareDocumentPosition() | 두 요소의 문서 위치를 비교 |
| element . contains() | 노드는 노드의 하위 노드 인 경우는 true, 그렇지 않은 경우는 false를 돌려줍니다 |
| element .contentEditable | 설정하거나 반환 요소의 내용을 편집 할 수 있는지 여부 |
| element .DIR | 설정하거나 값 반환 dir 요소의 속성을 |
| element .firstChild | 요소의 첫 번째 자식 노드를 반환 |
| element .firstElementChild | 요소의 첫 번째 자식 요소를 돌려줍니다 |
| element . focus() | 요소에 포커스를 둡니다 |
| element . getAttribute() | 반품 specified 요소 노드의 속성 값을 |
| element . getAttributeNode() | 반품 specified 속성 노드를 |
| element . getElementsByClassName() | 지정된 클래스 이름으로 모든 자식 요소 컬렉션을 반환 |
| element . getElementsByTagName() | 지정된 태그 이름을 가지는 모든 자식 요소 컬렉션을 반환 |
| element . getFeature() | 특정 기능의 API를 구현하는 객체를 돌려줍니다 |
| element . hasAttribute() | 요소가있는 경우에 true를 돌려줍니다 specified 속성을, 그렇지 않은 경우는 false |
| element . hasAttributes() | 요소가 속성을 가지고있는 경우는 true, 그렇지 않은 경우는 false를 돌려줍니다 |
| element . hasChildNodes() | 요소가 자식 노드가있는 경우는 true, 그렇지 않은 경우는 false를 돌려줍니다 |
| element .ID | 설정 또는 값 반환 id 요소의 속성을 |
| element .innerHTML | 설정하거나 요소의 내용을 반환 |
| element . insertBefore() | 지정된, 기존의 자식 노드 앞에 새 자식 노드를 삽입합니다 |
| element .isContentEditable | 요소의 내용이 편집 가능한 경우는 true, 그렇지 않은 경우는 false를 돌려줍니다 |
| element . isDefaultNamespace() | 지정된 이름 공간 URI가 기본 인 경우는 true, 그렇지 않은 경우는 false를 돌려줍니다 |
| element . isEqualNode() | 수표 두 요소가 동일한 경우 |
| element . isSameNode() | 수표의 경우 두 요소는 동일한 노드이다 |
| element . isSupported() | 지정된 기능이 요소에서 지원되는 경우는 true를 돌려줍니다 |
| element .lang | 설정 또는 값 반환 lang 요소의 속성을 |
| element .lastChild | 요소의 마지막 자식 노드를 반환 |
| element .lastElementChild | 요소의 마지막 자식 요소를 돌려줍니다 |
| element .namespaceURI | 요소의 네임 스페이스 URI를 돌려줍니다 |
| element .nextSibling | 동일한 노드 트리 레벨에서 다음 노드를 돌려줍니다 |
| element .nextElementSibling | 동일한 노드 트리 레벨에서 다음의 요소를 돌려줍니다 |
| element .nodeName | 노드의 이름을 반환 |
| element .nodeType | 노드의 노드 형태를 돌려줍니다 |
| element .NodeValue 이렇게 | 설정하거나 노드의 값을 반환 |
| element . normalize() | 인접한 텍스트 노드를 결합하고 요소에 빈 텍스트 노드를 제거합니다 |
| element .offsetHeight | 패딩, 테두리와 스크롤바를 포함하여, 요소의 높이를 돌려줍니다 |
| element .offsetWidth | 패딩, 테두리와 스크롤바를 포함하여, 요소의 폭을 돌려줍니다 |
| element .offsetLeft | 요소의 수평 위치 오프셋을 반환 |
| element .offsetParent | 요소의 오프셋 (offset) 컨테이너를 돌려줍니다 |
| element .offsetTop | 요소의 수직 위치 오프셋을 반환 |
| element .ownerDocument | 루트 요소를 돌려줍니다 (document object) 요소에 대한 |
| element .parentNode | 요소의 부모 노드를 반환 |
| element .parentElement | 요소의 부모 요소 노드를 반환 |
| element .previousSibling | 동일한 노드 트리 수준에서 이전 노드를 돌려줍니다 |
| element .previousElementSibling | 동일한 노드 트리 수준에서 이전의 요소를 돌려줍니다 |
| element . querySelector() | 지정된 CSS의 일치하는 첫 번째 자식 요소를 돌려 selector(s) 요소의를 |
| 요소입니다. querySelectorAll() | 지정된 CSS의 일치하는 모든 자식 요소를 돌려 selector(s) 요소의를 |
| element . removeAttribute() | 요소에서 특정 속성을 삭제 |
| element . removeAttributeNode() | 지정된 속성 노드를 삭제 해, 삭제 된 노드를 돌려줍니다 |
| element . removeChild() | 요소에서 자식 노드를 제거합니다 |
| element . replaceChild() | 요소의 자식 노드를 대체 |
| element . removeEventListener() | 부착 된 이벤트 핸들러 제거 addEventListener() 메소드 |
| element .scrollHeight | 패딩을 포함하는 요소의 전체 높이를 돌려줍니다 |
| element .scrollLeft | 설정하거나 요소의 내용이 수평으로 스크롤되는 픽셀의 수를 반환 |
| element .scrollTop | 설정하거나 요소의 내용을 세로로 스크롤 픽셀 수를 반환 |
| element .scrollWidth | 패딩을 포함하는 요소의 전체 폭을 돌려줍니다 |
| element . setAttribute() | 설정하거나 변경 specified 지정된 값으로 속성을, |
| element . setAttributeNode() | 설정하거나 변경 specified 속성 노드를 |
| element .style | 설정 또는 값 반환 style 요소의 속성을 |
| element .tabIndex | 설정하거나 값 반환 tabindex 요소의 속성을 |
| element .tagName | 요소의 태그 이름을 반환 |
| element .textContent | 설정 또는 노드와 노드의 자손의 텍스트 내용을 반환 |
| element .title | 설정 또는 값 반환 title 요소의 속성을 |
| element . toString() | 문자열에 요소를 변환 |
| 노드 목록. item() | NodeList를에서 지정된 인덱스의 노드를 반환 |
| 노드 목록 .length | NodeList를에서 노드의 수를 돌려줍니다 |