setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다.
문법:
element.setAttribute( 'attributename', 'attributevalue' )
attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다.
undefined를 리턴합니다.
예를 들어
document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' )
id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다.
id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript | .setAttribute()</title>
</head>
<body>
<p><a id="abc" href="#">CODING FACTORY</a></p>
<script>
document.getElementById( 'abc' ).setAttribute( 'href', 'https://www.codingfactory.net' );
</script>
</body>
</html>mdn 예제:
var b = document.querySelector("button");
b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");1. button의 name 속성의 값을 "helloButton"으로 바꿉니다.
2. boolean으로 속성값을 지정할 때에는 빈 문자열이나 disabled와 같은 이름 으로 지정하는 것을 권장합니다. 중요한 것은 속성이 실제 값에 관계없이 존재만 한다면 해당 값이 참으로 간주된다는 것입니다. 속성이 없다면 해당 값은 false가 됩니다. disabled이라고 속성명을 지정하고 빈문자열을 속성값으로 설정하면, disabled을 참으로 설정하게 되면서 버튼이 비활성화 됩니다.
참고 및 출처 : https://www.codingfactory.net/10419
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
Element.setAttribute() - Web APIs | MDN
Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.
developer.mozilla.org
JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드
.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다.
www.codingfactory.net
'DOM > 기초' 카테고리의 다른 글
| 모던 자바스크립트 DOM 탐색하기 (0) | 2021.07.06 |
|---|---|
| textContent vs innerText vs innerHTML (0) | 2021.06.29 |
| querySelector (0) | 2021.06.29 |
| offsetHeight, offsetWidth (0) | 2021.06.29 |
| 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까? (0) | 2021.06.29 |
