attr 메서드

attr 메서드는 요소의 모든 속성을 가져오고 변경할 수 있습니다.

요소의 속성(property)과 어트리뷰트(attribute)를 혼동하지 않는 것이 중요합니다. DOM 트리가 생성될 때 어트리뷰트는 해당하는 DOM 요소의 속성으로 변환됩니다. 이들의 이름과 값이 항상 일치하는 것은 아닙니다. 또한 일부 속성은 대응하는 어트리뷰트가 없을 수 있으며, prop 메서드를 사용할 때만 가져오거나 설정할 수 있습니다. 예를 들어 tagName 속성이 있습니다.

구문

속성 값 가져오기:

$(선택자).attr(속성 이름);

속성 값 변경하기:

$(선택자).attr(속성 이름, 새로운 값);

여러 속성 값 변경하기:

$(선택자).attr({첫번째_속성: 새로운_값, 두번째_속성: 새로운_값, ...});

집합의 각 요소에 함수 적용하기:

$(선택자).attr(속성 이름, function(집합 내 순번, 속성의 현재 값));

예제

다음 예제에서는 id로 입력 필드를 선택하고 해당 요소의 value 속성 값을 화면에 출력합니다:

<input type="text" value="!!!" id="test">

let value = $('#test').attr('value');
console.log(value);

예제

이제 동일한 속성에 새로운 값 'www'를 입력해 보겠습니다:

<input type="text" value="!!!" id="test"> $('#test').attr('value', 'www');

HTML 코드는 다음과 같이 변경됩니다:

<input type="text" value="www" id="test">

예제

type와 value 속성을 동시에 변경해 보겠습니다:

<input type="text" value="!!!" id="test"> $('#test').attr({value: 'www', type: 'password'});

HTML 코드는 다음과 같이 변경됩니다:

<input type="password" value="www" id="test">

예제

모든 입력 필드의 value 속성을 변경해 보겠습니다. 현재 value에 집합 내 요소 순서 번호를 추가합니다:

<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

$('input').attr('value', function(index, value) {
	return value + ' ' + index;
});

HTML 코드는 다음과 같이 변경됩니다:

<input type="text" value="aaa 0">
<input type="text" value="bbb 1">
<input type="text" value="ccc 2">

함께 보기

요소의 속성을 제거할 수 있는 removeAttr 메서드
요소의 속성(property)을 작업할 수 있는 prop 메서드
요소의 현재 값을 가져오고 변경할 수 있는 val 메서드