HTML chỉ mục động

Nói chung, các tệp CSS và JS được bao gồm tĩnh với mã HTML. Điều đó có nghĩa là chúng được viết bằng tập lệnh hoặc thẻ liên kết trong mã HTML. Nhưng điều này làm chậm quá trình thực thi vì một lượng lớn mã được tải không cần thiết. Nó có thể hoặc không thể sử dụng chức năng liên quan đến phần tử DOM đó. Vì vậy, một cách linh hoạt, chúng tôi tải các tệp CSS và JS trong thời gian chạy khi chúng tôi cần chức năng của chúng

Nội dung chính Show

mục lục. html
ứng dụng. js
phong cách. css
kịch bản. js
Thẻ động trong HTML là gì?
Hoạt hình HTML động là gì?
HTML có khả năng động không?

Tải động các tệp CSS và JS. Chúng tôi tạo một phần tử tập lệnh cho tệp JS và phần tử liên kết cho tệp CSS theo yêu cầu bằng cách sử dụng DOM, gán các thuộc tính thích hợp cho chúng, sau đó thêm phần tử vào vị trí mong muốn trong cây tài liệu bằng cách sử dụng phần tử. phương thức chắp thêm ()

Hãy để chúng tôi xem chi tiết toàn bộ quá trình thông qua một dự án nhỏ, từng bước một

Bước 1. Tạo một chỉ mục. tệp html và ứng dụng. tập tin js. Đây sẽ là tệp HTML của chúng tôi thông qua đó chúng tôi sẽ trình diễn tải động các tệp JS và CSS. ứng dụng. js sẽ chứa chức năng gọi tải động các tệp. Chúng tôi sẽ thêm nó một cách tĩnh trong tệp HTML của chúng tôi.

Trong tệp HTML của chúng tôi, chúng tôi đã tạo hai div bên trong div HTML. Div HTML phía trên chứa tiêu đề và nút để hiển thị thông báo. Chức năng hiển thị tin nhắn sẽ được thêm động. Ban đầu, nút sẽ không hoạt động. Ở div phía dưới, chúng ta có hai nút, một nút để tải tệp CSS và nút còn lại để tải tệp JS một cách linh hoạt. Các chức năng onClick cho các nút này được xác định trong ứng dụng. tập tin js.

cấu trúc tệp

mục lục. html

<!DOCTYPE html>

<html lang="en">

<head>

<0<<2 <3=<5>

<0<<2 html0=html2

html3_______2_______4_______4_______html6>

<0<<2 lang1=lang3

html3_______2_______4_______4__________lang7>

<0<___=1_______4_______2=1>

=5

=6_______4_______7

<0<___"en"0 "en"1_______4__________"en"3"en"4_______5_______0_______6_______

"en"7head>

<>1>

=6

<0<>6>

>8<>6 <1=<3_______6_______

<5

<6<7

<8<9

<6<___head2 <1=___head5>

head7head8

head7>0

<6"en"7head2>

>5

<6>7

<6<<00 <01_______4_______<03<04<00_______6_______

>8"en"7>6>

>8<<13>

<15

>8<17

<18<19

>8<___>6 <1_______4_______<25<26

<5

<6<29

<6<<00 <01=<35>

<37_______1_______38

<6"en"7<00>

>5

<6<45

<6<<00 <01=<51_______6_______

<37______1_______54

<6"en"7<00<58

>8"en"7>6>

<0"en"7>6>

"en"7>1>

"en"7html>

trong ứng dụng. js, chúng ta có hai hàm loadJS() và loadCSS() là thuộc tính onClick của hai nút được xác định trong div HTML bên dưới trong tệp HTML.

Để tải tệp động,

We create the required element using document.createElement( )
Sau đó, chúng tôi xác định/gán các thuộc tính như tập lệnh. src và tập lệnh. kiểu
We append the element to the head using document.getElementsByTagName(‘head’)[0].append( )

