106. (javascript/자바스크립트) 특정 객체 속성 값 확인 및 설정, 삭제 - getAttribute , setAttribute , removeAttribute

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

---

[소스코드]

​

    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /*
        [JS 요약 설명]
        1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
        2. getAttributeNames : 특정 객체에 포함된 속성 리스트를 가져옵니다
        3. getAttribute : 특정 객체 속성 값을 가져옵니다 
           (속성값이란 객체 고유 지정 값으로 id, class, event, a 태그 href , download 등등 ...)
        4. setAttribute : 특정 객체 속성 값을 지정합니다            
        5. removeAttribute : 특정 객체 속성 값을 삭제합니다
        6. attribute 지정시 대,소문자를 구분하지 않습니다
        */



        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("[window ready] : [start]");
            console.log("");
        };



        /* [이벤트 수행 부분] */                
        function checkAttribute() {
            console.log("");
            console.log("[checkAttribute] : [start]");
            console.log("");


            /*
            [body 에 지정한 객체 소스코드]
            <div id = "container"
                style="width: 50%; height: 15%; margin: 0 auto; padding: 0; border: 2px solid #000;
                float: top; position: relative; top: 5%; left: 0%;"
                onclick="checkAttribute();">
            </div>
            */


            /*
            [css style 생성 클래스 코드]
            .cBgBlue {
                background-color: #0000ff;
            }
            */


            // 객체 id 매핑 실시 
            var tagId = document.getElementById("container");


            // getAttributeNames 사용해 객체에 포함된 속성 목록 확인
            var getAttributeList = tagId.getAttributeNames();
            console.log("");
            console.log("[checkAttribute] : [getAttributeList] : " + getAttributeList);
            console.log(""); 


            // getAttribute 사용해 특정 객체 개별 속성값 확인 실시
            var getBeforeAttrId = tagId.getAttribute("id"); // 아이디 값 확인 실시
            var getBeforeAttrClass = tagId.getAttribute("class"); // 클래스 값 확인 실시
            var getBeforeAttrStyle = tagId.getAttribute("style"); // 클래스 값 확인 실시
            var getBeforeAttrClick = tagId.getAttribute("onclick"); // 클릭 이벤트에 정의된 함수 확인 실시
            console.log("");
            console.log("[checkAttribute] : [getBeforeAttrId] : " + getBeforeAttrId);
            console.log("[checkAttribute] : [getBeforeAttrClass] : " + getBeforeAttrClass);
            console.log("[checkAttribute] : [getBeforeAttrStyle] : " + getBeforeAttrStyle);
            console.log("[checkAttribute] : [getBeforeAttrClick] : " + getBeforeAttrClick);
            console.log(""); 


            // setAttribute 사용해 특정 객체 속성값 새로 지정 실시
            tagId.setAttribute("id", "container_new"); // 아이디 값 지정
            tagId.setAttribute("class", "cBgBlue"); // 클래스 값 지정 >> ("class", "") 로 지정 시 클래스 삭제된다
            console.log("");
            console.log("[checkAttribute] : [setAttribute] : [ID] : " + "container_new");
            console.log("[checkAttribute] : [setAttribute] : [Class] : " + "cBgBlue");            
            console.log("");


            // removeAttribute 사용해 특정 객체 속성값 삭제 실시
            tagId.removeAttribute("onclick"); // 클릭 삭제 실시            
            console.log("");
            console.log("[checkAttribute] : [removeAttribute] : " + "onclick");        
            console.log("");


            // 다시 getAttribute 사용해 특정 객체 속성값 재확인 실시
            var getAfterAttrId = tagId.getAttribute("id"); // 아이디 값 확인 실시
            var getAfterAttrClass = tagId.getAttribute("class"); // 클래스 값 확인 실시
            var getAfterAttrStyle = tagId.getAttribute("style"); // 클래스 값 확인 실시
            var getAfterAttrClick = tagId.getAttribute("onclick"); // 클릭 이벤트에 정의된 함수 확인 실시
            console.log("");
            console.log("[checkAttribute] : [getAfterAttrId] : " + getAfterAttrId);
            console.log("[checkAttribute] : [getAfterAttrClass] : " + getAfterAttrClass);
            console.log("[checkAttribute] : [getAfterAttrStyle] : " + getAfterAttrStyle);
            console.log("[checkAttribute] : [getAfterAttrClick] : " + getAfterAttrClick);
            console.log(""); 
        }; 
                
    </script>

​

---

[결과 출력]

​

---

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. getAttributeNames : 특정 객체에 포함된 속성 리스트를 가져옵니다

3. getAttribute : 특정 객체 속성 값을 가져옵니다

    (속성값이란 객체 고유 지정 값으로 id, class, event, a 태그 href , download 등등 ...)

4. setAttribute : 특정 객체 속성 값을 지정합니다

5. removeAttribute : 특정 객체 속성 값을 삭제합니다

6. attribute 지정시 대,소문자를 구분하지 않습니다

*/

---