03-1.엘리먼트 프로퍼티와 어트리뷰트 조작

 엘리먼트 프로퍼티와 어트리뷰트 조작

[ 엘리먼트 프로퍼티 조작 ]

each(iterator) - 일치하는 집합을 순회하면서 전달된 반복자 함수를 엘리먼트마다 호출

 

예제1)

1. $('img').each(function(n){
    this.alt='아이디가 ' + this.id + '인 image[' + n + ']이다.';
   });
   

설명1) 페이지에 있는 모든 이미지 엘리먼트마다 인라인(inline) 함수를 호출하여, 엘리먼트의 순서와 id를 사용하여 만든 문자열로 alt 프로퍼티를 변경.

 

예제2)

1. var allAlts = new Array();
   $('img').each(function(){
    allAlts.push(this.alt);
   });
   

설명2) alt 프로퍼티의 모든 값을 배열로 가져온다.

 

예제3)

1. var altValue = $('#myImage')[0].alt;

설명3) 단일 엘리먼트의 alt 프로퍼티 값만 가져온다.

 

 

[ 어트리뷰트 값 가져오기 ]

attr(name) - 일치하는 집합의 첫 번째 엘리먼트에서 매개변수로 명시된 어트리뷰트의 값을 얻는다.
 집합이 없거나 첫 번째 엘리먼트에 어트리뷰트가 없다면 undefined를 반환한다.

예제)

1. <img id="myImage" src="image.gif" alt="이미지" class="someClass" title="이미지다." custom="값"/>
   $('#myImage").attr("custom")
   

설명) 사용자 정의 어트리뷰트인 "custom"의 값을 가져온다.

 

 

[ 어트리뷰트 값 설정 ]

attr(name, value) - 매개변수에 전달된 값을 이용해 확장 집합의 모든 엘리먼트에 해당 어트리뷰트 이름의 값을 설정
- name : (String) 값을 설정할 어트리뷰트 이름
- value : (String|Object|Function) 어트리뷰트 값

예제)

1. $('*').attr('title', function(index) {
    return '나는 ' + index + '번 엘리먼트이고 내 이름은 ' + (this.id ? this.id : 'unset') + '이다';
   });

설명) 페이지에 있는 모든 엘리먼트에 동작하며, 각 엘리먼트의 title 어트리뷰트를 엘리먼트의 인덱스와 id 어트리뷰트를 이용하여 구성된 문자열로 설정.

 

 

attr(attributes) - 일치하는 집합 내의 모든 엘리먼트에 매개변수로 전달된 객체로 명시한 어트리뷰트와 값을 설정

예제)

1. $('input').attr(
    { value: '', title: '값을 입력하세요.' }
   );

설명) 모든 <input> 엘리먼트 값을 빈 문자열로 설정하고 title은 '값을 입력하세요.'로 설정.

 

※ 주의 - 인터넷 익스플로러는 <input> 엘리먼트의 name 어트리뷰트를 변경할 수 없다.

 

 

[ 어트리뷰트 제거 ]

removeAttr(name) - 일치하는 모든 엘리먼트에서 명시된 어트리뷰트를 제거. 단, 어트리뷰트를 제거한다고 해서 자바스크립트 DOM 엘리먼트에
대응하는 프로퍼티가 제거되지는 않고 값이 변경될 뿐이다.

 

이 글은 스프링노트에서 작성되었습니다.