ふたりで

moden javascript attribute data get set (선택요소의 data값 가져오기, 수정하기 moden javascript방법) 본문

javascript

moden javascript attribute data get set (선택요소의 data값 가져오기, 수정하기 moden javascript방법)

graykang 2022. 10. 27. 15:21
728x90
반응형
SMALL

선택 요소의 data값 가져오기, 수정하기 의 moden javascript 방법.

주) addEventListener 의 경우 복수 선택자 queryselectorAll과 getElementsByClassName 을 선택자로 사용할 경우 선택 요소가 1개여도 데이터 형식이 collction 타입이기 때문에 for문을 활용하여 설정해야 한다... 

아래 소스 코드에서 for()문이 사용된 부분 참고...

 <html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
</head>
<body>
    <input type="checkbox" class="js_checked_1" id="js_checked_1_Id"
        data-pdtcode="1"
        data-pdtprice="1000"
        data-pdtstock="Y"
        value="1"/><span>체크박스의 data값 찍어보기</span>

    <input type="checkbox" class="js_checked_2" id="js_checked_2_id"/><span>체크박스의 변경된 data값 찍어보기</span>

    <div id="showEvent">
    </div>
<script>
/*
1. jQuery방식
$(selector).attr('data-something', 'stuff')
$(selector).data('something', 'stuff')

2. moden javascript 방식
document.querySelector(selector).dataset['something'] = 'stuff' 
document.querySelector(selector).dataset.something = 'stuff' 
document.querySelector(selector).setAttribute('data-something') = 'stuff'
*/
    var checkBox_js_change = document.getElementsByClassName("js_checked_1");
    for(var i=0; i< checkBox_js_change.length;i++){//selecter 가 class일경우 collction타입이기 때문에 for문을 걸어 줘야 한다.
        checkBox_js_change[i].addEventListener("change", function(event){
            if(this.checked){
                var message = 
                    //이벤트의 종류
                    "<br/>이벤트 종류 : " + 
                    event.type + "<br/>" + 
                    //이벤트가 발생한 오브젝트 정보
                    "<br/>이벤트가 발생한 오브젝트 정보<br/>" + 
                    "event.target : " + event.target + "<br/>" +
                    "event.target.id : " + event.target.id + "<br/>" +  
                    "event.target.name : " + event.target.name + "<br/>" +  
                    "event.target.value : " + event.target.value + "<br/>" +   
                    "event.target.nodeType : " + event.target.nodeType + "<br/>" +   
                    "event.target.nodeName : " + event.target.nodeName + "<br/>" +  
                    "event.target.parentNode.nodeName : " + event.target.parentNode.nodeName + "<br/>" +  
                    "event.target.parentNode.id : " + event.target.parentNode.id + "<br/>" +  
                    "event.target.nextSibling.nextSibling.id : " + event.target.nextSibling.nextSibling.id + "<br/>" +  
                    "event.target.parentNode : " + event.target.parentNode + "<br/>" + 
                    "event.target.parentElement : " + event.target.parentElement + "<br/>" + 
                    "event.target.children : " + event.target.children + "<br/>" + 
                    "event.target.getAttribute('data-pdtstock') : " + event.target.getAttribute("data-pdtstock") + "<br/>" + 
                    "event.target.getAttribute('class') : " + event.target.getAttribute("class") + "<br/>" + 
                    "event.srcElement.value : " + event.srcElement.value  + " ==> srcElement == target ( 브라우저에 따라 다름 )"//srcElement == target ( 브라우저에 따라 다름 );
  
                //attrivute data-pdtstock 의 값을 N으로 업데이트 한다.
                event.target.setAttribute("data-pdtstock","N");
                document.getElementById('showEvent').innerHTML = message;
            }else{
                document.getElementById('showEvent').innerHTML = "";
            }
        });

    }

    var checkBox_js_change2 = document.getElementById("js_checked_2_id");
    checkBox_js_change2.addEventListener("change", function(event){
        if(checkBox_js_change2.checked){//js_checked_2_id의 체크박스 값이 체크일때만
            var message = 
                //이벤트의 종류
                "<br/>이벤트 종류 : " + 
                event.type + "<br/>" + 
                //첫번째 체크 박스의 벼경된 값 찍어보기
                "<br/>첫번째 체크 박스의 벼경된 값 찍어보기<br/>"

            for(var i=0; i< checkBox_js_change.length;i++){
                message= message+"event.target.getAttribute('data-pdtstock') : " + checkBox_js_change[i].getAttribute("data-pdtstock") + "<br/>"   
            }

            document.getElementById('showEvent').innerHTML = message;
        }else{
            document.getElementById('showEvent').innerHTML = "";
        }
    });
</script>

</body>
</html>

결과1:

결과2:

728x90
반응형
LIST
저작자표시

'javascript' 카테고리의 다른 글

javascript+jquery+submit+loading 로딩중 표시 하기  (0) 2022.11.01
jquery+javascript 전화번호 자동완성 및 유효성검사  (0) 2022.10.28
jquery 선택요소의 Data 값 가져오기, 수정하기  (0) 2022.10.26
크롬 개발자 도구 차단 2, Detect browser developer tools by javascript 2(chrome, firefox, Edge)  (2) 2022.10.25
javascript D-Day 날짜계산 일,시,분,초  (0) 2022.10.18
'javascript' Related Articles more
Comments