Làm việc với các phần tử HTML trong JavaScript / jQuery

insertBefore(): Chèn phần tử mới vào trước một phần tử đã có.

parentElement.insertBefore(newDiv, existingElement);

replaceChild(): Thay thế một phần tử con bằng phần tử mới.

parentElement.replaceChild(newDiv, oldDiv);

Thao tác với các phần tử con của phần tử HTML

Để thao tác với các phần tử con của phần tử HTML, bạn có thể sử dụng các thuộc tính sau:

.children: Trả về một HTMLCollection chứa tất cả các phần tử con của phần tử hiện tại.

let children = element.children;

.parentElement: Trả về phần tử cha của phần tử hiện tại.

let parent = element.parentElement;

.nextElementSibling: Trả về phần tử kế tiếp (sibling) của phần tử hiện tại.

let nextSibling = element.nextElementSibling;

.previousElementSibling: Trả về phần tử liền trước của phần tử hiện tại.

let prevSibling = element.previousElementSibling;

Những thao tác này sẽ giúp bạn quản lý, thay đổi và tương tác với các phần tử trong DOM, mang lại khả năng linh hoạt và mạnh mẽ trong việc tạo ra các trang web động và tương tác.

Làm việc với các phần tử HTML trong jQuery

jQuery là một thư viện JavaScript phổ biến, giúp việc thao tác với DOM trở nên dễ dàng hơn. Các cú pháp của jQuery đơn giản và dễ sử dụng, cho phép bạn thực hiện các thao tác với các phần tử HTML một cách nhanh chóng và hiệu quả. Dưới đây là các thao tác cơ bản khi làm việc với các phần tử HTML trong jQuery.

Truy xuất phần tử HTML

Cú pháp trong jQuery để truy xuất các phần tử HTML rất đơn giản và gần gũi với CSS selector:

$('#id'): Chọn phần tử theo id.

let element = $('#myElement');

$('.class'): Chọn tất cả các phần tử có class tương ứng.

let elements = $('.myClass');

$('tag'): Chọn tất cả các phần tử với tên thẻ.

let elements = $('p');

jQuery cũng hỗ trợ các selector CSS nâng cao, cho phép chọn phần tử theo các thuộc tính, trạng thái, hoặc vị trí.

Thao tác với các thuộc tính phần tử

jQuery cung cấp các phương thức để thao tác với thuộc tính của phần tử HTML:

attr(): Lấy hoặc thiết lập giá trị của một thuộc tính.

let href = $('a').attr('href'); // Lấy giá trị của thuộc tính href $('a').attr('href', 'https://www.example.com'); // Đặt giá trị cho thuộc tính href

removeAttr(): Xóa một thuộc tính khỏi phần tử.

$('a').removeAttr('href'); // Xóa thuộc tính href khỏi thẻ <a>

prop(): Lấy hoặc thiết lập giá trị của một thuộc tính DOM, đặc biệt hữu ích với các thuộc tính boolean như checked, disabled, v.v.

let isChecked = $('#checkbox').prop('checked'); // Lấy trạng thái checked của checkbox $('#checkbox').prop('checked', true); // Đặt trạng thái checked của checkbox

val(): Lấy hoặc thiết lập giá trị của các phần tử form (input, select, textarea).

let inputValue = $('#myInput').val(); // Lấy giá trị của input $('#myInput').val('New Value'); // Đặt giá trị cho input

jQuery cung cấp các phương thức giúp bạn thay đổi nội dung của các phần tử:

html(): Lấy hoặc thiết lập nội dung HTML bên trong phần tử.

let content = $('#myDiv').html(); // Lấy nội dung HTML của phần tử $('#myDiv').html('<strong>New HTML Content</strong>'); // Đặt nội dung HTML mới

text(): Lấy hoặc thiết lập nội dung văn bản bên trong phần tử.

let textContent = $('#myDiv').text(); // Lấy nội dung văn bản của phần tử $('#myDiv').text('New text content'); // Đặt nội dung văn bản mới

val(): Như đã đề cập trước, dùng để lấy hoặc thiết lập giá trị của phần tử input.

Thêm, xóa, thay đổi các class

jQuery cung cấp một số phương thức giúp bạn thao tác với các lớp (class) của phần tử HTML:

addClass(): Thêm một hoặc nhiều lớp vào phần tử.

