Chức năng tìm kiếm với JS và DOM

Chức năng ẩn phần tử với JS và DOM

1. Tạo Khung Tìm Kiếm Cơ Bản:

Đầu tiên, chúng ta sẽ tạo một khung tìm kiếm đơn giản gồm một ô input và một nút tìm kiếm.

<input type="text" id="searchInput" placeholder="Nhập từ khóa...">
<button id="searchButton">Tìm Kiếm</button>

2. Thêm Sự Kiện Click:

Sau khi tạo khung tìm kiếm, chúng ta cần thêm một sự kiện click vào nút tìm kiếm để xử lý khi người dùng nhấn vào nút này.

const searchButton = document.getElementById('searchButton');

searchButton.addEventListener('click', function() {
    const searchInputValue = document.getElementById('searchInput').value;
    console.log("Giá trị tìm kiếm:", searchInputValue);
});

3. Giới Thiệu DOM và Chọn Danh Sách Phần Tử:

DOM (Document Object Model) là một biểu diễn của tài liệu HTML dưới dạng cây, cho phép chúng ta tương tác với các phần tử trên trang web.

Chúng ta có thể chọn các phần tử trong DOM bằng cách sử dụng các phương thức như getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll.

// Chọn phần tử bằng ID
const elementById = document.getElementById('myElementId');

// Chọn phần tử bằng class
const elementsByClass = document.getElementsByClassName('myClass');

// Chọn phần tử bằng thẻ
const elementsByTag = document.getElementsByTagName('div');

// Sử dụng CSS selector
const elementByQuery = document.querySelector('.myClass');
const elementsByQueryAll = document.querySelectorAll('.myClass');

4. Ẩn Phần Tử DOM:

Chúng ta có thể ẩn một phần tử DOM thông qua thuộc tính ID của DOM với giá trị là giá trị hiện tại của input.

const hideElement = document.getElementById('elementToHide');
const searchInput = document.getElementById('searchInput');

searchButton.addEventListener('click', function() {
    const searchInputValue = searchInput.value;
    hideElement.style.display = 'none';
    console.log("Giá trị tìm kiếm:", searchInputValue);
});