Manipulating Elements(요소 조작)

Getting and Setting Information About Elements

기존 요소를 변경하는 여러 가지 방법이 있습니다. 가장 흔한 작업 중 하나는 요소의 내부 HTML 또는 속성을 변경하는 것입니다. 다음은 요소에 대한 정보를 가져오고 설정하는 데 사용할 수 있는 몇 가지 메서드입니다:

html() - HTML 내용을 가져오거나 설정합니다.
text() - 텍스트 내용을 가져오거나 설정하며 HTML은 제거됩니다.
attr() - 제공된 속성의 값을 가져오거나 설정합니다.
width() - 선택된 요소의 너비(픽셀)를 정수로 가져오거나 설정합니다.
height() - 선택된 요소의 높이(픽셀)를 정수로 가져오거나 설정합니다.
position() - 첫 번째 선택된 요소에 대한 위치 정보를 가져옵니다. 이것은 Getter 만 해당됩니다.
val() - 폼 요소의 값을 가져오거나 설정합니다.

요소에 대한 변경 사항은 간단하지만 선택된 모든 요소에 영향을 미칩니다. 하나의 요소만 변경하려면 Setter 메서드를 호출하기 전에 선택에서 해당 요소를 지정해야 합니다.

// 요소의 HTML 변경
$( "#myDiv p:first" ).html( "새로운 <strong>첫 번째</strong> 단락!" );

Moving, Copying, and Removing Elements

DOM에서 요소를 이동하는 여러 가지 방법이 있지만 일반적으로 두 가지 접근 방식이 있습니다:

선택된 요소를 다른 요소에 상대적으로 배치합니다.
선택된 요소에 상대적으로 요소를 배치합니다.

예를 들어 jQuery는 .insertAfter() 및 .after()를 제공합니다. .insertAfter() 메서드는 선택된 요소를 인수로 제공된 요소 뒤에 배치합니다. .after() 메서드는 선택된 요소 뒤에 인수로 제공된 요소를 배치합니다. 이 패턴을 따르는 여러 가지 다른 메서드가 있습니다. .insertBefore() 및 .before(), .appendTo() 및 .append(), 그리고 .prependTo() 및 .prepend()입니다.

가장 합리적인 방법은 선택된 요소가 무엇이고 추가할 페이지의 요소에 대한 참조를 저장해야 하는지에 따라 다릅니다. 참조를 저장해야 하는 경우 항상 첫 번째 접근 방식을 사용해야 합니다. 선택된 요소를 다른 요소에 상대적으로 배치하기 때문에 요소를 반환합니다. 이 경우 .insertAfter(), .insertBefore(), .appendTo(), 및 .prependTo()가 선택해야 할 도구입니다.

// 다양한 접근 방식을 사용하여 요소 이동하기

// 첫 번째 목록 항목을 마지막 목록 항목으로 만들기:
var li = $( "#myList li:first" ).appendTo( "#myList" );

// 동일한 문제에 대한 다른 접근 방식:
$( "#myList" ).append( $( "#myList li:first" ) );

// 우리가 이동한 목록 항목에 액세스할 방법이 없다는 것에 유의하십시오.
// 이것은 목록 자체를 반환합니다.

예제:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jib e gago sibda</title>
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  <style>
  </style>
  <script>
    $(document).ready(function() {
      var li = $("#myList li:first").appendTo("#myList");

      $("#myList").append($("#myList li:first"));
    });
  </script>
</head>
<body>
  <ul id="myList">
    <li>첫 번째 목록 항목</li>
    <li>두 번째 목록 항목</li>
    <li>세 번째 목록 항목</li>
  </ul>
</body>
</html>

Cloning Elements

.appendTo()과 같은 메서드는 요소를 이동시키지만 때로는 요소의 복사본이 필요할 수 있습니다. 이 경우 먼저 .clone()을 사용하세요:

// 요소의 복사본 만들기

// 첫 번째 목록 항목을 목록의 끝에 복사하기:
$( "#myList li:first" ).clone().appendTo( "#myList" );