$('#myDiv').addClass('newClass'); // Thêm lớp mới vào phần tử

$('#myDiv').removeClass('oldClass'); // Xóa lớp cũ khỏi phần tử

$('#myDiv').toggleClass('active'); // Chuyển đổi lớp "active"

hasClass(): Kiểm tra xem phần tử có lớp cụ thể không.

if ($('#myDiv').hasClass('active')) { console.log('Element has the active class'); }

jQuery hỗ trợ dễ dàng thêm, xóa và kích hoạt các sự kiện:

on(): Thêm một sự kiện vào phần tử.

$('#myButton').on('click', function() { alert('Button clicked!'); });

$('#myButton').off('click');

trigger(): Kích hoạt một sự kiện đã được đăng ký.

$('#myButton').trigger('click'); // Kích hoạt sự kiện click

Thêm và thao tác với phần tử mới

jQuery giúp bạn thêm và thao tác với phần tử trong DOM một cách dễ dàng:

append(): Thêm nội dung hoặc phần tử vào cuối phần tử hiện tại.

$('#myDiv').append('<p>New paragraph</p>');

$('#myDiv').prepend('<p>New paragraph at the top</p>');

$('#myDiv').before('<p>New paragraph before div</p>');

$('#myDiv').after('<p>New paragraph after div</p>');

remove(): Xóa phần tử khỏi DOM.

$('#myDiv').remove(); // Xóa phần tử khỏi DOM

empty(): Xóa tất cả nội dung con của phần tử.

$('#myDiv').empty(); // Xóa tất cả nội dung con của phần tử

jQuery hỗ trợ các phương thức để làm việc với các phần tử con của phần tử HTML:

children(): Trả về tất cả các phần tử con trực tiếp của phần tử hiện tại.

$('#parent').children(); // Lấy tất cả phần tử con

parent(): Trả về phần tử cha của phần tử hiện tại.

$('#child').parent(); // Lấy phần tử cha của phần tử

siblings(): Trả về tất cả các phần tử anh chị của phần tử hiện tại (trừ chính nó).

$('#myDiv').siblings(); // Lấy tất cả các anh chị của div

find(): Tìm các phần tử con của phần tử hiện tại khớp với selector.

$('#parent').find('.child'); // Tìm phần tử con với class "child"

closest(): Tìm phần tử gần nhất của phần tử hiện tại khớp với selector.

$('#myDiv').closest('.container'); // Tìm phần tử cha gần nhất với class "container"

Những phương thức trên giúp bạn dễ dàng thao tác với các phần tử trong DOM, cung cấp khả năng tạo ra các trang web động, tương tác, và dễ bảo trì hơn. Với jQuery, việc xử lý DOM trở nên dễ dàng và hiệu quả hơn, tiết kiệm thời gian và công sức so với việc sử dụng JavaScript thuần.

So sánh JavaScript thuần và jQuery trong việc làm việc với phần tử HTML

Khi làm việc với DOM, cả JavaScript thuần (Vanilla JavaScript) và jQuery đều có thể đáp ứng nhu cầu xử lý các phần tử HTML. Tuy nhiên, mỗi phương pháp có ưu và nhược điểm riêng, và việc chọn sử dụng cái nào phụ thuộc vào các yếu tố như độ phức tạp của công việc, yêu cầu hiệu suất, và tính tương thích với trình duyệt. Dưới đây là sự so sánh chi tiết giữa JavaScript thuần và jQuery trong việc làm việc với các phần tử HTML.

Cú pháp và sự đơn giản: JavaScript thuần vs jQuery

JavaScript thuần: Để làm việc với các phần tử HTML trong JavaScript thuần, bạn cần sử dụng các phương thức DOM API như getElementById(), getElementsByClassName(), querySelector(), v.v. Cú pháp của JavaScript thuần có thể dài dòng và phức tạp hơn khi bạn phải xử lý nhiều thao tác lặp lại, chẳng hạn như thay đổi các thuộc tính của nhiều phần tử cùng lúc hay thêm sự kiện vào nhiều phần tử.

Ví dụ JavaScript thuần:

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});

jQuery: Cú pháp của jQuery đơn giản và ngắn gọn hơn rất nhiều, giúp giảm thiểu công sức khi làm việc với DOM. jQuery cung cấp một cú pháp dễ đọc hơn với ít dòng mã hơn, sử dụng $() để chọn phần tử và dễ dàng thực hiện các thao tác như thay đổi nội dung, sự kiện, hay các thuộc tính.

