Getelementsbyclassname innerhtml

Trong bài viết này, mình sẽ giới thiệu cho các bạn cách thao tác với DOM bằng VanillaJS thông qua một ví dụ cụ thể. Vậy thì VanillaJS là gì? . Hoàn toàn không phải, VanillaJS là một cái tên để chỉ sử dụng Javascript mà không cần bất kỳ thư viện hỗ trợ nào, chẳng hạn như Jquery,. Mọi người sử dụng cái tên này giống như một trò đùa vui nhộn của những nhà phát triển khác rằng nay có nhiều người thực sự thực sự mà không cần phải ứng dụng các thư java. Hay nói các VanillaJS khác chính là javascript thuần túy

DOM là gì?

Khi một trang web được tải, trình duyệt sẽ tạo ra Document Object Model (DOM). DOM được xây dựng dưới dạng cây, các nút của cây là các thẻ HTML. Ở trong DOM, mỗi thẻ HTML được coi là một Đối tượng, các thuộc tính của thẻ HTML là thuộc tính của Đối tượng. DOM cung cấp các phương thức để truy cập các thẻ HTML và các sự kiện cho các thẻ HTML

Vì sao nên học VanillaJS ?

Javascript ngày càng trở nên phổ biến, có rất nhiều thư viện, framework ra đời. Để có thể dễ dàng nắm bắt được những thư viện, framework mới, kiến ​​thức cốt lõi về javascript là điều cần thiết. Trong những lúc phát triển sản phẩm, sẽ có đôi lúc cần sử dụng đến vanijs lý do một số trường hợp hoặc biết rằng thư viện hobặc framework có thể xử lý bất lợi. Đương nhiên đây là trường hợp hiếm khi xảy ra, bởi vì các thư viện, khuôn khổ nay rất hịn hị rồi

Có một trang web rất phổ biến hiện nay, mà nhà phát triển nào cũng biết đó là github. com. Hiện nhóm ngũ phát triển này của github đã loại bỏ hoàn toàn jQuery khỏi trang web của họ và thay vào đó chỉ sử dụng javascript thuần

whoami @adolf_hittl3r

Theo dõi

1. 1K 34 15

Đã đăng vào ngày 15 tháng 10 năm 2020 8. 09 SA 6 phút đọc

475

0

1

Hướng dẫn thao tác với DOM sử dụng VanillaJS thông qua ví dụ cụ thể

• Bảo cao
• Add to series of me

Bài đăng này đã không được cập nhật trong 2 năm

Trong bài viết này, mình sẽ giới thiệu cho các bạn cách thao tác với DOM bằng VanillaJS thông qua một ví dụ cụ thể. Vậy thì VanillaJS là gì? . Hoàn toàn không phải, VanillaJS là một cái tên để chỉ sử dụng Javascript mà không cần bất kỳ thư viện hỗ trợ nào, chẳng hạn như Jquery,. Mọi người sử dụng cái tên này giống như một trò đùa vui nhộn của những nhà phát triển khác rằng nay có nhiều người thực sự thực sự mà không cần phải ứng dụng các thư java. Hay nói các VanillaJS khác chính là javascript thuần túy

DOM là gì?

Khi một trang web được tải, trình duyệt sẽ tạo ra Document Object Model (DOM). DOM được xây dựng dưới dạng cây, các nút của cây là các thẻ HTML. Ở trong DOM, mỗi thẻ HTML được coi là một Đối tượng, các thuộc tính của thẻ HTML là thuộc tính của Đối tượng. DOM cung cấp các phương thức để truy cập các thẻ HTML và các sự kiện cho các thẻ HTML

Vì sao nên học VanillaJS ?

Javascript ngày càng trở nên phổ biến, có rất nhiều thư viện, framework ra đời. Để có thể dễ dàng nắm bắt được những thư viện, framework mới, kiến ​​thức cốt lõi về javascript là điều cần thiết. Trong những lúc phát triển sản phẩm, sẽ có đôi lúc cần sử dụng đến vanijs lý do một số trường hợp hoặc biết rằng thư viện hobặc framework có thể xử lý bất lợi. Đương nhiên đây là trường hợp hiếm khi xảy ra, bởi vì các thư viện, khuôn khổ nay rất hịn hị rồi

Có một trang web rất phổ biến hiện nay, mà nhà phát triển nào cũng biết đó là github. com. Hiện nhóm ngũ phát triển này của github đã loại bỏ hoàn toàn jQuery khỏi trang web của họ và thay vào đó chỉ sử dụng javascript thuần

Ví dụ thực tế

Mình sẽ hướng dẫn mọi người làm một ứng dụng đơn giản, chức năng của ứng dụng sẽ bao gồm thêm tác vụ, tìm kiếm tác vụ và xóa tác vụ. Ứng dụng này sẽ chỉ sử dụng HTML, CSS, Javascript, sẽ không sử dụng bất kỳ thư viện hỗ trợ nào của Javascript. Thông qua ví dụ này, hy vọng mọi người sẽ nắm bắt được cách sử dụng javascript thao tác với DOM, cách sử dụng Local Storage

