[JAVASCRIPT] DOM Attribute

DOM 요소에 접근한 다음에는 DOM 요소가 가지고 있는 속성 정보를 가져오거나, 속성 정보의 값을 변경할 수 있다.
사용자가 브라우저에 입력하는 데이터는 DOM 요소의 value 속성에 저장된다.
사용자가 입력한 데이터를 자바스크립트에서 가져와서 사용하려면 먼저 DOM 요소에 접근 한 후 해당 요소의 속성 정보에 접근해야 한다.

getAttribute()

getAttribute() 함수를 사용해서 HTML 요소의 속성 정보를 가져올 수 있다.

input type="text" 요소에 사용자가 입력한 데이터를 가져오는 예제 코드

<input type="text" id="text1" value="ABC" />
<script>
  let oText1=document.getElementById("text1");
  let textValue=oText1.value;
  console.log(textValue);	//ABC
  console.log(document.getElementById("text1").getAttribute("value")); //ABC
</script>

setAttribute()

버튼을 disabled 처리했다가 풀어주는 예제 코드

<button onclick="doSave(event);">저장</button>
<script>
  function doSave(e){
  	let obj=e.target;
  	obj.disabled=true;	//사용자가 중복해서 버튼을 또 클릭하지 못하도록 버튼을 disabled
  
  	//저장을 실행하는 코드 작성
  	setTimeout(function(){//저장 완료까지 2초가 소요된 것으로 가정. 2초 후 버튼을 다시 enabled
  	obj.disabled=false;
  	},2000);
  }
</script>

hasAttribute()

HTML 요소에 특정 속성이 있는지 확인할 수 있다.

<input type="text" id="text1" value="ABC" data-role="name" />
<script>
  let oText1=document.getElementById("text1");
  console.log(oText1.hasAttribute("data-role")); //true
</script>