Thao tác DOM trong jQuery

Tuấn Phong

jQuery cung cấp các phương thức để thao tác với DOM một cách cực kỳ hiệu quả. Bạn không cần viết những đoạn code quá dài để sửa đổi giá trị thuộc tính của bất kỳ phần tử nào hoặc để trích (extract) các đoạn HTML code từ một thẻ p hoặc div.

jQuery cung cấp các phương thức như .attr(), .html(), .val() để thu nhận thông tin từ các phần tử DOM để sử dụng cho lần sau.

Thao tác nội dung trong jQuery

Phương thức html( ) nhận nội dung html (bên trong HTML) của phần tử đã so khớp đầu tiên.

Dưới đây là cú pháp của phương thức .html():

selector.html( )

Ví dụ

Ví dụ đơn giản sau sử dụng các phương thức .html() và .text(val). Trong đó, .html() thu nhận nội dung HTML từ đối tượng và sau đó phương thức .text(val) thiết lập giá trị của đối tượng bởi sử dụng tham số đã truyền.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
		
   </head>
	
   <body>
	
      <p>Click on the square below:</p>
      <span id="result"> </span>
		
      <div id="division" style="background-color:blue;">
         This is Blue Square!!
      </div>
		
   </body>
	
</html>

Thay thế phần tử DOM trong jQuery

Bạn có thể thay thế hoàn toàn một phần tử DOM với các phần tử HTML hoặc DOM đã xác định. Phương thức replaceWith( content ) thực hiện mục đích này rất hiệu quả.

Sau đây là cú pháp:

selector.replaceWith( content )

Ở đây, content là những gì bạn muốn thay thế cho phần tử ban đầu. Nó có thể là HTML hoặc văn bản.

Ví dụ

Ví dụ đơn giản sau sẽ thay thế phần tử div với "<h1>JQuery is Great</h1>":

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
		
   </head>
	
   <body>
	
      <p>Click on the square below:</p>
      <span id="result"> </span>
		
      <div id="division" style="background-color:blue;">
         This is Blue Square!!
      </div>
		
   </body>
</html>

Gỡ bỏ các phần tử DOM trong jQuery

Có thể có một tình huống khi bạn muốn gỡ bỏ một hoặc nhiều phần tử DOM từ tài liệu. jQuery cung cấp hai phương thức để xử lý tình huống này:

Phương thức empty( ) gỡ bỏ tất cả node con từ tập hợp các phần tử đã so khớp, trong khi phương thức remove( expr ) gỡ bỏ tất cả các phần tử đã so khớp từ DOM.

Dưới đây là cú pháp:

selector.remove( [ expr ])

or 

selector.empty( )

Bạn có thể truyền tham số expr tùy ý để lọc tập hợp các phần tử cần gỡ bỏ.

Ví dụ

Trong ví dụ đơn giản, các phần tử được gỡ bỏ ngay sau khi chúng được click:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
		
   </head>
	
   <body>
	
      <p>Click on any square below:</p>
      <span id="result"> </span>
		
      <div class="div" style="background-color:blue;"></div>
      <div class="div" style="background-color:green;"></div>
      <div class="div" style="background-color:red;"></div>
		
   </body>
	
</html>

Chèn các phần tử DOM trong jQuery

Có thể có tình huống khi bạn muốn chèn một hoặc nhiều phần tử DOM mới vào trong tài liệu đang tồn tại của bạn. jQuery cung cấp nhiều phương thức đa dạng để chèn các phần tử vào các vị trí khác nhau.

Phương thức after( content ) chèn content sau mỗi phần tử đã so khớp, trong khi phương thức before( content ) chèn content trước mỗi phần tử đã so khớp.

Dưới đây là cú pháp của các phương thức:

selector.after( content )

or

selector.before( content )

Ở đây, content là những gì bạn muốn chèn. Nó có thể là HTML hoặc văn bản.

Ví dụ

Trong ví dụ sau, các phần tử div được chèn ngay trước phần tử được click:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
		
   </head>
	
   <body>
	
      <p>Click on any square below:</p>
      <span id="result"> </span>
		
      <div class="div" style="background-color:blue;"></div>
      <div class="div" style="background-color:green;"></div>
      <div class="div" style="background-color:red;"></div>
		
   </body>
	
</html>

Các phương thức thao tác DOM trong jQuery

Dưới đây liệt kê tất cả phương thức mà bạn có thể sử dụng để thao tác các phần tử DOM:

STT	Phương thức & Miêu tả
1	after( content ) Chèn content sau mỗi phần tử đã so khớp
2	append( content ) Phụ thêm content tới bên trong mỗi phần tử đã so khớp
3	appendTo( selector ) Phụ thêm tất cả phần tử đã so khớp tới tập hợp phần tử đã cho khác
4	before( content ) Chèn content trước mỗi phần tử đã so khớp
5	clone( bool ) Mô phỏng các phần tử DOM đã so khớp, và tất cả các Event Handler của chúng, và chọn các mô phỏng đó
6	clone( ) Mô phỏng các phần tử DOM đã so khớp và chọn các mô phỏng đó
7	empty( ) Gỡ bỏ tất cả các node con từ tập hợp các phần tử đã so khớp
8	html( val ) Thiết lập các nội dung HTML của mỗi phần tử đã so khớp
9	html( ) Nhận các nội dung HTML (HTML bên trong) của phần tử đã so khớp đầu tiên
10	insertAfter( selector ) Chèn tất cả phần tử đã so khớp vào sau tập hợp các phần tử đã xác định khác
11	insertBefore( selector ) Chèn tất cả phần tử đã so khớp vào trước tập hợp các phần tử đã xác định khác
12	prepend( content ) Thêm vào trước content tới bên trong mỗi phần tử đã so khớp
13	prependTo( selector ) Thêm vào trước tất cả phần tử đã so khớp tới tập hợp các phần tử đã xác định khác
14	remove( expr ) Gỡ bỏ tất cả phần tử đã so khớp từ DOM
15	replaceAll( selector ) Thay thế các phần tử đã so khớp bởi Selector đã cho với các phần tử được so khớp
16	replaceWith( content ) Thay thế tất cả phần tử đã so khớp với các phần tử HTML hoặc DOM đã xác định
17	text( val ) Thiết lập các nội dung text của tất cả phần tử đã so khớp
18	text( ) Nhận các nội dung text đã tổ hợp của tất cả phần tử đã so khớp
19	wrap( elem ) Bao bọc (wrap) mỗi phần tử đã so khớp với phần tử đã xác định
20	wrap( html ) Wrap mỗi phần tử đã so khớp với nội dung HTML đã xác định
21	wrapAll( elem ) Wrap tất cả phần tử trong tập hợp đã so khớp vào trong một phần tử bao bọc đơn (elem ở đây là phần tử DOM)
22	wrapAll( html ) Wrap tất cả phần tử trong tập hợp đã so khớp vào trong một phần tử bao bọc đơn (html là phần tử HTML)
23	wrapInner( elem ) Wrap các nội dung con bên trong mỗi phần tử đã so khớp (bao gồm các node văn bản) với một phần tử DOM
24	wrapInner( html ) Wrap các nội dung con bên trong mỗi phần tử đã so khớp (bao gồm các node văn bản) với một cấu trúc HTML