관련 데이터와 이벤트를 복사해야 할 경우 .clone()에 true를 인수로 전달하십시오.

예제:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jib e gago sibda</title>
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  <style>
  </style>
  <script>
    $(document).ready(function() {
      $("#myList li:first").click(function() {
        alert("click!!!");
      });

      // 첫 번째 목록 항목을 목록의 끝에 복사하기(이벤트는 복사되지 않아서 클릭해도 아무 반응이 없다.)
      $("#myList li:first").clone().appendTo("#myList");

      // 관련 데이터와 이벤트 복사되어 alert 창 확인 가능
      $("#myList li:first").clone(true).appendTo("#myList");
    });
  </script>
</head>
<body>
  <ul id="myList">
    <li>첫 번째 목록 항목</li>
    <li>두 번째 목록 항목</li>
    <li>세 번째 목록 항목</li>
  </ul>
</body>
</html>

Removing Elements

페이지에서 요소를 제거하는 두 가지 방법이 있습니다: .remove()와 .detach()를 사용합니다. 페이지에서 선택한 요소를 영구적으로 제거하려면 .remove()를 사용하세요. .remove()는 제거된 요소를 반환하지만 해당 요소가 페이지로 다시 반환되면 해당 요소에 연결된 데이터와 이벤트가 없습니다.

데이터와 이벤트가 지속되도록 하려면 .detach()를 사용하십시오. .remove()와 마찬가지로 선택을 반환하지만 선택과 관련된 데이터와 이벤트를 유지하므로 나중에 선택을 페이지로 복원할 수 있습니다.

중대한 요소 조작을 수행하는 경우 .detach() 메서드는 매우 유용합니다. 이 경우 요소를 페이지에서 .detach()하여 코드에서 작업한 후 작업이 완료되면 페이지로 다시 복원하는 것이 좋습니다. 이렇게 하면 요소의 데이터와 이벤트를 유지하면서 비용이 많이 드는 "DOM 접근"을 제한할 수 있습니다.

요소를 페이지에 남겨두고 내용을 제거하려면 .empty()를 사용하여 요소의 내부 HTML을 삭제할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jib e gago sibda</title>
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  <style>
  </style>
  <script>
    $(document).ready(function() {
      $("#anotherElement, #emptyElement").click(function() {
        alert("click!!!");
      });

      // 영구 제거
      $("#myElement").remove();

      // 요소 분리(데이터와 이벤트는 보존)
      var el = $("#anotherElement").detach();

      // 내용만 제거
      $("#emptyElement").empty();

      // 다시 붙이면 데이터와 이벤트 모두 확인 가능! (emptyElement의 이벤트도 남아있음)
      $("#emptyElement").append(el);
    });
  </script>
</head>
<body>
  <div id="myElement">영구 제거 예제</div>
  <div id="anotherElement">데이터랑 이벤트 보존 후 분리 예제</div>
  <div id="emptyElement">내용만 제거!</div>
</body>
</html>

Creating New Elements

jQuery는 선택에서 사용되는 동일한 $() 메서드를 사용하여 새로운 요소를 만드는 간단하고 우아한 방법을 제공합니다.

// HTML 문자열에서 새로운 요소 만들기.
$( "<p>이것은 새로운 단락입니다</p>" );
$( "<li class="new">새로운 목록 항목</li>" );

// 속성 개체와 함께 새로운 요소 만들기.
$( "<a/>", {
html: "이것은 <strong>새로운</strong> 링크입니다",
"class": "new",
href: "foo.html"
});

위의 두 번째 인수인 속성 개체에 대한 주의 사항은 클래스 속성 이름 class가 인용부호로 묶여 있지만 html 및 href 속성 이름은 그렇지 않다는 것입니다. 속성 이름은 일반적으로 예약어가 아닌 한 인용 부호로 묶을 필요가 없습니다.

새로운 요소를 만들면 즉시 페이지에 추가되지 않습니다. 요소를 생성한 후 페이지에 추가하는 여러 가지 방법이 있습니다.

