❏ js - 자바스크립트 HTML DOM ➋

⊹⠀𝙹𝚂

❏ js - 자바스크립트 HTML DOM ➋

김_코드 2023. 2. 3. 17:43

이번시간에는 DOM Attribute에 대해서 알아보겠습니다.

사용자가 브라우저에 입력하는 데이터는 DOM요소의 value 속성에 저장이 됩니다. 이 데이터를 사용하기 위해서는 DOM요소에 대한 접근을 한 후 해당 요소의 속성 정보에 접근해야 합니다.

그렇기에 이번에는 DOM요소에 접근하여 요소가 가지고 있는 속성을 읽고, 변경하는 방법에 대해서 알아보겠습니다.

✏ getAttribute()

getAttribute 함수는 HTML요소의 속성 정보를 가져올 수 있습니다.

그럼 예제로 unput type="text" 요소에 사용자가 입력한 데이터를 가지고 오는 코드를 만들어 보겠습니다.

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
    <input type="text" id="text1" value="apple">
    <script>
        let oText1 = document.getElementById("text1");
        let textValue = oText1.value;
        console.log(textValue);
            console.log(document.getElementById("text1").getAttribute("Value"));
    </script>
</body>
</html>

✏ setAttribute()

버튼을 disabled 처리했다가 풀어줍니다.

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
    <button onclick="doSave(event);">저장</button>
    <script>
        function doSave(e) {
            let obj = e.target;
            obj.disabled = true; //사용자가 중복해서 버튼을 클릭하지 못하도록 버튼을 disabled함.
            setTimeout(function(){
                obj.disabled = false;
            }, 2000);  //저정완료 후 2초가 소요된것으로 가정, 2초후 버튼을 다시 활성화시킴.
        }
    </script>
</body>
</html>

✏ hasAttribute()

HTML요소에 특정 속성이 있는지 확인하는 함수입니다.

특정 속성이 있는 경우는 참(true)을 없는 경우는 거짓(false)을 반환합니다.

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
    <input type="text" id="text1" value="apple" data-role="name">
    <script>
        let oText1 = document.getElementById("text1");
        console.log(oText1.hasAttribute("data-role"));
    </script>
</body>
</html>

특정속성인 data-role이 있었기 떄문에 참(true)을 반환했습니다.

✏ removeAttribute()

HTML 요소의 특정 속성을 삭제합니다.

<head>
    <title>Document</title>
</head>
<body>
    <input type="text" id="text1" value="apple" data-role="name">
    <script>
        let oText1 = document.getElementById("text1");
        oText1.removeAttribute("data-role");
        console.log(oText1.hasAttribute("data-role"));
    </script>
</body>

특정 속성이 삭제되었기 때문에 거짓으로 반환된것을 확인할 수 있었습니다.

( ˃ᴗ˂ )

즐거운 주말 되세요!