[jQuery] 3. jQuery와 DOM

※ 본 내용은 w3schools jQuery 튜토리얼에 잡담, 추가로 검색해서 넣은 내용 등으로 이루어져 있으므로 원래 내용은 아래 링크를 참고하자.

https://www.w3schools.com/jquery/default.asp

06 jQuery와 HTML

jQuery는 DOM 조작이 가능하다고 제일 앞에서 말했었다.

DOM의 개념이 너무 추상적으로만 잡혀있어서 깔끔하게 정리하려고 여기저기 검색해봤는데

간단히 '스크립팅 언어로 웹페이지에 있는 object에 접근하고 그 object를 조작하기 쉽게 하기위한 구조' 정도로 말할 수 있겠다.

우리가 javaScript에서 흔히 사용하던 document.getElementById() 같은 메소드들도 DOM API 중 하나이다.

블로그를 찾아보면 전부 위키에서 긁어온 것마냥 똑같은 말만 해뒀는데 그 말이 구체적으로 이해가 안돼서 고생하다가

검색을 한참 해본 후에야 나의 고민거리를 해결해주는 사이트를 찾았다.

설명이 이해하기 쉽게 되어 있으니 DOM 개념이 헷갈리는 사람들이 참고하면 좋을 것 같다.

http://poiemaweb.com/js-dom

 1) DOM get

DOM이 무엇인지 알았으니 이제 jQuery를 이용해서 이 DOM에 어떻게 접근하는지 알아보자.

앞에서 tag, id, name 등으로 HTML 요소를 선택하는 것 까지는 배웠다.

그럼 이번엔 그 요소들의 내용을 가져오거나 그 요소들에 값을 입력해보자.

jQuery는 DOM 조작을 위해 세가지 메소드를 제공하는데 그게 바로 text(), html(), val()이다.

text()는 element의 text 내용만을 다루는 메소드로 기존 javaScript에서 document.getElementById().textContent 와 같은 역할을 한다.

html()은 element의 전체 내용을 다루는 메소드로 html markup도 포함한다. document.getElementById().innerHTML 과 같은 역할이다.

val()은 form 필드의 value 값을 다루는 메소드로 document.getElementById().value 와 같은 역할을 한다.

text와 html의 차이는 markup이 포함되냐 안되냐의 차이인데

예를 들어 <p>HELLO <b>WORLD</b></p> 라는 코드가 있을 때

$("p").text()는 'HELLO WORLD'만 출력하고, $("p").html()은 'HELLO <b>WORLD</b>' 로 출력되는 차이가 있다.

$("#btn1").click(function(){

    alert("Text : " + $("#test").text());

}); 

이처럼 소스를 구현해두고 btn1을 클릭하면 test라는 id를 가진 element의 text 내용을 alert로 띄우게 된다.

text나 value 외에도 attr() 메소드를 이용해 선택한 element의 속성값도 가져올 수 있다.

$("button").click(function(){

    alert($("#test").attr("href"));

});

이처럼 attr() 메소드 안에 가져오고 싶은 속성명을 적으면 된다.

 2) DOM set

set 메소드는 get에서 사용했던 것과 동일하지만 추가적으로 변수를 넣어야 한다.

예제를 보면 바로 이해가 될 것이다.

$("#btn1").click(function(){

    $("#test1").text("Hello world!");

});

 $("#btn2").click(function(){

    $("#test2").html("<b>Hello world!</b>");

});

 $("#btn3").click(function(){

    $("#test3").val("Dolly Duck");

}); 

set 메소드는 변수로 string말고도 callback 메소드도 넣을 수 있는데 특이하게 callback 메소드에 두가지 변수가 필요하다.

선택한 요소가 속한 list 중에서 해당 요소의 index와 변경되기 전 원래 value 값이 필요한데,

callback 메소드라 우리가 특별한 값을 넣을 필요없이 마음에 드는 변수로 선언하고 그 변수를 사용하면 된다.

무슨 말인지 이해가 어렵다면 아래 예제를 먼저 보자.

$("#btn1").click(function(){

    $("#test1").text(function(i, origText){

        return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 

    });

});

