Link Search Menu Expand Document
Gekdev

Dom Manipulation

Table of contents

  1. Get Content and Attributes
    1. Content
    2. Attribute
  2. Set Content and Attributes
    1. Content
    2. Attribute
  3. Add Elements
    1. New HTML Content
  4. Remove Elements
    1. Remove Elements/Content
  5. Get and Set CSS Classes
    1. Manipulating CSS
  6. Dimensions
    1. What is Dimensions?
    2. Dimensions Methods
    3. Dimensions Tips

jQuery에는 HTML 요소 및 속성을 변경하고 조작하는 강력한 방법이 포함되어있음!

중요한 부분 중 하나는 DOM을 조작할 수 있다는 것

쉽게 접근하고 조작할 수 있는 다양한 DOM 관련 메소드가 제공됨

Get Content and Attributes

Content

  • html()

    셀렉한 요소에 존재하는 자식태그을 통째로 읽어올때 사용됨 (전체긁음 including HTML markup)

    ※ 태그 동적추가할때 주로 사용됨

      $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });

  //This is some <b>bold</b> text in a paragraph.

  • text()

    셀렉한 요소에 존재하는 자식태그들 중에 html태그는 모두 제외 한 채 문자열만 출력하고자 할때 사용됨 (문자만 긁음)

    ※ html태그까지 모두 문자로 인식시켜줌

      $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });

  //This is some bold text in a paragraph.

  • val()

    input 태그에 정의된 value속성의 값을 확인하고자 할때 사용됨

      $("#btn1").click(function(){
    alert("Value: " + $("#test").val());
  });

Attribute

  • attr()

    get attribute values

    일반적인 태그속성의 값을 가지고자 할때

      $("button").click(function(){
    alert($("#w3s").attr("href"));
  });

  • prop()

    get attribute values

    태그속성에 따라서 기능이 제어되는 속성을 가지고자 할 때

      $("button").click(function(){
    alert($("#w3s").attr("href"));
  });

Set Content and Attributes

Content

  • html(…)

    셀렉한 요소를 HTML 포함해서 설정할때

    ※ 태그 동적추가할때 주로 사용됨

      $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });

  //Hello world!

  • text(…)

    셀렉한 요소의 텍스트 내용을 설정할때

    셀렉터 태그내에 존재하는 자식태그들 중에 html태그는 모두 제외 한 채 문자열만 출력하고자 할때 사용됨 (문자로만 긁음)

    ※ html태그까지 모두 문자로 인식시켜줌

      $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });

  //Hello world!

  • val(…)

    input 태그에 정의된 value속성의 값을 설정할때 사용됨

      $("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
  });

Callback Function for text(), html(), and val()

인덱스(i, 현재 요소의 순번)와 원래 값(origText) 매개변수가 있음

