JS DOM 요소 속성 변경

HTML DOM은 JavaScript가 HTML 요소의 속성을 가져오고 변경할 수 있게 합니다.

요소의 속성 값을 가져옵니다

getAttribute()메서드는 요소에 있는 지정된 속성의 현재 값을 가져옵니다.

다음 예제에서는 고정 요소의href과title속성의 값:

var link = document.getElementById("demo");
var href = link.getAttribute("href");
var title = link.getAttribute("title");

요소에 속성 설정

setAttribute()속성 값을 설정하는 메서드입니다.

속성이 이미 존재하면 값을 업데이트하고, 존재하지 않으면 지정된 이름과 값을 가진 새 속성을 추가합니다.

이 예제에서는href속성 값을 설정한 앵커 요소:

var x = document.getElementsByTagName("a")[0];
x.setAttribute("href", "https:");//ko.oldtoolbag.com/css3/);

또한, 다음과 같이 사용할 수 있습니다.setAttribute()HTML 요소에 존재하는 속성 값을 업데이트하거나 변경하는 메서드입니다.

document.getElementsByTagName("input")[0].setAttribute("type", "text");

요소에서 속성 제거

removeAttribute()지정된 요소에서 속성을 제거하는 메서드입니다.

이 예제에서는 앵커 요소에서 속성을 제거합니다.href속성:

document.getElementsByTagName("a")[0].removeAttribute("href");