Cho li javascript

Trong hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu cách thao tác thêm / Xóa các phần tử trong JavaScript. (Hay còn gọi là thao tác với DOM)

Add/Xóa phần tử thông qua JS DOM

Thao tác các phần tử DOM trong JavaScript

Bây giờ, qua 4 bài học trước bạn đã học cách chọn và định kiểu các thành phần HTML DOM, cách chọn đến phần tử DOM cũng như cách lấy / đặt thuộc tính cho nó

Trong chương trình này, chúng ta sẽ tìm hiểu cách bổ sung hoặc loại bỏ các phần tử DOM theo cách linh hoạt hoặc lấy nội dung của chúng

Bởi vì khi thiết lập web thực tế chúng ta sẽ thường xuyên cần tạo ra các cục bộ, khi thì thêm khối này, khi thì loại bỏ khối

> Nếu bạn muốn trở thành một trang web lập trình viên phát triển "XỊN SÒ" thì hãy xem ngay KHÓA HỌC LẬP TRÌNH (Full Stack)

Vui lòng tiếp tục đọc bên dưới đây để biết cách làm như thế nào nhé

Thêm phần tử mới vào trong DOM

Bạn có thể tạo phần tử mới trong tài liệu HTML một cách dễ dàng thông qua tài liệu phương thức. tạoEuity()

Phương thức này tạo ra một phần tử mới, nhưng nó không thêm ngay nó vào DOM

Bạn sẽ phải tự thêm nó vào DOM bằng một bước riêng biệt, như trong ví dụ sau

HTML

    Xin chào
    
Đây là ví dụ thao tác với DOM.

JavaScript

Phương thức appendChild() add new Elemental section on the end of any section tử con nào khác của nút cha được chỉ định

Tuy nhiên, nếu bạn muốn thêm phần tử mới vào đầu của bất kỳ phần tử nào khác, bạn có thể sử dụng phương thức chèn Before(), như trong ví dụ dưới đây

JavaScript

Nhận và đặt nội dung HTML trong DOM

Bạn cũng có thể dễ dàng lấy (get) hoặc thiết lập (thiết lập) nội dung của các thành phần HTML với thuộc tính innerHTML

Thuộc tính này được thiết lập hoặc nhận nội dung bên trong thẻ HTML (Bên trong thẻ mở và thẻ đóng của nó)

Vui lòng xem ví dụ sau để xem nó hoạt động như thế nào

HTML

    Xin chào!
    
Đây là ví dụ thao tác với DOM.

JavaScript

Nếu bạn có thể thấy, bạn có thể dễ dàng thêm các phần tử mới vào DOM bằng cách sử dụng thuộc tính innerHTML

Nhưng có một vấn đề. thuộc tính bên trongHTML thay thế tất cả nội dung hiện có của một phần tử

Vì vậy, nếu bạn muốn chèn HTML vào tài liệu mà không thay thế nội dung hiện có của một phần tử, bạn có thể sử dụng phương thức insertAdjacentHTML()

Phương pháp này chấp nhận hai tham số

+ First number. Vị trí cần chèn (nó phải là 

4, 

5, 

6 hoặc

7 )

+ Tham số thứ hai. Văn bản HTML cần chèn

Ví dụ sau đây sẽ minh họa cách phương thức hoạt động như thế nào

HTML (Chú ý những vị trí chú thích, đó là vị trí cần chèn)

    
    Xin chào bro!
    

JavaScript

Lưu ý. Vị trí before begin và afterend chỉ hoạt động nếu nút nằm trong cây DOM và có phần tử cha. Ngoài ra, khi chèn HTML vào một trang, hãy cẩn thận không sử dụng đầu vào của người dùng chưa được kiểm tra, để tránh các cuộc tấn công XSS

Loại bỏ các phần tử hiện có khỏi DOM

Tương tự, bạn có thể sử dụng phương thức removeChild() để xóa một nút con khỏi DOM

Phương thức này cũng trả về nút bị loại bỏ. This is a ví dụ

HTML

1

JavaScript

Bạn cũng có thể loại bỏ phần tử con mà không biết chính xác phần tử cha

Chỉ cần tìm phần tử con và sử dụng thuộc tính parentNode để tìm phần tử cha của nó