// 페이지에 새로운 요소 가져오기.

var myNewElement = $( "<p>새 요소</p>" );

myNewElement.appendTo( "#content" );

myNewElement.insertAfter( "ul:last" ); // 이렇게 하면 #content의 p가 제거됩니다!

$( "ul" ).last().after( myNewElement.clone() ); // p를 복제하여 이제 두 개가 있습니다.

만든 요소를 변수에 저장할 필요는 없습니다. 요소를 바로 $() 다음에 있는 메서드를 호출할 수 있습니다. 그러나 대부분의 경우 나중에 요소를 선택할 필요가 없도록 요소에 대한 참조가 필요합니다.

또한 페이지에 요소를 추가하는 동안 요소를 만들 수 있지만 이 경우 새로 생성된 요소에 대한 참조를 얻지 못한다는 점에 유의하십시오.

// 요소를 만들고 동시에 페이지에 추가하기.
$( "ul" ).append( "<li>목록 항목</li>" );

새로운 요소를 페이지에 추가하는 구문은 간단하므로 동일한 컨테이너에 여러 요소를 추가하는 경우 HTML을 하나의 문자열로 연결한 다음 이 문자열을 하나씩 추가하는 대신 컨테이너에 추가합니다. 시간별로 연결하십시오. 모든 조각을 모아 하나의 문자열로 결합한 다음 컨테이너에 추가합니다.

var myItems = [];
var myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {
myItems.push( "<li>항목 " + i + "</li>" );
}

myList.append( myItems.join( "" ) );

예제:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jib e gago sibda</title>
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  <style>
  </style>
  <script>
    $(document).ready(function() {
      $("<p>새 고양이 간식이 들어왔다</p>").appendTo("#content");
      $("<li class='new'>새로운 목록 항목</li>").appendTo("#myList");

      // 속성 개체와 함께 새로운 요소 만들기
      $("<a/>", {
        html: "<strong>신상</strong> 고양이 장난감 링크 바로가기",
        "class": "new",
        href: "foo.html",
      }).appendTo("#content");

      var myItems = [];
      var myList = $("#myList");

      for(var i=0; i<10; i++) {
        myItems.push("<li>항목 " + i + "</li>");
      }

      myList.append(myItems.join(""))
    });
  </script>
</head>
<body>
  <div id="content">고양이 뱃살 주무르고 싶다</div>
  <ul id="myList"></ul>
</body>
</html>

Manipulating Attributes

jQuery의 속성 조작 기능은 광범위합니다. .attr() 메서드를 사용하면 더 복잡한 조작도 가능합니다. 이 메서드는 명시적인 값을 설정하거나 함수의 반환 값을 사용하여 값을 설정할 수 있습니다. 함수 구문을 사용할 때 함수는 두 개의 인수를 받습니다.(속성을 변경하는 요소의 0부터 시작하는 인덱스와 변경 중인 속성의 현재값)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jib e gago sibda</title>
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  <style>
  </style>
  <script>
    $(document).ready(function() {
        // 단일 속성 조작
        $("#myDiv a:first").attr("href", "newDestination.html");

        // 여러 속성 조작
        $("#myDiv a:first").attr({
            rel: "nofollow",
            href: "haha.html"
        });

        // 함수를 사용하여 속성의 새 값 결정
        $("#myDiv a:first").attr({
            rel: "nofollow",
            href: function(idx, href) {
                return "/new/" + href;
            }
        });
    });
  </script>
</head>
<body>
    <div id="myDiv">
        <a href="oldDestination.html">Link</a>
    </div>
</body>
</html>

'Frontend > jQuery' 카테고리의 다른 글

The jQuery Object (1)	2024.03.29
Selecting Elements(요소 선택) & Working with Selections (0)	2024.03.20
Attributes (0)	2024.03.20
Avoiding Conflicts with Other Libraries(다른 라이브러리와 충돌 피하기) (0)	2024.03.20