Truy cập DOM trong jQuery

Nhật Vượng

jQuery là một công cụ vô cùng mạnh mẽ. Nó cung cấp các phương thức đa dạng để truy cập DOM (DOM Traversal Method), giúp chúng ta chọn các phần tử trong một tài liệu một cách ngẫu nhiên hoặc theo phương thức liên tục.

Hầu hết DOM Traversal Method không sửa đổi đối tượng jQuery và chúng được sử dụng để lọc các phần tử của chúng từ một tài liệu trên cơ sở các điều kiện đã cho.

Tìm kiếm các phần tử bởi chỉ mục (index) trong jQuery

Bạn xem xét ví dụ sau về một tài liệu đơn giản với nội dung HTML sau:

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
	
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
		
   </body>
	
</html>

Nó sẽ tạo kết quả sau:

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

Ở trên, mỗi list có một index riêng của nó, và có thể được xác định vị trí bởi sử dụng phương thức eq(index) như ví dụ dưới.

Mỗi phần tử con bắt đầu index của nó từ 0, vì thế, list item 2 sẽ được truy cập bởi sử dụng $("li").eq(1) và tiếp tục như thế.

Ví dụ

Ví dụ đơn giản sau thêm màu cho list item thứ ba.

<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() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
		
   </head>
	
   <body>
	
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
		
   </body>
</html>

Nó sẽ cho kết quả sau:

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

Lọc các phần tử trong jQuery

Phương thức filter (selector) có thể được sử dụng để lọc ra tất cả các phần tử từ tập hợp các phần tử được so khớp mà không so khớp với Selector đã cho, selector có thể được viết bằng cách sử dụng bất kỳ cú pháp Selector nào.

Ví dụ

Ví dụ đơn giản sau áp dụng màu tới các list mà liên kết với class là middle:

<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() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
		
   </head>
	
   <body>
	
      <div>
         <ul>
            <li class="top">list item 1</li>
            <li class="top">list item 2</li>
            <li class="middle">list item 3</li>
            <li class="middle">list item 4</li>
            <li class="bottom">list item 5</li>
            <li class="bottom">list item 6</li>
         </ul>
      </div>
		
   </body>
</html>

Nó sẽ cho kết quả sau:

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

Xác định vị trí các phần tử con trong jQuery

Phương thức find (selector) có thể được sử dụng để xác định vị trí tất cả phần tử con của một loại phần tử cụ thể. selector có thể được viết bởi sử dụng bất kỳ cú pháp selector nào.

Ví dụ

Ví dụ đơn giản sau chọn tất cả phần tử <span> có sẵn bên trong các phần tử <p> khác nhau.

<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() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
		
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
	
</html>

Nó sẽ cho kết quả sau:

This is 1st paragraph and THIS IS RED
This is 2nd paragraph and THIS IS ALSO RED

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

Bảng dưới liệt kê các phương thức hữu ích giúp bạn có thể sử dụng để lọc ra các phần tử đa dạng từ một danh sách các phần tử DOM:

Phương thức	Mô tả
eq (index)	Rút gọn tập hợp phần tử được so khớp thành một phần tử đơn.
filter (selector)	Gỡ bỏ tất cả phần tử từ tập hợp các phần tử được so khớp mà không so khớp với selector cụ thể đã cho.
filter (fn)	Gỡ bỏ tất cả phần tử từ tập hợp các phần tử được so khớp mà không so khớp với hàm cụ thể đã cho.
is (selector)	Kiểm tra sự chọn lọc hiện tại với một Expression và trả về true, nếu ít nhất một phần tử của sự chọn lọc đó phù hợp với selector đã cho.
map (callback)	Tịnh tiến một tập hợp các phần tử trong đối tượng jQuery vào trong tập hợp các giá trị khác trong một mảng jQuery (nếu có thể hoặc không chứa các phần tử).
not (selector)	Gỡ bỏ tất cả các phần tử so khớp với selector đã cho từ tập hợp các phần tử được so khớp.
slice (start, [end])	Chọn một tập hợp con của các phần tử được so khớp.

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

Bảng dưới liệt kê tất cả phương thức hữu ích bạn có thể sử dụng để xác định vị trí các phần tử đa dạng trong một DOM:

STT	Phương thức & Miêu tả
1	add (selector) Thêm nhiều phần tử, đã so khớp bởi selector đã cho, tới tập hợp các phần tử được so khớp.
2	andSelf ( ) Thêm sự chọn lọc trước tới sự chọn lọc hiện tại
3	children ([selector]) Nhận một tập hợp các phần tử chứa tất cả các phần tử con trực tiếp duy nhất của mỗi một trong tập hợp các phần tử được so khớp.
4	closest (selector) Nhận một tập hợp các phần tử chứa phần tử cha gần nhất mà so khớp selector đã cho, bao gồm phần tử bắt đầu
5	contents ( ) Tìm tất cả node con bên trong các phần tử được so khớp (bao gồm cả các text node), hoặc nội dung tài liệu, nếu phần tử là một Iframe.
6	end ( ) Biến đổi hoạt động phá hủy (destructive) gần đây nhất, thay đổi tập hợp các phần tử về trạng thái trước đó.
7	find (selector) Tìm kiếm các phần tử con mà so khớp với selector đã cho.
8	next ([selector]) Nhận một tập hợp các phần tử chứa anh (em) kế tiếp duy nhất của mỗi phần tử trong tập hợp phần tử đã cho.
9	nextAll ([selector]) Tìm tất cả các phần tử anh em kế sau phần tử hiện tại
10	offsetParent ( ) Trả về một tập hợp jQuery với phần tử cha đã xác định vị trí của phần tử được so khớp đầu tiên
11	paren([selector]) Nhận cha trực tiếp của một phần tử. Nếu được gọi trên một tập hợp các phần tử, phương thức parent trả về một tập hợp các phần tử cha trực tiếp duy nhất
12	parents ([selector]) Nhận một tập hợp các phần tử chứa tổ tiên (ancestor) của tập hợp các phần tử đã so khớp (ngoại trừ các phần tử root)
13	prev ([selector]) Nhận một tập hợp các phần tử chứa phần tử anh em ở trước duy nhất của mỗi phần tử trong tập hợp các phần tử đã so khớp.
14	prevAll ([selector]) Tìm tất cả phần tử anh em ở trước phần tử hiện tại
15	siblings ([selector]) Nhận một tập hợp phần tử chứa tất cả phần tử anh em duy nhất của mỗi phần tử trong tập hợp các phần tử đã cho