Chuẩn bị

Liên kết mã nguồn. https. //github. com/l3duc/TaskList. Mọi người clone về và chạy thử xem app đang hoạt động như nào nhé

ĐƯỢC RỒI. Bắt tay vào làm thôi (go)

Chức năng bổ sung nhiệm vụ

Đầu tiên, khai báo các biến UI

const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task');

Có một số phương thức phổ biến được sử dụng để chọn thẻ HTML trong DOM mà chúng ta muốn thao tác với chúng

• tài liệu. getElementById(ID phần tử). Trả về thẻ HTML có loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 0 tương ứng
• tài liệu. querySelector (bộ chọn CSS). Trả về thẻ HTML đầu tiên ứng với bộ chọn CSS
• tài liệu. getElementsByClassName(tên lớp). Trả về một đối tượng HTMLCollection, trong đó là các thẻ HTML có lớp tương ứng
• tài liệu. getElementsByTagName(tên thẻ). Trả về một đối tượng HTMLCollection, trong đó là các thẻ HTML có tên thẻ tương ứng
• tài liệu. nhận QuerySelector (bộ chọn CSS). Trả về một đối tượng loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 1, trong đó là các thẻ HTML tương ứng với các bộ chọn CSS

Một đối tượng HTMLCollection là một danh sách các phần tử HTML giống như mảng

Đối tượng NodeList là danh sách (tập hợp) các nút được trích xuất từ ​​​​tài liệu

Tiếp tục khởi động chức năng, phụ trách tải toàn bộ chức năng của ứng dụng. Tên mình đặt là loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 2

loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); }

Ở đoạn mã trên, khi người dùng gửi một biểu mẫu, chức năng loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 3 sẽ được gọi, cụ thể ở đây mình có một biểu mẫu để người dùng thêm nhiệm vụ. Có một số loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 0 biến phổ biến khác biến phổ biến như loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 1, loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 2, loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 3,. Các bạn có thể đọc thêm tại đây. https. //www. w3schools. com/jsref/dom_obj_event. asp

Sau đó, xây dựng chức năng loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 3

function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); }

Hàm loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 3 nhận tham số truyền vào là ________ 16, đây là biến tham chiếu tới loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 7. ________ 18 Hỗ trợ nhiều ________ 19 xử lý sự kiện trong DOM. function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 0 hủy bỏ một sự kiện, đồng nghĩa với việc những function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 1 trong sự kiện đó sẽ không xảy ra. Cụ thể, khi người dùng gửi biểu mẫu, function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 2 sẽ ngăn việc gửi biểu mẫu lên Máy chủ

To could get the data user input into ô input, use the property function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 3. Cũng có thể sử dụng function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 3 để đặt giá trị cho đầu vào ô

Tiếp theo tạo thẻ function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 5, bằng function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 6, sau đó thêm lớp function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 7 vào thẻ function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 5 bằng function addTask(e) { if(taskInput.value === '') { alert('Add a task'); } // Create li element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); // Create new link element const link = document.createElement('a'); // Add class link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '<i class="fa fa-remove"></i>'; // Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); // Clear input taskInput.value = ''; e.preventDefault(); } 9. Tiếp theo việc tạo một const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 0 bằng const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 1, cụ thể ở đây mình tạo một const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 0 có giá trị là đầu vào mà người dùng nhập vào. Sau đó, thêm nút văn bản đó vào thẻ const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 3 bằng const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 4

Tiếp tục tạo thẻ const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 5 bằng const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 6. Thêm lớp vào thẻ const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 5, const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 8, thêm biểu tượng vào thẻ const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 5, loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 0

Thêm thẻ const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 5 vào trong thẻ const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 3 bằng phương pháp loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 3, loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 4

Add thẻ const form = document.querySelector('#task-form'); const taskList = document.querySelector('.collection'); const clearBtn = document.querySelector('.clear-tasks'); const filter = document.querySelector('#filter'); const taskInput = document.querySelector('#task'); 3 vào thẻ loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 6, loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 7. Khi người dùng thêm một tác vụ thành công, sẽ xóa đầu vào của người dùng vừa nhập vào ô đầu vào, bằng cách đặt giá trị của đầu vào ô là một chuỗi trống. loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 8

Mình vừa xây dựng xong chức năng loadEventListeners(); function loadEventListeners() { document.addEventListener('submit', addTask); } 3

Kết luận

Ở trong bài tiếp theo, mình sẽ hướng dẫn mọi người xây dựng những chức năng còn sót lại của ứng dụng. Hy vọng sẽ giúp mọi người biết cách thao tác với DOM bằng cách chỉ sử dụng VanillaJS