Việc triển khai thực tế của các bước trên được hiển thị bên dưới trong mã. Chúng tôi cũng sử dụng phương thức chuỗi indexOf() để kiểm tra xem chúng tôi có liên tục không thêm cùng một tệp khi nhấp nhiều lần vào nút không

ứng dụng. js

<73

<74 <75_______1_______76<77

>5

<79

<80 <81

>5

<0<84

<0<86

=6

<0<89<90<91<92

>8<94

<95

<0<97

<0<74 html00_______2_______01html02

=6

<0html05

<0<74 html08html09html10

<0html12<91

<0html15html16

=6

<0html19

<0html21

=6

=6_______2_______24

<0html26html27

html28

>5

html30

<80 html32

>5

<0<89<90html37<92

>8<94

>5

<0<74 html00_______2_______01html46

=6

<0html49

<0<74 html52html53_______2_______10

<0html56html37

<0html59html60

<0html62html63

<0html65

=6

<0html24

<0html26html71

html28

Bước 2. Bây giờ hãy tạo một phong cách. css, tệp này sẽ được tải động. Tệp này chứa mã để cung cấp đường viền, lề, phần đệm và màu nền cho hai div HTML một cách riêng biệt bằng cách sử dụng id của chúng

phong cách. css

html73

<0html75html76html77 html78 html79html80

<0html82html76html84html80

<0html87html76html89html80

<0html92html76html94html80

<0html97html98html80

html28

>5

lang02_______3_______03lang04

<0html75html76html77 html78 lang10html80

<0html82html76html84html80

<0html87html76html89html80

<0html92lang24

<0html97html98html80

html28

Bước 3. Bây giờ chúng ta sẽ tạo một kịch bản. js sẽ hiển thị thông báo bằng cách chỉnh sửa phần tử h3 khi nhấp vào nút Xem thông báo và biến mất div phía dưới hoặc thay đổi thuộc tính hiển thị của nó thành không. Tệp JS này sẽ được tải động

kịch bản. js

<80 lang31

>5

<0lang34

<0<74 lang37lang38html10

>5

<0lang42

<0lang44lang45

<0lang47html79lang45

=6

<0lang52

<0lang54lang03lang56

>5

<0lang59

<0lang61lang62

html28

Bước 4. Bây giờ sao chép đường dẫn đầy đủ của chỉ mục. html và tải nó trong trình duyệt của bạn. Ban đầu, nút có nhãn Xem tin nhắn sẽ báo lỗi. Khi bạn nhấp vào nút tải CSS thì kiểu dáng sẽ xuất hiện và sau khi nhấp vào nút tải JS, nút Xem thông báo sẽ hoạt động

đầu ra

Vì vậy, đây là cách bạn có thể xử lý tải động các tệp bằng Thao tác DOM. Nó rất hữu ích khi tăng tốc độ và cung cấp sự mạnh mẽ

Thẻ động trong HTML là gì?

HTML động là tập hợp các công nghệ cho phép thay đổi động đối với tài liệu HTML . • Có thể sử dụng tập lệnh nhúng để thay đổi thuộc tính thẻ, nội dung hoặc thuộc tính kiểu phần tử. • Những thay đổi này không được hỗ trợ thống nhất trên toàn bộ trình duyệt.

Hoạt hình HTML động là gì?

HTML động có thể hoạt động với HTML, JavaScript, XML và CSS để tạo các trang web động và tương tác. HTML động cho phép các nhà phát triển tạo hiệu ứng trên một trang mà nếu không thì không thể. Ngoài ra, nó cho phép lập trình viên sử dụng kết hợp các công nghệ tạo trang web và hoạt hình .

HTML có khả năng động không?

Không có chức năng rất động và chủ yếu được sử dụng cho các trang web tĩnh. Tất cả các thành phần phải được tạo riêng ngay cả khi chúng sử dụng các thành phần tương tự. Hành vi của trình duyệt có thể không thể đoán trước.