JavaScript có thể thao tác các phần tử HTML không?
|
Để JavaScript tự nó là vô ích. Thay vào đó, điều mà hầu hết các nhà phát triển muốn là nó tương tác với HTML. Chúng tôi muốn tự động sửa đổi trang, tại các thành phần, tạo cửa sổ bật lên, v.v. Nói cách khác, chúng tôi muốn sử dụng JavaScript để thao tác HTML (hoặc CSS) của trang. Trong hướng dẫn JavaScript này, chúng ta sẽ thấy cách thực hiện chính xác điều đó Show
Hướng dẫn này giả định rằng bạn đã quen thuộc với JavaScript và trong trường hợp bạn chưa quen, chúng tôi có hướng dẫn bắt đầu phù hợp dành cho bạn Giới thiệu DOMNếu bạn bắt đầu đọc một cái gì đó về JavaScript và HTML, bạn có thể đã gặp từ “DOM”. Chúng tôi sẽ giải thích đây là gì trong giây lát, nhưng trước đó, chúng ta nên tập trung vào việc hiểu tại sao Mục tiêu của chúng tôi là thao tác HTML của trang và điều này có nghĩa là thêm một số thẻ HTML, xóa một số thẻ khác hoặc thay đổi chúng (về nội dung hoặc kiểu dáng). Rõ ràng, để làm được điều đó, chúng ta cần truy cập mã HTML từ mã JavaScript. Vì vậy, chúng ta cần có một cách bên trong JavaScript để tham chiếu mã HTML. Đó chính là DOM DOM là Mô hình Đối tượng Tài liệu, là một từ ưa thích để nói rằng nó là một biểu diễn Đối tượng (còn gọi là Mô hình) của Tài liệu (còn gọi là trang HTML). Với biểu diễn đối tượng, chúng tôi muốn nói rằng chúng ta có một đối tượng JavaScript thực sự đại diện cho trang HTML. (Trong trường hợp bạn cần biết thêm về các đối tượng trong JavaScript, hãy đọc phần này) Như chúng ta sẽ thấy sau trong quá trình triển khai, tên của đối tượng là var element = document.getElementById("top");
console.log(element);2. Bằng cách gọi các phương thức và thuộc tính của đối tượng này, chúng ta có thể truy cập mọi phần của trang của mình. Trên thực tế, bản thân tài liệu đại diện cho toàn bộ trang (mọi thứ nằm giữa các thẻ var element = document.getElementById("top");
console.log(element);3)Cách sử dụng DOM để thao tác HTMLBây giờ chúng ta đã biết DOM là gì, chúng ta cần biết cách sử dụng nó. Trên thực tế, chúng ta có thể sử dụng nó để thay đổi nội dung của trang HTML theo ý muốn, chẳng hạn bằng cách thay đổi kiểu, thêm và xóa phần tử, thay đổi nội dung hoặc thay đổi thuộc tính CSS Những thứ cơ bảnKhi tìm hiểu về JS Object, chúng ta phát hiện ra rằng chúng ta cần khởi tạo chúng. Tuy nhiên, chúng ta không cần làm với DOM. Trên thực tế, nó đã được khởi tạo sẵn, nó giống như được tải sẵn trang Chúng ta có thể thấy rõ một ví dụ nếu chúng ta thử đăng nhập nó vào bảng điều khiển Điều này sẽ tạo ra sản lượng rất lớn, thậm chí còn lớn hơn nếu trang của bạn chứa đầy nội dung (vì chúng tôi đang ghi nhật ký nội dung đó một cách hiệu quả). Như bạn có thể thấy trong hình bên dưới, chúng tôi không ghi nhật ký mã HTML thực tế. Thay vào đó, chỉ là một đại diện của nó  Mọi thứ bạn thấy ở đây là một thuộc tính mà bạn thực sự có thể tham khảo trong JavaScript. Ví dụ console.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-8 Điều này thật tuyệt, nhưng chúng ta có thể làm được nhiều hơn thế với DOM Tham chiếu các phần tử HTML theo IDViệc tham khảo toàn bộ trang (____________2) là rất hạn chế vì chúng tôi muốn làm việc với các phần tử riêng lẻ. Chúng tôi muốn sửa đổi chính đoạn văn đó, tải chính hình ảnh đó, v.v. Tuy nhiên, ngay cả khi tài liệu đại diện cho toàn bộ trang, điều đó không có nghĩa là chúng ta không thể truy cập các phần của trang đó hoặc các phần tử HTML khác Cách phổ biến nhất để làm điều đó là tham chiếu một phần tử theo id của nó trong HTML. Điều này sẽ cung cấp cho bạn một đối tượng chứa mọi thứ bạn biết và có thể thực hiện trên phần tử HTML đó. Hàm để ngoại suy đối tượng đó là var element = document.getElementById("top");
console.log(element);5 và tất nhiên, nó muốn biết ID mà chúng ta đang tìm kiếm. Vì ID có thể là bất kỳ văn bản nào nên chúng tôi cần cung cấp ID dưới dạng chuỗivar element = document.getElementById("top");
console.log(element);Để điều này hoạt động, rõ ràng, chúng ta cần phải có một phần tử có ID là var element = document.getElementById("top");
console.log(element);6 trong trang HTML của chúng ta. Trong trường hợp của chúng tôi, chúng tôi đã tưởng tượng như sau________số 8_______Nhưng có yếu tố là không đủ. Chúng tôi cần đảm bảo rằng chúng tôi tải phần tử trước khi chạy mã JavaScript. Điều này được thực hiện dễ dàng bằng cách tải mã JavaScript của chúng tôi ở cuối trang. Nói cách khác, thẻ var element = document.getElementById("top");
console.log(element);7 của chúng ta phải ở cuối trang, ngay trước khi chúng ta đóng var element = document.getElementById("top");
console.log(element);8Phần quan trọng (và hữu ích nhất) của việc lấy một phần tử theo ID là chúng tôi chắc chắn rằng chúng tôi chỉ nhận được một phần tử vì ID phải là duy nhất. Như vậy, chúng ta có thể dễ dàng thao tác với đối tượng đó Cách thao tác một phần tử HTMLSau khi chúng tôi tìm nạp một phần tử với var element = document.getElementById("top");
console.log(element);9, chúng tôi có thể bắt đầu thao tác. Một trong những cách phổ biến nhất để làm điều đó là thay đổi nội dung HTML của nó. Chúng ta có thể làm điều đó bằng cách làm việc với thuộc tính 0 var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery StoreTuy nhiên, chúng ta không nhất thiết phải gán một biến mới cho đối tượng. Chúng tôi có thể tham khảo nó trực tiếp từ tài liệu, như dưới đây console.log(document.getElementById('top').innerHTML); // Bakery StoreChúng tôi có thể làm nhiều việc hơn là chỉ đăng nhập một thuộc tính, chúng tôi cũng có thể sửa đổi thuộc tính đó theo ý muốn // Example 1
document.getElementById('top').innerHTML = 'A new value';
// Example 2
document.getElementById('top').innerHTML = 'A new value';Như bạn thấy, vì chúng ta đang nói về mã HTML bên trong (inner HTML), chúng ta có thể sử dụng mã HTML khi thiết lập giá trị Thay đổi kiểu dáng của một phần tửĐiều tiếp theo bạn có thể muốn làm là thay đổi kiểu dáng của một đối tượng. Điều này có nghĩa là sửa đổi các thuộc tính CSS của nó. Một cách phổ biến mà tính năng này được sử dụng là tạo cửa sổ bật lên. Bạn tạo một phần tử HTML với 1, để nó không hiển thị. Sau đó, khi nhấp vào nút, bạn đặt thuộc tính 2 thành 3 (hoặc bất kỳ giá trị nào khác mà bạn muốn). Điều này sẽ làm cho phần tử xuất hiện Để làm điều đó, bạn cần sử dụng 4. Rõ ràng, bạn cần thay thế 5 bằng tên thực của bất động sản (trong trường hợp này là 2) và 7 bằng giá trị thực của bất động sản (trong ví dụ này là 3). Vì vậy, đây là ví dụ var element = document.getElementById("top");
element.style.display = 'block';Tất nhiên, bạn có thể làm nhiều hơn thế. Bạn có thể sửa đổi bất kỳ thuộc tính CSS nào theo cách bạn muốn và bạn cũng có thể đọc các thuộc tính đã được đặt Hãy nhớ rằng JavaScript là trường hợp lạc đà. Do đó, các thuộc tính có vỏ kebab trong CSS (vì chúng có nhiều từ) sẽ được hiển thị dưới dạng vỏ lạc đà trong JavaScript. Chẳng hạn, 9 sẽ là var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store0. Vì vậy, nếu chúng tôi đặt nó, chúng tôi sẽ sử dụng var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store1'Đặt thuộc tínhKhi sửa đổi kiểu dáng của một đối tượng, chúng tôi đã thiết lập thuộc tính kiểu dáng một cách hiệu quả ( var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store2). Bạn có thể làm nhiều hơn thế, sửa đổi hầu như bất kỳ thuộc tính nào. Để làm điều đó, chỉ cần thay thế var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store3 bằng thuộc tính thực mà bạn đang cố chỉnh sửa hoặc đọcĐể cung cấp cho bạn một ý tưởng, bạn có thể sử dụng var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store4 hoặc var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store5 (cái sau chỉ dành cho bảng)Ngoài ra, chúng ta có một cách truyền thống hơn, đó là sử dụng hàm s var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store6. Điều này muốn biết tên của thuộc tính, như chúng ta sẽ viết nó trong HTML và giá trị để cung cấp cho nó. Ví dụ: chúng ta có thể đi với var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store7Thêm thẻ HTML độngTạo một phần tử mớiĐôi khi, thao tác các phần tử HTML hiện có là không đủ. Bạn có thể muốn thêm những cái mới. Đây là một quy trình gồm hai bước. chúng tôi tạo đối tượng trong khi nó vẫn chưa được nhìn thấy và sau khi hoàn thành, chúng tôi có thể thêm nó vào tài liệu thực tế Để tạo một phần tử mới, chúng ta cần sử dụng hàm var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store8. Hàm này muốn một tham số, tên của thẻ HTML mà chúng tôi muốn tạo. Ví dụ: để tạo div, chúng ta có thể sử dụng var element = document.getElementById('top');
console.log(element.innerHTML); // Bakery Store9Vì chúng tôi đang tạo một cái gì đó mới, nên bây giờ sẽ rất thuận tiện khi chúng tôi lưu trữ phần tử này trong một biến, để chúng tôi có thể chỉnh sửa phần tử và tinh chỉnh với nó. Ví dụ: chúng ta có thể đặt nội dung hoặc kiểu của nó var newParagraph = document.createElement('p');
newParagraph.innerHTML = 'This new text is added by JavaScript';
newParagraph.style.backgroundColor = 'red';Tuy nhiên, đoạn này chúng tôi vừa tạo là trong tình trạng lấp lửng. Nó không xuất hiện ở bất kỳ đâu trên trang vì chúng tôi chưa xác định nơi chúng tôi muốn nó ở đó. Thực tế, nó chưa phải là một phần của trang Để thêm phần tử chúng ta đã tạo vào trang, chúng ta cần thêm phần tử đó làm phần tử con của phần tử đã có trên trang Thêm một yếu tố mớiChức năng thêm một phần tử vào một phần tử hiện có khá đơn giản. Chúng ta đang nói về console.log(document.getElementById('top').innerHTML); // Bakery Store0, muốn phần tử mà chúng ta muốn thêm làm tham sốBằng cách gọi hàm này, phần tử mới sẽ được thêm vào làm phần tử con cuối cùng của phần tử mà chúng ta gọi hàm trên. Giả sử chúng tôi đã cung cấp cho cơ thể của mình một ID là console.log(document.getElementById('top').innerHTML); // Bakery Store1. Bây giờ, chúng ta có thể thêm đoạn văn mới của mình vào cuối phần thân bài như được mô tả bên dướidocument.getElementById('body').appendChild(newParagraph);Đơn giản như vậy, đoạn văn bản mới sẽ xuất hiện ở cuối trang Xóa một phần tử hiện cóDĩ nhiên, ngược lại với thêm là bớt. Chúng ta cũng có thể làm điều đó với JavaScript, bằng cách xóa phần tử con trực tiếp của một phần tử. Chúng ta cần xác định phần tử cha, phần tử mà chúng ta sẽ xóa phần tử con. Rõ ràng, chúng ta cũng cần xác định yếu tố nào cần loại bỏ Hàm cho phép chúng tôi làm điều đó là console.log(document.getElementById('top').innerHTML); // Bakery Store2 và muốn biết đứa trẻ được loại bỏ làm tham số duy nhấtHãy xem đoạn mã HTML sau console.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-80 Để loại bỏ phần tử thứ hai, chúng ta có thể làm như sau console.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-81 Đơn giản như vậy, yếu tố thứ hai đã biến mất Thay thế một phần tử hiện cóChúng tôi biết cách thêm, chúng tôi biết cách xóa, nhưng bạn có biết chúng tôi có thể làm cả hai cùng một lúc không? . Hàm đó muốn có hai tham số. phần tử cũ (sẽ bị xóa) và phần tử mới để thêm vào Xem xét ví dụ trước của chúng tôi về danh sách, thay vào đó chúng tôi có thể làm như sau console.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-82 Và bùng nổ, chúng tôi đã ngay lập tức thay thế phần tử trước đó bằng phần tử mới Làm việc với nhiều yếu tốCho đến nay, chúng tôi chỉ làm việc với một phần tử duy nhất, vì ID phải là duy nhất. Đó không phải là cách duy nhất để làm điều đó, vì chúng ta có thể làm việc với nhiều yếu tố cùng một lúc. Trong phần này, chúng ta sẽ xem làm thế nào để làm điều đó Bộ chọn truy vấnCách hữu ích nhất để chọn một phần tử là sử dụng hàm console.log(document.getElementById('top').innerHTML); // Bakery Store4. Hàm này muốn biết bộ chọn CSS xác định phần tử của chúng tôi hoặc các phần tử mà chúng tôi muốn. Để nhắc bạn, chúng ta có thể kết hợp các bộ chọn sau trong bộ chọn CSS
Chúng ta có thể kết hợp những thứ đó để tạo các tham chiếu phức tạp và nhắm mục tiêu một hoặc nhiều phần tử rất cụ thể. Ví dụ, chúng ta có thể làm console.log(document.getElementById('top').innerHTML); // Bakery Store9. Nếu bạn cảm thấy cần thiết, đây là phần bổ sung tuyệt vời về bộ chọn CSSNhư bạn có thể tưởng tượng bây giờ, hàm console.log(document.getElementById('top').innerHTML); // Bakery Store4 muốn biết bộ chọn của chúng ta như một tham số. Nó sẽ luôn trả về một mảng các phần tử, ngay cả khi bộ chọn của chúng ta chỉ chọn một. Tại sao? console.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-83 Mã trong ví dụ trước sẽ chỉ tìm nạp tất cả các đoạn văn trong phần nội dung và in ra bàn điều khiển văn bản của chúng. Có khả năng, chúng tôi cũng có thể sử dụng vòng lặp của mình để sửa đổi Thay vào đó, nếu chúng tôi biết trước rằng bộ chọn của chúng tôi sẽ luôn chỉ chọn một phần tử, thì tất cả chúng tôi có thể // Example 1
document.getElementById('top').innerHTML = 'A new value';
// Example 2
document.getElementById('top').innerHTML = 'A new value';1 chứ không phải console.log(document.getElementById('top').innerHTML); // Bakery Store4. Điều này sẽ chỉ tìm nạp phần tử đầu tiênconsole.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-84 Chức năng kế thừaChỉ để nhận biết, bạn cũng có thể sử dụng một số chức năng kế thừa như // Example 1
document.getElementById('top').innerHTML = 'A new value';
// Example 2
document.getElementById('top').innerHTML = 'A new value';3 hoặc // Example 1
document.getElementById('top').innerHTML = 'A new value';
// Example 2
document.getElementById('top').innerHTML = 'A new value';4. Tuy nhiên, vì console.log(document.getElementById('top').innerHTML); // Bakery Store4 cho phép bạn chọn theo tên thẻ, theo tên lớp, v.v. nên việc sử dụng những thứ đó là vô nghĩa (ngay cả khi chúng nhanh hơn một chút)Chỉ cần biết chúng ở đó, đặc biệt trong trường hợp bạn tìm thấy chúng trong mã của người khác, nhưng không sử dụng chúng khi xây dựng từ đầu Yếu tố phụCho đến nay, chúng tôi đã tìm nạp và sửa đổi đối tượng độc quyền từ DOM ( var element = document.getElementById("top");
console.log(element);2). Đó không phải là cách duy nhất để đi. Thực ra DOM chỉ là một loại phần tử HTML đặc biệt, một phần tử là cha của toàn bộ trang.Điều này cho phép chúng tôi nghĩ về bất kỳ yếu tố nào khác theo một cách khác. Trên thực tế, hầu như tất cả các chức năng mà bạn có thể gọi trên DOM cũng sẽ áp dụng cho các phần tử riêng lẻ. Một ví dụ điển hình là hàm console.log(document.getElementById('top').innerHTML); // Bakery Store4. Bạn có thể sử dụng nó để chọn một phần tử, sau đó chọn và làm việc với một số phần tử cụ thể bên trong phần tử đó (chứ không phải trên toàn bộ trang)console.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-85 Điều này cho phép bạn xây dựng các cấu trúc phức tạp và thao tác với mã HTML của mình một cách rất gọn gàng Thao tác HTML JavaScript dành cho nhà phát triển ngăn xếp đầy đủHướng dẫn JavaScript về thao tác HTML này là một phần của điều gì đó lớn hơn. Trên thực tế, đây là một phần của khóa học hoàn chỉnh và miễn phí về cách trở thành Full Stack Developer. Và chúng tôi biết từ kinh nghiệm rằng cách tốt nhất để làm điều đó không chỉ là học mà còn là thực hành Đây là lý do tại sao dưới đây bạn có thể tìm thấy một bài tập để kiểm tra những gì bạn đã học. Nhiệm vụ này là một phần của dự án rộng lớn hơn về trang web Cửa hàng bánh giả vờ mà bạn có thể tìm thấy trên GitHub. com tại alessandromaggio/full-stack-course. Tuy nhiên, ngay cả khi bạn không theo dõi toàn bộ khóa học, hãy cố gắng thực hiện bài tập – điều này thực sự sẽ giúp bạn tiếp thu các khái niệm từ hướng dẫn này bài tậpHiện tại, trong trang // Example 1
document.getElementById('top').innerHTML = 'A new value';
// Example 2
document.getElementById('top').innerHTML = 'A new value';8, chúng tôi có một bảng khi người dùng có thể chọn tối đa 4 mặt hàng để đặt hàng. Nó trông giống như thế nàyconsole.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-86 Chúng tôi muốn làm điều gì đó tốt hơn, cho phép người dùng thêm bao nhiêu mục tùy thích. Vì vậy, nhiệm vụ của chúng ta là tạo một hàm (bạn có thể đặt tên cho nó là // Example 1
document.getElementById('top').innerHTML = 'A new value';
// Example 2
document.getElementById('top').innerHTML = 'A new value';9) sẽ thêm vào var element = document.getElementById("top");
element.style.display = 'block';0 một mục mới. Hàm này sẽ muốn biết số mục ở mọi nơi, từ văn bản đến giá trị (e. g. nhập tên). Bạn có thể thêm các chức năng phụ để làm cho mã sạch hơnNgoài ra, chúng tôi muốn tạo một chức năng khác (_______24_______1) sẽ cung cấp cho chúng tôi tổng số mặt hàng trong đơn hàng Cuối cùng, chúng tôi muốn xóa tất cả mã HTML khỏi phần nội dung của bảng để nó bắt đầu trống, nhưng chúng tôi gọi ____24_______2 khi tập lệnh tải, để nó tự động thêm một mục Chỉ là một gợi ý, bạn có thể đặt id cho bảng của mình là var element = document.getElementById("top");
element.style.display = 'block';3Cố gắng tự làm bài tập này trước khi tra lời giải Giải phápĐược rồi, ở đây chúng tôi đi với giải pháp. Hãy chắc chắn rằng bạn đã thử một mình trước khi tiếp tục Trong trường hợp bạn muốn tự mình xem giải pháp đầy đủ và so sánh các tệp, bạn nên xem cam kết này trên GitHub. com. Nếu không, chỉ cần tiếp tục đọc để được giải thích Vì vậy, điều đầu tiên chúng tôi làm trong trang // Example 1
document.getElementById('top').innerHTML = 'A new value';
// Example 2
document.getElementById('top').innerHTML = 'A new value';8 là xóa phần thân của bảng và thêm. Chúng tôi cũng đã thêm vào cuối phần nội dung (phần thân trang lần này) tham chiếu đến tải var element = document.getElementById("top");
element.style.display = 'block';5. Sau đó, chúng tôi nhảy vào JavaScriptChúng tôi quyết định tách chức năng thêm vật phẩm của mình khỏi chức năng thực sự tạo ra vật phẩm. Như vậy chức năng add item của chúng ta vô cùng đơn giản các bạn có thể xem bên dưới console.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-87 Tuy nhiên, hàm này tham chiếu đến một hàm khác, var element = document.getElementById("top");
element.style.display = 'block';6. Về việc này là gì? . Đó là chức năng tạo ra phần tử var element = document.getElementById("top");
element.style.display = 'block';7 một cách hiệu quả, mà chúng tôi cũng chia thành nhiều chức năng như bạn sẽ thấyHàm createOrderItem() của chúng ta sẽ tạo var element = document.getElementById("top");
element.style.display = 'block';7, var element = document.getElementById("top");
element.style.display = 'block';9của nó, tên của hàng và nhãn cho số lượng. Mọi thứ khác (đặc biệt là hai trường đầu vào) được giao cho hai chức năng khác. var newParagraph = document.createElement('p');
newParagraph.innerHTML = 'This new text is added by JavaScript';
newParagraph.style.backgroundColor = 'red';0 và var newParagraph = document.createElement('p');
newParagraph.innerHTML = 'This new text is added by JavaScript';
newParagraph.style.backgroundColor = 'red';1console.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-88 Và ở đây bên dưới, bạn có thể tìm thấy hai chức năng mà chúng tôi đang tận dụng để giữ cho var element = document.getElementById("top");
element.style.display = 'block';6 sạch sẽ nhất có thểLưu ý cách chúng tôi tận dụng một mảng đối tượng để tạo các tùy chọn theo cách đơn giản và rõ ràng hơn nhiều console.log(document.URL); // http://127.0.0.1:5500/ console.log(document.characterSet); // UTF-89 Sau đó, chúng ta cần tạo một hàm đếm các mặt hàng hiện có theo thứ tự. Nghĩa là, chúng ta cần đếm xem var element = document.getElementById("top");
element.style.display = 'block';7 chứa bao nhiêu var element = document.getElementById("top");
element.style.display = 'block';0. Và ở đây chúng tôi đivar element = document.getElementById("top");
console.log(element);0Và cuối cùng, chúng ta cần thêm một mục vào phần thân của bảng. Chúng ta có thể làm điều đó chỉ với một dòng JavaScript, như bên dưới var element = document.getElementById("top");
console.log(element);1Tóm lại làHướng dẫn JavaScript này có thể rất phức tạp, nhưng nó cho bạn biết mọi thứ bạn cần để thao tác HTML với JavaScript. Thực tế, giờ đây bạn có công cụ để tạo các hành vi và hoạt ảnh phức tạp và nâng cao. Với kiến thức bạn có, bạn thực sự có thể tạo các ứng dụng nâng cao và tùy chỉnh Tuy nhiên, JavaScript không kết thúc ở đó. Phần tuyệt vời đến khi chúng tôi có thể kích hoạt các chức năng cụ thể và thao tác HTML của mình theo ý muốn, chẳng hạn như khi nhấp vào nút. Đó là những gì bạn nên tập trung vào tiếp theo và những gì bạn sẽ tìm thấy khi tiếp tục tham gia Khóa học Phát triển Full Stack của chúng tôi TrướcTrước5 ví dụ tốt nhất về quyền lực giới thiệu dành cho người quản lý dự án Tiếp theo5 ví dụ điển hình nhất về quyền lực hợp phápTiếp theo
Cách tốt nhất để tìm hiểu TensorFlow (Bắt đầu sau 10 phút. )Alessandro MaggioQuản lý dự án, người có tư duy phản biện, đam mê mạng và mã hóa. Tôi tin rằng thời gian là nguồn tài nguyên quý giá nhất mà chúng ta có và công nghệ đó có thể giúp chúng ta không lãng phí nó. Tôi thành lập ICTShore. com với cùng một nguyên tắc. Tôi chia sẻ những gì tôi học được để bạn nhận được giá trị từ nó nhanh hơn tôi JavaScript truy cập và thao tác các phần tử HTML như thế nào?Nhận phần tử HTML theo TagName. Trong javascript, phương thức getElementsByTagName() rất hữu ích để truy cập các phần tử HTML bằng cách sử dụng tên thẻ . Phương thức này giống như phương thức getElementsByName. Ở đây, chúng tôi đang truy cập các phần tử bằng cách sử dụng tên thẻ thay vì sử dụng tên của phần tử.
JavaScript có thể đọc và ghi vào phần tử HTML không?JavaScript có thể "hiển thị" dữ liệu theo nhiều cách khác nhau. Ghi vào phần tử HTML, sử dụng InternalHTML . |