예제처럼 i, origText같은 변수로 선언한 후 return문에서 해당 변수를 사용하면 된다.

속성값 또한 get과 동일하게 attr() 메소드를 사용하지만 마찬가지로 변수를 더 넣어줘야 한다.

설정하고 싶은 속성명과 속성값을 입력하면 되는데 한번에 여러 속성을 입력하는 것도 가능하다.

$("button").click(function(){

    $("#blog").attr("href", "http://pingukim.tistory.com");

}); 

$("button").click(function(){

    $("#blog").attr({

        "href" : "http://pingukim.tistory.com",

        "title" : "Ping9's BLOG"

    });

}); 

attr() 메소드도 변수로 callback 메소드를 넣을 수 있는데

위에서 봤던 set 메소드들과 마찬가지로 해당 요소의 index와 변경되기 전 value 값을 받아온다.

$("button").click(function(){

    $("#w3s").attr("href", function(i, origValue){

        return origValue + "/jquery"; 

    });

}); 

 3) DOM add

이번엔 새로운 HTML 요소를 추가해보자.

추가에 관련된 메소드는 append(), prepend(), after(), before() 4가지가 있다.

간단한 사용예제를 보도록 하자.

$("p").append("Some appended text."); 

다음을 실행하면 p요소 뒤쪽에 'Some appended text'라는 문장이 추가된다.

prepend도 형식은 똑같지만 문장이 요소 앞쪽에 추가된다는 차이가 있다.

이와 같은 단순한 텍스트 외에도 마크업이나 jQuery 등을 이용해서 여러 요소를 넣을 수 있다.

function appendText() {

    var txt1 = "<p>Text.</p>";               // Create element with HTML  

    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery

    var txt3 = document.createElement("p");  // Create with DOM

    txt3.innerHTML = "Text.";

    $("body").append(txt1, txt2, txt3);      // Append the new elements 

} 

예제처럼 한 번에 여러 요소를 append할 수도 있다.

위 세가지 txt는 생성방법은 다르지만 같은 결과를 낸다.

자기 입맛에 맞게 쓰면 되겠지만 개인적으로는 html에 익숙해서 txt1 방법을 자주 쓸듯.

after/before는 append/prepend와 사용방법이 동일하다.

$("img").after("Some text after");

$("img").before("Some text before"); 

똑같이 변수로 추가할 내용을 넣으면 된다.

append와 after은 선택한 요소 뒤쪽에, prepend와 before는 앞쪽에 추가된다는 공통점이 있지만,

append와 prepend는 선택한 요소 안에 포함되면서 추가되고 after와 before는 완전히 새로운 요소가 추가된다.

차이를 잘 모르겠다면 append와 after를 썼을 때 원래 요소에 스타일을 추가한다면 append는 스타일이 함께 적용되지만

after는 완전히 새로운 요소이기 때문에 스타일이 적용되지 않는다 로 이해하면 쉽다.

 4) DOM remove

add를 배웠으니 remove도 배워보자.

remove 관련 메소드에는 remove()와 empty() 두 가지가 있는데

remove()는 선택된 요소, 그 요소의 child 요소까지 다 없애버리고, empty()는 선택된 요소의 child 요소만을 없앤다.

$("#div1").remove();

$("#div1").empty();

같은 요소에 대해 다음을 각각 실행해보면

remove는 div1와 div1의 child까지 모두 삭제되고, empty는 div1의 child만 삭제되는 것을 확인할 수 있다.

그리고 변수를 여러개 넣으면 한 번에 여러 요소를 삭제할 수도 있다.

$("p").remove(".test, .demo");

위 예제를 실행하면 class가 test와 demo인 모든 요소가 삭제된다.

물론 id나 name 등을 사용하여 제거하는 것도 가능하다.

이 외에도 css()같은 CSS관련 메소드들도 있는데

CSS는 특별한 경우가 아닌 이상 jQuery로 만질 일이 별로 없을 것 같으니 나중에 필요할 때 더 찾아보는 걸로 하자.

더 많은 HTML 관련 메소드들은 https://www.w3schools.com/jquery/jquery_ref_html.asp 사이트를 참고하도록 하자