DOM 기술 용어, 코드 작성 기준

5_hyun 2022. 5. 5. 13:25

시맨틱(Semantic): 의미(뜻)를 시맨틱이라 부른다. 코드가 의미를 갖도록 시맨틱을 부여하여 코드를 작성해야 한다고 말한다.

함수 안에 코드를 간단하게 하여 뉘앙스의 범위를 잘 지키도록 해야한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for=music>좋아하는 음악은?</label>
    <input id=music value="장르를 입력하세요">
    <script src="test.js"></script>
</body>
</html>

-label for 사용법

<label> 태그는 for 속성을 사용해서 <input> 태그의 id 속성에 연계해서 사용, label의 for값과 input의 id값을 일치시키면 된다.

const music = {
    createElement(id){
        this.element = document.getElementById(id);
    },
    get getAttributeValue(){
        return this.element.value;
    },
    set setAttributevalue(value){
        this.element.value = value;
    }
};
music.createElement("music");
console.log(music.getAttributeValue);
music.setAttributevalue="클래식";

music은 오브젝트

createElement 함수에서 music을 받아 설정을 해준다.

getAttributeValue 함수는 지금 있는 value 값을 가져와서 "장르를 입력하세요"가 출력된다.

serAttributeValue는 value를 바꿔준다.

-결과

저작자표시 (새창열림)