Thuộc tính này trả về cha của nút được chỉ định trong cây DOM. This is a ví dụ

HTML

1

JavaScript

Thay thế các phần tử hiện có trong DOM

Bạn cũng có thể thay thế một phần tử trong HTML DOM bằng một phần tử khác bằng phương thức replaceChild()

Trong bài hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách bổ sung JavaScript trong HTML. Ban đầu chúng tôi sẽ giới thiệu về JavaScript, tiếp theo sẽ tập trung hướng dẫn làm thế nào để thêm JavaScript vào HTML

Nếu bạn muốn hiển thị nội dung tĩnh, ví dụ như một bộ ảnh chụp, HTML đã được thực hiện. Tuy nhiên, các trang tĩnh như vậy thường chậm, trong khi các trang bây giờ thì nhanh và có tính tương tác với người dùng, dù chỉ là có trình chiếu, biểu mẫu và menu. Chúng tăng trải nghiệm cho người dùng và tăng tính linh hoạt của trang web. Việc này khả thi là nhờ ngôn ngữ scripting và JavaScript. Chúng giúp trang web tương tác với người dùng và đảo ngược. Kể cả khi có nhiều ngôn ngữ khác nhau hiện nay, không có ngôn ngữ nào phổ biến như JavaScript. Để tận dụng toàn bộ ưu điểm của nó, nó được sử dụng bài hát với HTML

Ưu điểm của JavaScript

JavaScript ban đầu được gọi là LiveScript. Nhưng vì tên Java đang rất phổ biến trên thế giới, Netscape đã đặt lại tên của nó thành JavaScript. Lần đầu xuất hiện vào năm 1995 trong Netscape 2. 0. Đây là một vài trong số các điểm ưu tiên nổi bật của JavaScript

Tối giản tương tác với máy chủ

Thông thường trên thực tế nếu bạn muốn tối ưu hóa hiệu năng của trang web, cách tốt nhất là giảm tương tác với máy chủ. JavaScript có thể xử lý vấn đề này bằng cách xác thực dữ liệu nhập vào của người dùng tại chính người dùng. Nó chỉ gửi yêu cầu tới máy chủ sau khi chạy kiểm tra xác thực trước. Kết quả là, tài nguyên sử dụng cho số lượng yêu cầu sẽ được giảm đáng kể

Giao diện người dùng thân thiện hơn, nhiều tính năng hơn

Bằng cách sử dụng JavaScript, bạn có thể tạo giao diện có tính tương tác với người xem. Ví dụ như thêm thanh trượt, trình chiếu, hiệu ứng cuộn trang khi di chuyển chuột tới, tính năng kéo thả và hơn thế nữa

Phản hồi ngay lập tức cho khách truy cập

Bằng cách sử dụng JavaScript, bạn có thể chắc chắn rằng người dùng sẽ nhận được phản hồi ngay lập tức. Ví dụ, hãy thử tưởng tượng khi người dùng điền thông tin và vô tình trống thông tin cần điền. Nếu không xác thực với JavaScript, họ sẽ phải đợi trang tải lại hoặc giao tiếp với máy chủ rồi tải lại, người dùng mới nhận ra họ thiếu thông tin. Với JavaScript (thêm JavaScript vào HTML), người dùng sẽ nhận được thông báo ngay lập tức

gỡ lỗi dễ dàng

JavaScript là một ngôn ngữ được biên dịch, có nghĩa là mã có thể giải mã từng dòng. Trong trường hợp có bất kỳ lỗi nào xuất hiện, bạn có thể tìm thấy dòng chính xác gây ra lỗi nào

Chèn JavaScript trong HTML

Sau khi đã biết điểm ưu việt của JavaScript, chúng tôi sẽ giới thiệu cho bạn 2 cách để bổ sung JavaScript trong HTML và khiến chúng hoạt động chung với nhau

Thêm JavaScript và HTML trực tiếp

Cách đầu tiên để thêm JavaScript trong HTML là cách thêm trực tiếp. Bạn có thể làm vậy bằng cách sử dụng tag để đặt chung tất cả mã JS bạn viết. JS code có thể được thêm vào:

• giữa tag  

