attribute

  • attribute는 html문서에서 elements에 추가적인 정보를 넣을 때 사용되는 요소입니다.

    예를들어 <div class="my-class"></div>라는 "my-class"라는 클래스 속성을 가지 div요소에서
    divelements(요소)이고
    classattribute(속성)가 되며
    "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>
profile
개발해보자고 🐣

0개의 댓글