[자바스크립트] - ★ 속성을 가져오거나 수정하는 getAttribute(), setAttribute()매서드

 속성을 가져오거나 수정하는 getAttribute()매서드, setAttribute()매서드 

웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성노드가 추가되면서 속성값이 지정된다.

 getAttribute( ) 

: 속성에 접근한다. 속성에 지정되어있는 값을 데려온다. 속성에 어떤 값이 들어있는지 볼 수 있다. 

 setAttribute( ) 

: 속성을 수정한다. 선택한 요소의 해당 속성을 원하는 속성값으로 바꾼다. 

[기본형]

요소명.getAttribute('속성명')
: 선택한 요소의 해당 속성명에 들어있는 값을 반환한다.

요소명.setAttribute('속성명', '값')
: 선택한 요소의 해당 속성을 속성값으로 바꾼다.
만약 해당 속성이 태그에 없다면 속성과 속성값을 새로 추가한다.

문자열로 들어가있어야한다. 변수라면 " " 안써도 되지만 변수안에 문자열이 들어가있어야한다. 

 <!-- 이미지를 클릭하면 changePic() 함수 실행  -->

 

    <img

      src="./img/bed.jpg"

      alt="침대"

      width="400"

      id="pictrue"

      onclick="changePic()"

    />

   //속성에 접근해야 하므로 querySelector로 이미지태그를 선택

      const pictrue = document.querySelector("#pictrue");

      document.write(pictrue.getAttribute("src")); //선택한 이미지태그의 src 경로를 보여준다.

      document.write(pictrue.getAttribute("alt")); //alt의 정보를 보여준다.

      //이미지를 클릭하면 다른 이미지로 바꾸는 함수

      function changePic() {

        //이미지 태그의 src 속성값을 ./img/coffee.jpg로 바꾸는 코드

        pictrue.setAttribute("src", "./img/coffee.jpg");

      }

 

getAttribute로 이미지의 src 경로와 alt의 정보를 보여준다ㅣ