$("#btn1").click(function(){
  $("#test1").text(function(i, origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i, origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Attribute

  • attr(“property”,”value”)

    get attribute values

    일반적인 태그속성의 값을 변경하고자 할때

      $("button").click(function(){
    $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
  });

  or 

  $("button").click(function(){
    $("#w3s").attr({
      "href" : "https://www.w3schools.com/jquery/",
      "title" : "W3Schools jQuery Tutorial"
    });
  });

Callback Function for attr()

인덱스(i, 현재 요소의 순번)와 원래 값(origText) 매개변수가 있음

$("button").click(function(){
  $("#w3s").attr("href", function(i, origValue){
    return origValue + "/jquery/";
  });
});

...html
<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>

  • prop(“property”,”value”)

    get attribute values

    태그속성에 따라서 기능이 제어되는 속성을 변경하고자 할 때

      $("button").click(function(){
    alert($("#w3s").attr("href"));
  });

Difference between attr and prop

  • checked : prop - true / attr - checked
  • readonly : prop - true / attr - readonly
  • disabled : prop - true / attr - disabled

// 둘이 지원여부에 차이가 있어서 둘중 하나 되는것 사용

Add Elements

New HTML Content

  • append()

    선택한 요소의 자식들 중 마지막에 자식 컨텐츠 추가 (자식, 뒤로 넣기)

    어순 바꾸기 가능, 바꿔도 들어가는 순서는 모두 동일

      $("p").append(" <b>Appended text</b>.");

  어순 바꾸기 

  $("<span>appendTo1</span>").appendTo($("#box"))

  • prepend()

    선택한 요소의 자식들 중 첫번째에 자식 컨텐츠 추가 (자식, 앞으로 넣기)

    어순 바꾸기 가능, 바꿔도 들어가는 순서는 모두 동일

      $("ol").prepend("<li>Prepended item</li>");

  어순 바꾸기

  $("<span>prependTo1</span>").prependTo($("#box"))

append로 요소를 추가하는 3가지 방법

  1. Create element with HTML

  2. Create with jQuery

  3. Create with DOM

// this would have worked for prepend() too

function appendText() {
  var txt1 = "<p>Text.</p>";               // 1 
  var txt2 = $("<p></p>").text("Text.");   // 2
  var txt3 = document.createElement("p");  // 3
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
}

  • after()

    선택한 요소의 뒤로 형제 컨텐츠 넣기

    맨 처음 쓴 after()가 가장 뒤로 감

    어순 바꾸기 가능, 바꿔도 들어가는 순서는 모두 동일

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

  어순 바꾸기

  $("<span>insertAfter</span>").insertAfter("#box")

  • before()

    선택한 요소의 앞으로 형제 컨텐츠 넣기

    맨 처음 쓴 before()가 가장 앞으로감

    어순 바꾸기 가능, 바꿔도 들어가는 순서는 모두 동일

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

  어순 바꾸기

  $("<span>insertBefore</span>").insertBefore("#box")

after로 요소를 추가하는 3가지 방법

  1. Create element with HTML

  2. Create with jQuery

  3. Create with DOM

// this would have worked for prepend() too

function afterText() {
  var txt1 = "<b>I </b>";                    // 1 
  var txt2 = $("<i></i>").text("love ");     // 2
  var txt3 = document.createElement("b");    // 3
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}

Remove Elements

Remove Elements/Content

  • remove()

    선택한 요소와 그 자식들까지 모두 지워버림

    remove(selector)을 통해 선택한 자식만 지워버릴 수 있음 (선택한 요소는 지워지지 않음)

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

  or

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

  • empty()

    선택한 요소의 자식들만 지워버림

    empty(selector)는 없음!

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

Get and Set CSS Classes

Manipulating CSS

  • addClass()

    선택한 요소에 하나 이상의 클래스 추가

      $("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
  });

  or

  //multiple 
  $("button").click(function(){
    $("#div1").addClass("important blue");
  });

  • removeClass()

    선택한 요소에 class 모두 제거

      $("button").click(function(){
    $("h1, h2, p").removeClass("blue");
  });

  • toggleClass()

    선택한 요소에 클래스를 토글함 (= add,removeClass 합친것)

      $("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
  });

  • css()

    선택한 요소의 하나 이상의 스타일값을 정하거나 가져옴

    syntax

    • CSS값을 가져올때

      css(“propertyname”);

    • CSS값을 수정할때

    //1개

    css(“propertyname”,”value”);

    //여러개

    css({“propertyname”:”value”,”propertyname”:”value”,…});

      $("p").css("background-color");

  $("p").css("background-color", "yellow");
  $("p").css({"background-color": "yellow", "font-size": "200%"});

Dimensions

What is Dimensions?

Dimensions Methods

  • width()

    순수한 가로값만을 가져오거나 설정

    excludes Padding, Border, Margin value

      Get : $("#div1").width()

  Set : $("#div1").width("500px")

  • height()

    순수한 세로값만을 가져오거나 설정

    excludes Padding, Border, Margin value

      Get : $("#div1").height()

  Set : $("#div1").height("500px")

  • innerWidth()

    페딩포함 가로값을 가져오거나 설정

      Get : $("#div1").innerWidth()

  Set : $("#div1").innerWidth("500px")

  • innerHeight()

    페딩포함 세로값을 가져오거나 설정

      Get : $("#div1").innerHeight()

  Set : $("#div1").innerHeight("500px")

  • outerWidth()

    페딩과 보더값을 포함한 가로값

      Get : $("#div1").outerWidth()

  Set : $("#div1").outerWidth("500px")

  • outerHeight()

    페딩과 보더값을 포함한 세로값

      Get : $("#div1").outerHeight()

  Set : $("#div1").outerHeight("500px")

  • outerWidth(true)

    페딩, 보더, 마진값을 포함한 가로값

      Get : $("#div1").outerWidth(true)

  • outerHeight(true)

    페딩, 보더, 마진값을 포함한 세로값

      Get : $("#div1").outerHeight(true)

Dimensions Tips

  • document or window width

      $("button").click(function(){
    var txt = "";
    txt += "Document width/height: " + $(document).width();
    txt += "x" + $(document).height() + "\n";
    txt += "Window width/height: " + $(window).width();
    txt += "x" + $(window).height();
    alert(txt);
  });

  • Set at the same time

      $("button").click(function(){
    $("#div1").width(500).height(500);
  });

이 웹사이트는 jekyll로 제작되었습니다. Patrick Marsceill, Distributed by an MIT license.