<div class="box">

  <button class="but">속성변경</button><br>

  <input type="text" placeholder="미리보기"> 

  <div class="click_text"></div>

</div>

const but=document.querySelector('.but')

const input=document.querySelector('input')

const click_text=document.querySelector('.click_text')

​

//getAttribute('속성명') : 속성가져오기

const input_value=input.getAttribute('placeholder')

console.log(input_value)//이때 input_value의 값은 '미리보기'

​

//setAttribute('속성명','변경될속성값')

but.addEventListener('click',function(){

  input.setAttribute('placeholder',"미리보기가 변경되었습니다")

  click_text.innerHTML=input_value

  //input의 placeholer값은 변경되었으나 input_value의 값(이전 속성값을 가져왔음)을 표현

  })