[ JavaScript & jQuery ] html 태그 객체 접근

html태그에 접근

자바스크립트와 JQuery가 html태그에 접근하기 위해서는 html태그를 객체로 포장해서 데리고 오게 됩니다.

방법은 html태그에 css 선택자 문법을 사용하여 id혹은 class속성을 부여하는것 입니다.

css 선택자를 기준으로 자바스크립트와 jQuery가 html태그에 접근할 수 있습니다.

 

input 태그에 btn이라는 class속성 부여합니다.

<input type="button" value="목록" class="btn" id="modBtn" onclick="location.href='/board/list'">

 

자바스크립트로  html태그 접근

    var modifyBtn = document.getElementById("#modBtn"); 

document.getElementById("")함수를 통해 얻어온 modBtn이라는 class속성을 var타입 변수 modifyBtn에 저장합니다.

<script>
$(function(){ 
    var modifyBtn = document.getElementById("#modBtn"); 

    modifyBtn.click(function() {
    console.log('수정버튼이 클릭됨!');
    })

});
</script>

 

 

jQuery로 html태그 접근

    var modifyBtn = $("#modBtn");

jQuery는 $() 문법을 사용하여 modBtn이라는 class속성을 var타입 변수 modifyBtn에 저장합니다.

<input type="button" value="목록" class="btn" onclick="location.href='/board/list'"

<script>
$(function(){ 
    var modifyBtn = $("#modBtn");
    
    modifyBtn.click(function() {
    console.log('수정버튼이 클릭됨!');
    })

});
</script>

 

이제 javascript & jQuery 각각 담아온 변수에 함수를 통해 이벤트를 부여합니다.

 

#modBtn이 담겨져있는 modifyBtn변수에 click()함수를 부여하는데 이것은 modBtn이라는 클래스속성을 가지고 있는 태그가 클릭되면 이벤트가 발생하게 되는것입니다.

function()으로 이름없는 함수를 정의하고 {블록안에 consol.log라는 콘솔에 출력해줄수있는 함수내용을 선언합니다. }

 

이제 modBtn이라는 클래스속성이 부여된 버튼이 클릭되면 클릭이벤트가 발생하게 되고 F12개발툴 콘솔창에 수정버튼이 클릭됨! 이라는 문구가 뜨게됩니다.

 

 

---

[JavaScript]

<script>
$(function(){ 
    var modifyBtn = document.getElementById("#modBtn"); 

    modifyBtn.click(function() {
    console.log('수정버튼이 클릭됨!');
    })

});
</script>

[jQuery]

<input type="button" value="목록" class="btn" id="modBtn" onclick="location.href='/board/list'">

<script>
$(function(){ 
    var modifyBtn = $("#modBtn");
    
    modifyBtn.click(function() {
    console.log('수정버튼이 클릭됨!');
    })

});
</script>