[JavaScript] 자바스크립트에서 요소 속성 다루기

2022. 7. 11. 16:16Program/JavaScript

148_자바스크립트에서 요소 속성 다루기

[적용]

  • 속성의 값을 변경하고 싶을 때

[문법]

메소드 의미 반환
요소.setAttribute(속성, 값) 요소 속성 설정  없음
요소.getAttribute(속성) 요소 속성 가져오기 없음
요소.hasAttribute(속성)  요소 속성 존재 여부 확인 진리값

[내용]

해당 메소드로 요소 속성을 다룰 수 있다.

 

HTML                                                                                                                                                              index.html

<a id="anchor" href="example.com">링크</a>

<img id="image" src="foo.png"/>

JavaScript                                                                                                                                                          main.js

const anchorElement = document.querySelector('#anchor');
// example.com 출력
console.log(anchorElement.getAttribute('href'));

const imageElement = document.querySelector('@image');
// img 요소 src 값을 bar.pag로 변경
imageElement.setAttribute('src', 'bar.png');

 

 


 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김