Ví dụ jQuery:

$('#myButton').click(function() {
  alert('Button clicked!');
});

Như vậy, nếu bạn đang làm việc với một lượng công việc phức tạp hoặc cần thực hiện các thao tác nhanh chóng, jQuery sẽ giúp bạn tiết kiệm thời gian với cú pháp ngắn gọn và dễ hiểu.

Hiệu suất: JavaScript thuần nhanh hơn nhưng jQuery dễ dàng hơn cho việc thao tác phức tạp

JavaScript thuần: Vì JavaScript thuần không phụ thuộc vào thư viện bên ngoài, nên hiệu suất của nó thường tốt hơn jQuery trong các thao tác đơn giản. Khi bạn cần làm việc với một phần tử cụ thể, JavaScript thuần sẽ nhanh hơn vì không phải tải thêm thư viện và không có các phương thức "tầng" như trong jQuery.

Ví dụ JavaScript thuần:

const button = document.getElementById('myButton');
button.style.backgroundColor = 'blue';

jQuery: jQuery có thể làm giảm hiệu suất vì thư viện này phải tải trước và mỗi phương thức jQuery đều phải thực thi các bước phụ trợ như kiểm tra tính hợp lệ của selector, xử lý nhiều trình duyệt, v.v. Tuy nhiên, đối với các tác vụ phức tạp (như thao tác với nhiều phần tử, quản lý sự kiện động hoặc thực hiện các hiệu ứng), jQuery cung cấp một giải pháp nhanh chóng và dễ dàng mà không cần phải tự mình xử lý các chi tiết.

Ví dụ jQuery:

$('#myButton').css('background-color', 'blue');

Với các thao tác đơn giản và yêu cầu về hiệu suất, JavaScript thuần sẽ luôn là lựa chọn tối ưu. Tuy nhiên, nếu công việc của bạn yêu cầu sự dễ dàng trong việc xử lý các tác vụ phức tạp, jQuery sẽ là lựa chọn lý tưởng.

Tính tương thích trình duyệt: jQuery hỗ trợ tốt trên các trình duyệt cũ

JavaScript thuần: Mặc dù các phương thức DOM API trong JavaScript thuần ngày càng được hỗ trợ rộng rãi, nhưng một số trình duyệt cũ (đặc biệt là Internet Explorer 6-8) không hỗ trợ đầy đủ các API mới như querySelector() hoặc addEventListener(). Điều này khiến việc hỗ trợ các trình duyệt cũ trở nên phức tạp hơn, và bạn cần phải sử dụng các polyfill hoặc giải pháp thay thế.

jQuery: Một trong những lý do lớn khiến jQuery trở nên phổ biến trong quá khứ là khả năng tương thích với nhiều trình duyệt, bao gồm các trình duyệt cũ. jQuery tự động xử lý các vấn đề tương thích và cung cấp một API đồng nhất, giúp bạn làm việc với DOM mà không phải lo lắng về các vấn đề tương thích trình duyệt.

Ví dụ jQuery:

$('#myButton').click(function() {
  alert('Button clicked!');
});

Vì vậy, nếu bạn cần hỗ trợ các trình duyệt cũ (như Internet Explorer 8 hoặc Firefox cũ), jQuery sẽ là sự lựa chọn hợp lý.

Các thao tác phức tạp: Khi nào nên sử dụng jQuery và khi nào sử dụng JavaScript thuần

• Khi nào nên sử dụng jQuery: jQuery sẽ là sự lựa chọn lý tưởng khi bạn cần thực hiện các thao tác phức tạp, ví dụ như thao tác với nhiều phần tử, xử lý sự kiện động, tạo hiệu ứng (ví dụ: animation), hoặc khi bạn cần tương thích với nhiều trình duyệt cũ. jQuery cũng rất hữu ích khi bạn muốn thực hiện các thao tác DOM mà không phải viết mã phức tạp, giúp giảm thiểu thời gian và công sức.

• Khi nào nên sử dụng JavaScript thuần: Nếu bạn đang phát triển ứng dụng hiện đại và yêu cầu hiệu suất cao, hoặc nếu bạn chỉ cần làm việc với một số ít phần tử DOM và không cần xử lý sự kiện phức tạp, thì JavaScript thuần là lựa chọn tốt nhất. Đặc biệt, nếu bạn muốn tránh tải thêm một thư viện lớn như jQuery, JavaScript thuần sẽ giúp bạn duy trì hiệu suất và giảm thiểu dung lượng tải xuống.