Tùy thuộc vào nơi bạn thêm code JavaScript trong HTML file, cách tải có thể khác nhau. Thực tế tốt nhất là thêm nó vào trong để nó tách hẵn khỏi nội dung chính của file HTML. Nhưng đặt nó vào trong tag có thể tăng tốc độ tải, vì nội dung website sẽ được tải nhanh hơn, và chỉ khi đó JavaScript sẽ được parsed. Ví dụ, hãy xem qua file HTML sau, vốn để hiển thị thời gian hiện tại:

5

Như bạn đã thấy, mã trên không chứa JavaScript và vì vậy nó không hiển thị thời gian thực được. Chúng ta sẽ thêm mã này vào để hiển thị thời gian chính xác hơn

6

Chúng ta sẽ đóng code này bằng tag rồi đặt nó vào trong phần head của HTML code để mỗi khi site được tải lên, một thông báo sẽ hiện ra thời gian hiện tại cho người dùng. Đây là file HTML cuối cùng:

7

Nếu bạn muốn hiể thị thời gian trong body của trang, bạn sẽ cần thêm script và trong tag của trang HTML. Đây là code sau khi chèn JavaScript trong HTML:

8

Kết quả

Chèn JavaScript trong HTML bằng một tệp độc lập

Đôi khi việc thêm JavaScript vào HTML một cách trực tiếp không phải là cách hay nhất. Vì có thể có một vài tập lệnh JS được sử dụng ở nhiều trang khác nhau. Vì vậy, cách tốt nhất là tạo một tệp JavaScript đặc biệt để có thể thêm JavaScript vào HTML thông qua tệp đó. Những tệp này được gọi trong tài liệu HTML giống như cách gọi tài liệu CSS. Lợi ích khác của mã JS bổ sung vào tệp độc lập là

• Khi mã HTML và mã JavaScript bị tách rời, mục đích chính là tái sử dụng lại mã
• Việc đọc mã sẽ dễ dàng hơn, vì vậy bảo trì cũng đơn giản hơn
• Tệp JavaScript được lưu trong bộ nhớ cache sẽ tăng tốc độ trang web bằng cách giảm thiểu thời gian trang phải tải

We have a JavaScript file in HTML as after

9

Content of file myscript. js is

0

Ghi chú. We we for is myscript file. js was set in the same directory of file HTML

Ví dụ JavaScript để xác thực địa chỉ email

JavaScript tăng cường sức mạnh cho ứng dụng bằng cách xác thực trước nội dung của khách truy cập ở phía chính của họ. Một trong số những nội dung quan trọng nhất cần xác thực là địa chỉ email. Hàm JavaScript có thể giúp bạn xác thực địa chỉ email trước khi gửi nó tới máy chủ

1

Để thêm chức năng này vào biểu mẫu nhập liệu, bạn có thể sử dụng mã sau

2

Đây là kết quả mà bạn có thể thấy sau khi kết hợp cả 2 thành phần vào trong tệp HTML

Nếu kết quả không chính xác, bạn sẽ thấy màn hình sau

chúc mừng. Bạn đã học cách thêm JavaScript vào HTML với một số ví dụ cơ bản

Lời kết

Trong bài hướng dẫn này, chúng tôi đã chỉ cho bạn 2 cách để chèn JavaScript trong mã HTML. Khi bạn đã biết cách hoạt động của chúng, việc kết hợp cả 2 ngôn ngữ lập trình này sẽ mở ra khả năng vô tận cho bạn. JavaScript có thể kết hợp với HTML để tạo ra ứng dụng web mạnh mẽ, mượt mà, tương tác tốt với người dùng và cực kỳ thân thiện. Bằng cách sử dụng xác thực từ phía khách truy cập, máy chủ sẽ giảm tải và do đó tăng hiệu năng trang web và tốc độ trang web độc lập lên đáng kể.

Tác giả

Hải G

Hải G. là chuyên gia quản lý vận tải, điều hành các trang web dịch vụ. Anh có nhiều năm kinh nghiệm về VPS, Hosting, kỹ thuật SEO, CMS. Đặc biệt yêu thích WordPress và đã sử dụng nó hơn 5 năm nay. Sở thích của anh là đọc, viết blog, đi du lịch và tư vấn cho các bạn khởi nghiệp