attribute
- attribute는 html문서에서 elements에 추가적인 정보를 넣을 때 사용되는 요소입니다.
예를들어<div class="my-class"></div>라는 "my-class"라는 클래스 속성을 가지 div요소에서div는 elements(요소)이고class는 attribute(속성)가 되며"my-class"는 class attribute의 value(값)이 됩니다.
property
- property는 htmlDOM안에서 attribute를 가르키는 표현입니다.
다시말해 html 문서 안에서는class가 attribute를 의미하지만 htmlDOM안에서는 property를 의미합니다.
어떻게 구분하고 차이점은 뭔데?
- attribute 는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미하고,
- attribute : 값을 갖는 속성. setAttribute등의 메서드로 제어함 ex)src,href,width,height 등
- property 는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미합니다.
-property : 값을 갖지 않는 속성, 각 속성 자체가 객체의 멤버변수로 존재하고,ture/false의 값을 갖는다.
ex)checked,readonly,selected
ㄴ disabled : 비활성화=ture, 활성=false(모든 input요소
ㄴ readnoly : 읽기전용 =true, 활성= false (모든 input요소
ㄴ checked : 체크됨=true, 체크안됨=false(체크박스,라디오 버튼
ㄴ selected : 선택됨=true, 선택해제=false(dropdown의 option 태그)
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* disable속성을 갖는 요소의 배경색상 처리 */
input[disabled] {
background-color: #d5d5d5;
}
</style>
</head>
<body>
<label for="username">입력하기
<input type="checkbox" id="input_enable" />
</label>
<input type="text" name="input" id="input" disabled />
<script>
/*
- attribute : 값을 갖는 속성. setAttribute등의 메서드로 제어함
ex)src,href,width,height 등
-properrty : 값을 갖지 않는 속성,
각 속성 자체가 객체의 멤버변수로 존재하고,ture/false의 값을 갖는다.
ex)checked,readonly,selected 등
ㄴ disabled : 비활성화=ture, 활성=false(모든 input요소)
ㄴ readnoly : 읽기전용 =true, 활성= false (모든 input요소)
ㄴ checked : 체크됨=true, 체크안됨=false(체크박스,라디오 버튼)
ㄴ selected : 선택됨=true, 선택해제=false(dropdown의 option 태그)
*/
document.querySelector('#input_enable').addEventListener('change', e => {
document.querySelector('#input').disabled = !e.currentTarget.checked;
});
</script>
</body>
</html>
냠소현 개발일지