Các ứng dụng thực tế HTML trong JavaScript

Việc làm việc với các phần tử HTML thông qua JavaScript thuần hoặc jQuery là rất quan trọng trong quá trình xây dựng các ứng dụng web động và tương tác. Dưới đây là một số ứng dụng thực tế phổ biến của việc thao tác với DOM.

Thêm phần tử mới vào DOM và cập nhật giao diện động

Việc thêm, sửa, xóa phần tử trong DOM giúp tạo ra các giao diện động và phản ứng ngay lập tức với các thay đổi của người dùng. Một ví dụ điển hình là việc thêm các phần tử vào một danh sách khi người dùng thực hiện các thao tác như nhấn nút "Thêm mục mới".

JavaScript thuần: Sử dụng createElement() để tạo phần tử mới và appendChild() để thêm phần tử vào DOM.

let newDiv = document.createElement('div');
newDiv.textContent = 'New item';
document.getElementById('container').appendChild(newDiv);

jQuery: Dễ dàng hơn với jQuery để tạo phần tử mới và thêm nó vào DOM.

$('#container').append('<div>New item</div>');

Cập nhật nội dung trang web mà không cần tải lại trang (AJAX)

AJAX (Asynchronous JavaScript and XML) giúp cập nhật các phần của trang web mà không cần tải lại toàn bộ trang, mang đến trải nghiệm người dùng mượt mà hơn. Việc này có thể thực hiện dễ dàng với JavaScript thuần hoặc jQuery.

1. JavaScript thuần: Sử dụng XMLHttpRequest hoặc fetch() để lấy dữ liệu và cập nhật giao diện.

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    document.getElementById('content').innerHTML = data.message;
  });

jQuery: Với jQuery, AJAX có thể thực hiện chỉ với một dòng mã.

$.get('/api/data', function(data) {
  $('#content').html(data.message);
});

AJAX rất hữu ích khi muốn tạo ra các ứng dụng như tin tức, mạng xã hội, hoặc bảng điều khiển dữ liệu mà không cần phải làm mới trang.

Thao tác với các biểu mẫu, xác thực và gửi dữ liệu (form validation)

Xác thực dữ liệu người dùng trong các biểu mẫu là một tính năng rất quan trọng trong các ứng dụng web. JavaScript và jQuery có thể giúp xác minh các trường thông tin nhập vào của người dùng trước khi gửi tới máy chủ.

• JavaScript thuần: Kiểm tra giá trị của các trường trong biểu mẫu bằng cách sử dụng getElementById() và kiểm tra điều kiện.

let username = document.getElementById('username').value;
if (username === '') {
  alert('Username is required');
}

jQuery: jQuery giúp việc kiểm tra và xác thực dễ dàng hơn, nhờ vào các phương thức như val() và các sự kiện như submit().

$('#form').submit(function(e) {
  let username = $('#username').val();
  if (username === '') {
    alert('Username is required');
    e.preventDefault();
  }
});

AJAX có thể được sử dụng để gửi dữ liệu mà không cần làm mới trang, giúp trải nghiệm người dùng mượt mà và hiệu quả hơn.

Sử dụng các sự kiện DOM như click, hover, submit để tạo các ứng dụng tương tác

Sự kiện DOM như click, hover, submit, và các sự kiện khác là rất quan trọng trong việc tạo ra các ứng dụng web tương tác. Các sự kiện này cho phép người dùng tương tác với trang và có thể được sử dụng để cập nhật giao diện hoặc xử lý dữ liệu.

• JavaScript thuần: Sử dụng addEventListener() để lắng nghe các sự kiện và thực hiện hành động khi người dùng tương tác.

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});

jQuery: jQuery cung cấp cú pháp dễ dàng hơn để lắng nghe các sự kiện.

$('#myButton').click(function() {
  alert('Button clicked!');
});

Các sự kiện như mouseenter, mouseleave, keyup, và focus có thể giúp bạn xây dựng các tính năng như hiệu ứng động, xác thực dữ liệu, hoặc thay đổi giao diện khi người dùng tương tác.

Các lưu ý khi làm việc với các phần tử HTML trong JavaScript

