Truy cập các phần tử DOM

jQuery hỗ trợ các phương thức truy cập các phần tử trong trang web sau: theo ID, theo tên thẻ HTML, theo thuộc tính HTML, theo tên CSS, theo XPath.

1. Thông qua ID
Cú pháp truy cập phần tử DOM theo ID có dạng: $('#ID'). Thí dụ 1, ẩn phần tử DOM có ID là 'MyID':

<script>
<!--
$(function(){
  $('#MyID').hide();
});
-->
</script>

2. Thông qua tên thẻ HTML
Cú pháp truy cập phần tử DOM theo thẻ HTML có dạng: $('tagName'). Thí dụ 2, ẩn tất cả các phần tử DOM có tên thẻ 'p':

<script>
<!--
$(function(){
  $('p').hide();
});
-->
</script>

Thí dụ 3, ẩn phần tử DOM đầu tiên có tên thẻ là 'DIV':

<script>
<!--
$(function(){
  $('p:eq(0)').hide();
});
-->
</script>

3. Thông qua thuộc tính HTML
Cú pháp truy cập phần tử DOM theo thuộc tính HTML có dạng $('[@key=@val]'). Thí dụ 4, chọn lựa các phần tử DOM có tên thẻ là 'input' và thuộc tính 'type' là 'hidden', sau đó, thay đổi giá trị của các phần tử đó thành 'I am a hidden field':

<script>
<!--
$(function(){
  $('input[@type=hidden]').each(function(){
    $(this).val('I am a hidden field');
  });
});
-->
</script>

Kỳ tới:
4. Truy cập phần DOM theo phương thức XPath
5. Truy cập phần DOM theo phương thức CSS
6. Các phương thức truy cập đặc biệt

Thế Hồng,

Tham khảo:
1. JQuery docs