투케이2K

105. (javascript/자바스크립트) cloneNode 사용해 특정 요소 객체 복사 실시 및 id 아이디 , style 스타일 변경 실시 본문

JavaScript

105. (javascript/자바스크립트) cloneNode 사용해 특정 요소 객체 복사 실시 및 id 아이디 , style 스타일 변경 실시

투케이2K 2021. 8. 5. 09:20
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

[스크립트 소스코드]

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

        /*
        [JS 요약 설명]
        1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
        2. cloneNode : 특정 객체 요소를 복사합니다 (true 설정 시 객체에 포함된 자식까지 모두 복사)
        3. document.body.appendChild : body 에 특정 태그를 추가합니다 
        4. setAttribute : 특정 태그 속성을 지정합니다 (초기 설정, 변경 등 ...)
        5. document.getElementById.style : 특정 태그 스타일 속성값을 변경합니다
        6. innerText : 특정 태그 텍스트 값을 확인 및 변경할 수 있습니다
        */



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



        /* [이벤트 수행 부분] */        
        var copyCount = 1; // 복사가 수행된 개수 카운트 
        var copyTop = 10; // 원본 top 값이 5값이므로, 복사객체는 10부터 시작 및 5씩 증가
        
        function copyStart() {
            console.log("");
            console.log("[copyStart] : [start]");
            console.log("");

            // 복사를 수행할 객체 지정 실시 [원본 객체]
            var parentId = document.getElementById("container"); 


            // 변수 지정 실시  [true 설정 시 >> 자식까지 모두 복사]
            var copy = parentId.cloneNode(true);              


            // body에 추가를 실시합니다
            document.body.appendChild(copy);            


            // 복사가 완료된 객체 아이디 및 특정 스타일값 변경 실시
            var copy_id = "copy_" + String(copyCount); // 변경할 아이디 값 설정           
            copy.setAttribute("id", copy_id); // 아이디값 변경

            document.getElementById(copy_id).style.top = String(copyTop) + "%"; // top 스타일 속성 변경
            document.getElementById(copy_id).style.backgroundColor = "#ff00ff"; // 배경 색상 속성 변경


            // 복사된 객체에 포함된 자식 확인 실시 및 id 값 변경
            var childList = document.getElementById(copy_id).childNodes;

            var originalChildId;
            var changeChildId;
            for(var i=0; i<childList.length; i++){
                originalChildId = childList[i].id;
                if(originalChildId != null && originalChildId != "" && originalChildId != "undefined"){ // 아이디값 공백 및 널 체크 실시                    

                    changeChildId = "copy_" + String(copyCount) + "_txt"; // 자식 아이디 새로 지정
                    childList[i].setAttribute("id", changeChildId); // 자식 아이디값 변경

                    // 추가 여러 자식이 많을 경우 분기 처리해서 아이디 지정 가능 [예제에는 div 내에 p 태그 하나만 포함됨]
                    console.log("");
                    console.log("[copyStart] : [parentId] : " + copy_id);
                    console.log("[copyStart] : [originalChildId] : " + originalChildId);        
                    console.log("[copyStart] : [changeChild_id] : " + changeChildId); 
                    console.log("");  
                    
                }                
            }  
            document.getElementById(changeChildId).innerText = "복사 : " + String(copyCount); // 자식 p 태그 텍스트값 변경 실시


            // 전역 변수 복사 카운트 증가 및 top 값 증가 실시  
            copyCount ++; 
            copyTop = copyTop+5;  
        }; 
                
    </script>

​

​

​

[body 소스코드]

<body>

<!-- original layout -->
<div id = "container"
    style="width: 50%; height: 15%; margin: 0 auto; padding: 0; border: none; background-color: #444444; 
        float: top; position: relative; top: 5%; left: 0%; display: table;"
    onclick="copyStart();">

       <p id="txt" 
            style="display: table-cell; text-align: center; vertical-align: middle; color: #ffffff; font-size: 150%;">
            원본
        </p>
</div>

</body>

[결과 출력]

​

[요약 설명]

​

/*

[JS 요약 설명]

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

2. cloneNode : 특정 객체 요소를 복사합니다 (true 설정 시 객체에 포함된 자식까지 모두 복사)

3. document.body.appendChild : body 에 특정 태그를 추가합니다

4. setAttribute : 특정 태그 속성을 지정합니다 (초기 설정, 변경 등 ...)

5. document.getElementById.style : 특정 태그 스타일 속성값을 변경합니다

6. innerText : 특정 태그 텍스트 값을 확인 및 변경할 수 있습니다

*/

 

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

107. (javascript/자바스크립트) for in 구문을 사용해서 json Object 형태 key , value 확인 실시  (0) 2021.08.06
106. (javascript/자바스크립트) 특정 객체 속성 값 확인 및 설정, 삭제 - getAttribute , setAttribute , removeAttribute  (0) 2021.08.06
104. (javascript/자바스크립트) CryptoJS 사용해 aes 128 , aes 256 비밀키 인코딩 (encode) 및 디코딩 (decode) 수행 실시  (0) 2021.07.28
103. (javascript/자바스크립트) bar chart 반응형 및 커스텀 차트 작업 실시 - chart js 라이브러리 사용  (0) 2021.07.27
102. (javascript/자바스크립트) 차트 chart 라이브러리 모음 정리  (0) 2021.07.27
'JavaScript' Related Articles more
Comments