| 속성 | 설명 |
|---|---|
| element.innerHTML | 요소의 HTML 컨텐츠를 설정하거나 반환합니다. |
| element.textContent | 요소의 텍스트 컨텐츠를 설정하거나 반환합니다. |
| element.outerHTML | 요소를 감싸고 있는 tag를 포함하여 문자열로 반환하거나, 요소를 교체합니다. |
| 속성 | 설명 |
|---|---|
| element.attributes | 요소 속성의 NamedNodeMap 객체를 반환합니다. |
| element.classList | 요소의 class 속성을 DOMTokenList 객체로 반환합니다. |
| element.className | 요소의 class 속성을 설정하거나 반환합니다. |
| element.id | 요소의 id 속성을 설정하거나 반환합니다. |
| element.title | 요소의 title 속성을 설정하거나 반환 |
| element.contentEditable | 요소의 컨텐츠를 편집할 수 있는지 여부를 설정하거나 반환합니다. |
| element.isContentEditable | 요소의 컨텐츠가 편집 가능한경우 true를 반환합니다. |
| element.lang | 요소의 lang속성의 값을 설정하거나 반환합니다. |
| element.dir | 요소의 텍스트 방향(읽기순서)을 설정하거나 반환합니다. |
| element.accessKey | 요소의 단축키 속성을 설정하거나 반환합니다. |
| 메서드 | 설명 |
|---|---|
| element.setAttribute() | 지정된 속성을 지정된 값으로 설정 이미 존재하는 속성이면 값을 변경. |
| element.getAttribute() | 요소의 지정된 속성값을 반환합니다. |
| element.removeAttribute() | 요소에서 지정된 속성을 제거합니다. |
| element.hasAttribute() | 요소에 지정된 속성이 있는 경우 true를 반환합니다. |
| element.hasAttributes() | 요소에 지정된 속성이 있는 경우 true를 반환합니다. 지정된 노드가 ELEMENT_NODE가 아니면 항상 false를 반환 |
HTML DOM에서는 모든것이 Node 입니다.
Attr객체는 HTML 속성을 나타냅니다.
| 속성/메서드 | 설명 |
|---|---|
| attr.isId | 속성이 id 인경우 true를 반환 |
| attr.name | 속성 이름을 반환 |
| attr.value | 속성값을 설정하거나 반환 |
| attr.specified | 속성이 지정된 경우에 true를 반환 |
| document.createAttribute() | 지정된 속성으로 새로운 Attr 객체를 생성합니다. |
| element.setAttributeNode() | 지정된 Attr 객체로 속성을 설정합니다. |
| element.getAttributeNode() | 요소의 지정된 속성을 Attr 객체로 반환. |
| element.removeAttributeNode() | 요소에서 지정된 속성을 제거하고 Attr 객체를 반환합니다. |
ATTRIBUTE_NODE의 정렬되지 않은 컬렉션입니다.
배열과 비슷합니다.
노드의 이름 또는 인덱스 번호로 접근 가능합니다.
| 속성/메서드 | 설명 |
|---|---|
| nodemap.length | 노도의 수를 반환 |
| nodemap.getNamedItem() | NamedNodeMap에서 지정한 attr객체를 반환 |
| nodemap.item() | 지정한 인덱스의 attr객체를 반환(배열의 [] 접근가능) |
| nodemap.removeNamedItem() | 지정된 속성을 제거 |
| nodemap.setNamedItem() | 지정된 attr노드를 추가, 존재한 노드라면 교체하고 이전노드를 반환하고, 그렇지 않으면 null을 반환 |
element.classList 속성은 읽기 전용이지만 DomTokenList 객체를 반환합니다.
DomTokenList 객체를 사용하면 class 속성에 값을 추가, 제거 하는데 유용합니다.
| 속성/메서드 | 설명 |
|---|---|
| DOMTokenList.length | class 값의 개수를 반환합니다. |
| DOMTokenList.add(class1, class2, ...) | class 속성에 값을 추가합니다. |
| DOMTokenList.contains(class) | 지정한 class 값이 있는지 여부를 반환합니다. |
| DOMTokenList.remove(class1, class2, ...) | 지정된 class 속성의 값을 제거합니다. |
| DOMTokenList.toggle(class) | class 값을 토글 합니다. 지정된 클래스가 있다면 제거되고, 클래스가 없다면 추가 됩니다. |