HTMLElement
- 객체 1개를 리턴하는 것이다.
- 자식으로 HTMLLIElement, HTMLAnchorElement, HTMLInputElement 등이 있다.
- 각각의 자식들은 같은 HTMLElement라는 부모가 있지만 각각의 속성들이 다르다.
HTMLElement 자식
- HTMLLIElement -
<li>태그 element를 의미한다.
- 속성
interface HTMLLIElement : HTMLElement {
attribute DOMString type;
attribute long value;
};- HTMLAnchorElement -
<a>태그 element를 의미한다.
- 속성
interface HTMLAnchorElement : HTMLElement {
attribute DOMString accessKey;
attribute DOMString charset;
attribute DOMString coords;
attribute DOMString href;
attribute DOMString hreflang;
attribute DOMString name;
attribute DOMString rel;
attribute DOMString rev;
attribute DOMString shape;
attribute long tabIndex;
attribute DOMString target;
attribute DOMString type;
void blur();
void focus();
};- HTMLInputElement -
<input>태그 element를 의미한다.
- 속성
interface HTMLInputElement : HTMLElement {
attribute DOMString defaultValue;
attribute boolean defaultChecked;
readonly attribute HTMLFormElement form;
attribute DOMString accept;
attribute DOMString accessKey;
attribute DOMString align;
attribute DOMString alt;
attribute boolean checked;
attribute boolean disabled;
attribute long maxLength;
attribute DOMString name;
attribute boolean readOnly;
// Modified in DOM Level 2:
attribute unsigned long size;
attribute DOMString src;
attribute long tabIndex;
// Modified in DOM Level 2:
attribute DOMString type;
attribute DOMString useMap;
attribute DOMString value;
void blur();
void focus();
void select();
void click();
};DOM TREE
출처 : https://web.stanford.edu/class/cs98si/slides/the-document-object-model.html
HTMLCollection
- 2개 이상의 객체를 리턴한다.
- 유사배열의 형태로 리턴한다.
예시
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<li>html</li>
<li>css</li>
<li>javascript</li>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var li = document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
$(li[i]).css('color','red');
}
</script>
</body>
</html>