HTML 엘레멘트 개체의 속성을 반환하고 참조한다.

Script [propVal=]..propName;
HTML 없슴.
특기

attribute 개체는 attributes 켈렉션을 통하여 접속하고 참조할 수 있다.

유효한 속성은 DHTML 개체에 적용되는 property나 event 이벤트들이다. expando도 적용된다.

IE5 부터는 스크립트를 사용할 수 있다.

참조

attributes


설명을 위한 예제

앞 형제 개체
개체내 내부 DIV, 내부 SPAN 내용
뒤 형제 개체

컬렉션설명과 예제 코드결과참고
attributes 개체의 애트리뷰트(attribute 개체)들의 배열변수를 참조하고 반환한다.
<SCRIPT>document.write(oObj.attributes.length)</SCRIPT>
childNodes 개체의 바로 종속된 자식들의 엘레멘트 개체들과 TextNode 개체들의 배열변수를 참조하고 반환한다.
<SCRIPT>document.write(colObj.childNodes.length)</SCRIPT>

expando 속성 IE
⇒ 개체 내부에서 애트리뷰트를 생성할 수 있는가를 반환하거나 설정한다.
문법: .expando
코드: document.write(oObj.expando); 결과:
firstChild 속성 IE
⇒ 개체의 childNodes 컬렉션에서 제일 먼저 자식 개체을 반환한다.
문법: [oVal=].firstChild
코드: document.write(oObj.firstChild); 결과:
코드: if (oObj.firstChild) document.write(oObj.firstChild.nodeName); 결과:
lastChild 속성 IE
⇒ 개체의 childNodes 컬렉션에서 마지막 자식 개체을 반환한다.
문법: [oVal=].lastChild
코드: document.write(oObj.lastChild; 결과:
코드: if (oObj.lastChild) document.write(oObj.lastChild.innerText); 결과:
name 속성 IE (<ELEMENT name="sVal"> 애트리뷰트)
⇒ 개체의 이름을 반환하거나 설정한다.
문법: .name[=sVal]
코드: document.write(oObj.name); 결과:
nextSibling 속성 IE
⇒ 개체의 다음 형제(같은 모체의 다음 자식) 개체을 반환한다.
문법: [oVal=].nextSibling
코드: document.write(oObj.nextSibling); 결과:
코드: if (oObj.nextSibling) document.write(oObj.nextSibling.innerText); 결과:
nodeName 속성 IE
⇒ 개체의 특정 노드(node) 타입 이름을 반환한다.
문법: [oVal=].nodeName
코드: document.write(oObj.nodeName); 결과:
nodeType 속성 IE
⇒ 개체의 특정 노드(node)의 종류를 반환한다.
문법: [oVal=].nodeType
코드: document.write(oObj.nodeType); 결과:
nodeValue 속성 IE
⇒ 개체의 특정 노드(node)의 값을 반환한다.
문법: [oVal=].nodeValue
코드: document.write(oObj.nodeValue); 결과:
ownerDocument 속성 IE6
⇒ 노드(node)에 연관한 document 개체를 반환하거나 설정한다.
문법: .ownerDocument[=oVal]
코드: document.write(oObj.ownerDocument); 결과:
코드: document.write(oObj.ownerDocument.nodeName); 결과:
parentNode 속성 IE
⇒ 구조상 부모 엘레멘트 개체를 반환한다.
문법: .parentNode
코드: document.write(oObj.parentNode); 결과:
코드: document.write(oObj.parentNode.nodeName); 결과:
previousSibling 속성 IE
⇒ 개체의 다음 형제(같은 모체의 다음 자식) 개체을 반환한다.
문법: [oVal=].previousSibling
코드: document.write(oObj.previousSibling); 결과:
코드: if (oObj.previousSibling) document.write(oObj.previousSibling.innerTexte); 결과:
specified 속성 IE
⇒ 개체의 애트리뷰트가 지정되었는가를 반환한다.
문법: [bVal=].attributes(sVal).specified
코드: document.write(oObj.attributes('name').specified); 결과:
value 속성 IE6
⇒ 개체의 속성값을 반환한다.
문법: [vVal=].attributes(sVal).value
코드: document.write(oObj.attributes('name').value); 결과:

메서드설명
appendChild 개체의 자식개체로 한 엘레멘트를 추가한다.
cloneNode 문서 계통도로부터 개체의 참조를 복사한다.
hasChildNodes 개체가 자식개체를 가지고 가지고 있는가를 나타내는 값을 반환한다.
insertBefore 문서 계통도에서 모체 개체의 자식 노드로 엘레멘트를 삽입한다.
removeChild 개체로부터 자식 노드를 제거한다.
replaceChild 현재의 자식 엘레멘트를 새로운 자식 엘레멘트로 교체한다.

<BUTTON>의 개체 예제

결과 표시창
<BUTTON id="butObj" onclick="showAttribs1(butObj)" lang="ko" name="buttonName">클릭 단추에 지정된 attribute</BUTTON>
<SCRIPT>
function showAttribs1(){
  str='';
  for(i=0;i< butObj.attributes.length;i++){
    if (butObj.attributes[i].specified) str+=i+'] '+butObj.attributes[i].nodeName+'='+butObj.attributes[i].nodeValue+'<BR>';
  }
  showA.innerHTML=str;
}
</SCRIPT>
<DIV id=showA>결과 표시창</DIV>

<TABLE>의 개체 예제

TABLE 예제
결과코드
항목1 항목2 항목3
 
<TABLE id=tableObj align=center border=1>
<TR id="trObj" name="testTRname" bgcolor="#ffffaa" value="testValue"
  lang="ko" title="testAttriblue" align="center" valign="middle" borderColor="red">
<TD id="tdObj">항목1</TD>
<TD>항목2</TD>
<TD>항목3</TD></TR>
</TABLE>

<DIV class=show id=showit style=margin-left:1em></DIV>
<SCRIPT>
str='';
for(i=0;i<trObj.attributes.length;i++){
  if(trObj.attributes[i].specified){
    str+=trObj.attributes[i].nodeName + " = " + trObj.attributes[i].nodeValue+'<BR>';
  }
}
showit.innerHTML=str;
</SCRIPT>