Khi làm việc với các phần tử HTML trong JavaScript thuần hoặc jQuery, có một số điều cần lưu ý để đảm bảo rằng mã của bạn hiệu quả, bảo mật và tương thích trên nhiều trình duyệt.

Tối ưu hóa hiệu suất khi thao tác với DOM

• Giảm thiểu thao tác DOM: Mỗi lần bạn thay đổi DOM, trình duyệt cần phải cập nhật giao diện người dùng, điều này có thể ảnh hưởng đến hiệu suất nếu thực hiện quá nhiều thao tác. Cố gắng nhóm các thao tác DOM lại với nhau thay vì thực hiện từng thao tác riêng biệt.

• Sử dụng các kỹ thuật như "batching": Thực hiện tất cả các thay đổi DOM trong một lần thay vì nhiều lần riêng biệt. Bạn có thể sử dụng phương pháp document.createDocumentFragment() để lưu trữ các thay đổi tạm thời trước khi thêm vào DOM thực tế.

Sử dụng đúng phương thức phù hợp với tình huống

• JavaScript thuần: Khi cần hiệu suất cao và thao tác đơn giản, JavaScript thuần là lựa chọn lý tưởng. Bạn sẽ có toàn quyền kiểm soát và không phải tải thêm thư viện bên ngoài.

• jQuery: Nếu công việc yêu cầu thao tác phức tạp hơn hoặc cần tương thích trình duyệt cũ, jQuery sẽ giúp bạn tiết kiệm thời gian và công sức.

Chú ý đến khả năng tương thích trình duyệt khi sử dụng JavaScript thuần và jQuery

Mặc dù JavaScript thuần ngày càng được hỗ trợ rộng rãi trên các trình duyệt hiện đại, nhưng một số trình duyệt cũ vẫn có thể không hỗ trợ đầy đủ các phương thức mới. Trong khi đó, jQuery xử lý rất tốt các vấn đề tương thích này, giúp bạn dễ dàng làm việc với các trình duyệt cũ mà không phải lo lắng về việc sử dụng polyfills.

Bảo mật khi thao tác với các thuộc tính HTML để tránh các tấn công như XSS (Cross-Site Scripting)

Khi thao tác với các thuộc tính của phần tử HTML, đặc biệt là khi bạn làm việc với dữ liệu người dùng nhập vào, cần phải chú ý đến bảo mật. Nếu không kiểm soát chặt chẽ dữ liệu nhập vào, các đoạn mã độc hại có thể được chèn vào trang web, gây nguy hiểm cho người dùng.

• Lọc dữ liệu người dùng: Trước khi sử dụng dữ liệu người dùng nhập vào, hãy đảm bảo rằng bạn đã kiểm tra và lọc bỏ các ký tự đặc biệt (như <, >, ', ", v.v.) để ngăn chặn mã độc.

• Sử dụng các phương thức an toàn: Khi thao tác với dữ liệu từ bên ngoài hoặc khi chèn dữ liệu vào trang, tránh sử dụng innerHTML nếu không chắc chắn về tính hợp lệ của dữ liệu, và thay vào đó sử dụng textContent hoặc các phương thức bảo mật khác.

Kết bài

Việc làm việc với các phần tử HTML thông qua JavaScript thuần và jQuery là một phần không thể thiếu trong phát triển web hiện đại. Mỗi công cụ đều có những ưu và nhược điểm riêng, phù hợp với các tình huống khác nhau. JavaScript thuần mang lại hiệu suất cao và khả năng kiểm soát chi tiết, trong khi jQuery lại giúp tiết kiệm thời gian và tăng khả năng tương thích trình duyệt, đặc biệt là khi làm việc với các dự án phức tạp hoặc yêu cầu hỗ trợ trình duyệt cũ.

Tùy thuộc vào yêu cầu của dự án, các nhà phát triển có thể chọn lựa giữa JavaScript thuần hoặc jQuery, nhưng việc hiểu rõ và áp dụng đúng các phương thức làm việc với DOM sẽ giúp xây dựng các ứng dụng web mượt mà, hiệu quả và bảo mật. Hơn nữa, khi làm việc với DOM, luôn nhớ tối ưu hóa hiệu suất và bảo vệ ứng dụng khỏi các lỗ hổng bảo mật, đặc biệt là khi xử lý dữ liệu người dùng.