개체의 애트리뷰트(속성)들의 배열변수 컬렉션을 반환하고 참조한다.

인수
: (개체)
필수적인 요소이고 컬렉션을 포함하는 모체 개체이다.

cVal : (컬렉션)
선택적인 요소이고 값은 컬렉션을 나타내는 개체이다.

oVal : (개체)
선택적인 요소이고 값은 컬렉션의 한개의 엘레멘트 개체이다.

index : (정수/문자열)
필수적인 요소이고 값은 컬렉션의 인수로 한개의 엘레멘트 개체를 참조할 수 있고 배열변수의 규칙에따라 0부터 시작하고 제일 마지막 인수는 길이보다 1 작다.

특기

IE6부터 attributes 컬렉션에 개체의 expando 속성들이 포함되었다. 이전 버전에서 개체의 expando 속성에 접속하기 위해서는 for...in를 사용한다.

attributes 컬렉션에서는 style 개체를 사용할 수 없고, 개체의 확실한 스타일쉬트를 반환하기 위해서는 개체의 style 속성의 cssText속성을 사용한다.

all과 children 컬렉션등 다른 DHTML 컬렉션들과는 다르게 attributes 컬렉션 고정적(static)이다. 개체의 속성을 변경시켜도 자동적으로 그 개체의 참조하는 attributes 컬렉션에 반영되지 않는다.

적용
개체scriptHTML규격IE
참조

이 컬렉션은 (영문)DOM Level 1(W3C Document Object Model)에 정의되었다.


설명을 위한 예제

attributes 예제

length 속성 IE
⇒ 컬렉션의 길이를 반환하거나 지정한다.
문법: [iVal=]object.attributes.length
코드: document.write(oObj.length); 결과:

getNamedItem 메서드 IE
⇒ 컬렉션에서 name 속성 이름으로 지정한 애트리뷰트를 반환한다.
문법: [oVal=].getNamedItem('sVal')
코드: document.write(oObj.getNamedItem('type').nodeName+' | '+oObj.getNamedItem('type').specified+' | '+oObj.getNamedItem('type').nodeValue) 결과:
item 메서드 IE
⇒ 인덱스로 컬렉션의 한개의 개체를 반환한다.
문법: [oVal=].item('iVal')
코드: document.write(oObj.item(0).name) 결과:
removeNamedItem 메서드 IE
⇒ 컬렉션에서 name 속성 이름으로 지정한 애트리뷰트를 값과 함께 제거한다.
문법: .removeNamedItem('sVal')
코드: if (oObj.getNamedItem('name')) document.write(oObj.getNamedItem('name').nodeName+' | '+oObj.getNamedItem('name').specified+' | '+oObj.getNamedItem('name').nodeValue) 결과:
코드: oObj.removeNamedItem('name');if (oObj.getNamedItem('name')) document.write(oObj.getNamedItem('name').nodeName+' | '+oObj.getNamedItem('name').specified+' | '+oObj.getNamedItem('name').nodeValue) 결과:
setNamedItem 메서드 IE
⇒ 컬렉션에 name 속성 이름으로 지정한 애트리뷰트를 설정한다.
문법: [oVal=].setNamedItem('sVal')
코드: newOne=document.createAttribute('type');newOne.value='newAttrib';oObj.setNamedItem(newOne);;document.write(oObj.getNamedItem('type').nodeName+' | '+oObj.getNamedItem('type').specified+' | '+oObj.getNamedItem('type').nodeValue) 결과:

컬렉션 예제

SPAN Attributes 보기 U Attributes 보기 A Attributes 보기
  • 항목 1
  • 항목2
DIV Attributes 보기
결과 표시창
<SCRIPT>
function showAttribs(elemObj){
  str='<TABLE width=100%><TR><TD width=50%>elemObj.nodeName='+elemObj.nodeName;
  str+=' (id=<FONT color=blue><B>'+elemObj.id+'</B></FONT>)<BR>';
  colAttribs=elemObj.attributes;
  for (i=0;i< colAttribs.length;i++){
    if(!(i%Math.ceil((colAttribs.length)/2))&&i){
      str+='</TD><TD width=50%>';
      str+='elemObj.attributes.length=<FONT color=red><B>'+elemObj.attributes.length+'</B></FONT><BR>';
    }
    atr1=colAttribs[i];
    str+='<FONT color=silver>['+i+']</FONT> <FONT color=blue>'+atr1.nodeName+'</FONT>=';
    str+='<FONT color=teal>'+atr1.nodeValue+'</FONT> '
    str+='(<FONT color=gray>'+(atr1.specified ? '<FONT color=blue><B>true</B></FONT>':'false')+'</FONT>)<BR>';
  }
  str+='</TD></TR></TABLE>';
  showA.innerHTML=str;
}
</SCRIPT>
<DIV style="border:solid 1 green;padding=5" title="개체를 클릭해보라.">
<SPAN onclick="showAttribs(this)" id="span1" style="border:solid 1 blue">SPAN Attributes 보기</SPAN>
<U onclick="showAttribs(this)" id="u1" style="border:solid 1 blue">U Attributes 보기</U>
<A onclick="showAttribs(this)" id="a1" href="#exampleJump" style="border:solid 1 blue">A Attributes 보기</A>
<UL><LI onclick="showAttribs(this)" id="li1" style="border:solid 1 blue">항목 1
<LI onclick="showAttribs(this)" id="li2" style="border:solid 1 blue">항목2</UL>
<DIV onclick="showAttribs(this)" id="div1" style="border:solid 1 blue">DIV Attributes 보기</DIV>
<BUTTON onclick="showAttribs(this)" id="but1">단추 Attributes 보기</BUTTON>
</DIV>
<DIV id=showA>결과 표시창</DIV>