Javascript có thể thay đổi tất cả các phần tử html trong trang không?

Question

Một phần của toàn bộ lý do mà JavaScript tồn tại là để tương tác với HTML và CSS. Tìm hiểu cách cả ba ngôn ngữ web giao nhau trong bài viết này

Nội dung chính Show

Bắt đầu
Tại sao tôi vẫn muốn thay đổi HTML?
DOM là gì?
Chọn một phần tử
Thay đổi nội dung của một phần tử
Các lớp học
Lấy danh sách các lớp
Kiểm tra xem phần tử có lớp không
Thêm một lớp học
Loại bỏ một lớp học
Chuyển đổi một lớp học
Nhận/đặt bất kỳ thuộc tính nào
Thay đổi CSS của một phần tử
Chọn nhiều phần tử
Phần kết luận
JS có thể thay đổi nội dung của các phần tử HTML không?
JavaScript có thể thay đổi kiểu của phần tử HTML không?
JavaScript truy cập và thao tác các phần tử HTML như thế nào?
JavaScript có thể tương tác với HTML như thế nào?

Bắt đầu

Tạo một tệp HTML với mã sau, sau đó mở tệp đó trong trình duyệt của bạn

<html>
    <head>
        <title>The DOM :Dtitle>
    head>
    <body>
        <h1>An h1h1>
        <p id="myId">I'm a paragraph, look at me!p>
        <h1 class="title second-h1" id="classesExample">Another h1h1>
        <h1>A third h1h1>
        <img src="https://codetheweb.blog/assets/img/posts/javascript-dom/llama.jpg">
        <script>
            // Exciting code coming soon!
        script>
    body>
html>

Nếu bạn muốn thử bất cứ điều gì trong bài viết này, bạn có thể đặt nó vào thẻ

console.log( document.querySelector('#myId') );

5, lưu, tải lại trang và xem điều gì sẽ xảy ra. Trong hướng dẫn này, tôi sẽ sử dụng

console.log( document.querySelector('#myId') );

6 — cái này sẽ in nội dung ra bảng điều khiển để bạn có thể xem. Để mở giao diện điều khiển

Nhấp chuột phải
Chuyển đến 'Kiểm tra phần tử'
Chuyển đến tab 'Bảng điều khiển'

Đó là tất cả. Tôi hy vọng bạn vui…

Tại sao tôi vẫn muốn thay đổi HTML?

Tôi cho rằng bạn đã có lý do nào đó vì nếu không thì bạn đã không xem bài viết này, nhưng chỉ trong trường hợp bạn không…

Trong hầu hết loạt bài này, chúng tôi đã hiển thị các giá trị của một số bit JavaScript nhất định bằng cách sử dụng

console.log( document.querySelector('#myId') );

7 hoặc

console.log( document.querySelector('#myId') );

6. Nhưng nếu chúng ta muốn hiển thị các giá trị trên trang web thực tế thì sao?

DOM là gì?

DOM là viết tắt của Mô hình đối tượng tài liệu. Nó là một giao diện lập trình cho HTML — nói cách khác, nó cho phép bạn sửa đổi HTML bằng ngôn ngữ lập trình khác (JavaScript). Tất cả những thứ tôi sẽ dạy cho bạn trong bài viết này đều là một phần của DOM — đó là một cách để có thể thay đổi HTML. Bạn cũng có thể thay đổi CSS bằng DOM vì bạn có thể tạo CSS dưới dạng kiểu nội tuyến (với thuộc tính

console.log( document.querySelector('#myId') );

9)

Chọn một phần tử

Để sửa đổi một phần tử HTML, bạn cần bắt đầu bằng cách chọn nó. Để làm điều này, chúng tôi sử dụng bộ chọn CSS (đây là phần bổ sung) kết hợp với hàm

console.log( document.querySelector('h1') );

0. Đây là một ví dụ (một

console.log( document.querySelector('#myId') );

6 đã được thêm vào để chúng ta có thể xem kết quả)

________số 8

Điều này sẽ trả về phần tử

console.log( document.querySelector('h1') );

2 của chúng ta vì nó có ID là

console.log( document.querySelector('h1') );

3. Chúng ta có thể thấy đầu ra của điều này bằng cách

console.log( document.querySelector('#myId') );

6-ing nó

console.log( document.querySelector('#myId') );

Còn nếu có nhiều phần tử phù hợp với bộ chọn thì sao?

console.log( document.querySelector('h1') );

Có 65 phần tử trên trang — nó sẽ chỉ chọn phần tử đầu tiên. Tôi sẽ nói về cách chọn nhiều phần tử ở gần cuối bài viết này

Hãy nhớ đặt những thứ này vào thẻ

console.log( document.querySelector('#myId') );

5 của bạn và xem điều gì xảy ra trong bảng điều khiển

Thay đổi nội dung của một phần tử

Bây giờ chúng ta đã chọn ra phần tử, hãy làm gì đó với nó. Chúng tôi sẽ thay đổi HTML bên trong nó. Hãy nhớ rằng HTML chỉ có thể là văn bản, vì vậy sử dụng phương pháp này, chúng ta có thể làm bất cứ điều gì từ thay đổi văn bản đến tạo các phần tử mới bên trong một thứ gì đó. Đây là những gì nó trông giống như

console.log( document.querySelector('#myId') );

6

Đặt cái này vào thẻ script của bạn — bạn sẽ thấy rằng

console.log( document.querySelector('h1') );

5 đầu tiên trên trang thay đổi thành

console.log( document.querySelector('h1') );

8 ngay lập tức

Bạn cũng có thể chèn HTML vào một phần tử — đây là lý do tại sao nó là

console.log( document.querySelector('h1') );

9. Hãy dùng thử…

console.log( document.querySelector('#myId') );

0

Thông thường, bạn muốn thêm thứ gì đó vào

console.log( document.querySelector('h1') );

9 của một phần tử thay vì thay thế nó. Chúng tôi có thể làm điều này bằng cách sử dụng

console.log( document.querySelector('#myId') );

61 thay vì

console.log( document.querySelector('#myId') );

62

console.log( document.querySelector('#myId') );

4

Sử dụng

console.log( document.querySelector('#myId') );

61 chỉ là một cách nói nhanh hơn nhiều

console.log( document.querySelector('#myId') );

6

Hãy thử tự thêm một số yếu tố vào trang

Các lớp học

Sửa đổi thuộc tính

console.log( document.querySelector('#myId') );

64 của phần tử là một cách sử dụng phổ biến khác cho JavaScript. Nó có thể hữu ích nếu có một loạt CSS mà bạn muốn áp dụng cho nhiều phần tử — bạn chỉ cần đặt cho nó một lớp. Hãy sử dụng phần tử này từ HTML của chúng tôi

console.log( document.querySelector('#myId') );

8

Phần tử này hiện có hai lớp —

console.log( document.querySelector('#myId') );

65 và

console.log( document.querySelector('#myId') );

66. Dưới đây là một số điều chúng ta có thể làm với các lớp của nó…

Lấy danh sách các lớp

console.log( document.querySelector('#myId') );

1

Kiểm tra xem phần tử có lớp không

document.querySelector('#myId');

0

Thêm một lớp học

document.querySelector('#myId');

1

Loại bỏ một lớp học

document.querySelector('#myId');

2

Chuyển đổi một lớp học

Chuyển đổi đơn giản có nghĩa là xóa nó nếu nó đã ở đó hoặc thêm nó nếu nó chưa có…

document.querySelector('#myId');

3

Nhận/đặt bất kỳ thuộc tính nào

Trong phần trên, tôi đã chỉ cho bạn cách sửa đổi thuộc tính

console.log( document.querySelector('#myId') );

64 của phần tử. Nhưng làm thế nào về việc thay đổi bất kỳ thuộc tính nào?

Chúng ta có thể sử dụng hàm

console.log( document.querySelector('#myId') );

68 để lấy giá trị của một thuộc tính — đây là cú pháp

document.querySelector('#myId');

4

Hãy thử lấy

console.log( document.querySelector('#myId') );

69 của hình ảnh trên trang của chúng tôi…

document.querySelector('#myId');

5

Bây giờ, hãy thử thay đổi URL. Chúng tôi muốn thay đổi nó từ này

document.querySelector('#myId');

6

để này

document.querySelector('#myId');

7

Trước hết, hãy nhìn vào hình ảnh gốc trên trang của bạn

Chúng ta có thể sử dụng hàm

console.log( document.querySelector('#myId') );

00. Nó trông như thế này

document.querySelector('#myId');

8

Xem liệu bạn có thể tìm ra cách thay đổi thuộc tính ________ 169 của hình ảnh thành URL mới không…

document.querySelector('#myId');

9

Đặt nó vào kịch bản của bạn và xem điều kỳ diệu xảy ra

Đây là cách lấy và đặt thuộc tính

Thay đổi CSS của một phần tử

Chúng ta có thể sửa đổi CSS của một phần tử bằng cách sử dụng các giá trị

console.log( document.querySelector('#myId') );

02 của phần tử đó. Đây là một ví dụ

console.log( document.querySelector('#myId') );

0

dùng thử. Bạn sẽ thấy tiêu đề đầu tiên chuyển sang màu đỏ…

Chúng tôi có thể đặt bất kỳ thuộc tính CSS nào — không chỉ là

console.log( document.querySelector('#myId') );

03. Hãy tiếp tục và thử thay đổi một cái khác cho mình. Nó có thể là

console.log( document.querySelector('#myId') );

04,

console.log( document.querySelector('#myId') );

05, v.v.

Bạn không thể có dấu gạch ngang trong tên biến trong JavaScript — vì vậy bạn có thể tự hỏi làm thế nào để thay đổi các thuộc tính, chẳng hạn như

console.log( document.querySelector('#myId') );

06. Những gì chúng tôi làm là chúng tôi viết nó trong camelCase

camelCase là nơi bạn dán các từ lại với nhau (không có dấu cách) và viết hoa chữ cái đầu tiên của mỗi từ trừ chữ cái đầu tiên. Ví dụ:

console.log( document.querySelector('#myId') );

06 sẽ trở thành

console.log( document.querySelector('#myId') );

08 và

console.log( document.querySelector('#myId') );

09 sẽ trở thành

console.log( document.querySelector('#myId') );

40

Hãy thử thay đổi

console.log( document.querySelector('#myId') );

06 của

console.log( document.querySelector('#myId') );

42 đầu tiên của chúng tôi. Ghi nhớ camelCase…

console.log( document.querySelector('#myId') );

1

Chọn nhiều phần tử

Trong toàn bộ bài viết này, tôi đã chỉ cho bạn cách lấy một phần tử và sau đó làm điều gì đó với nó. Nhưng nếu bạn muốn lấy nhiều phần tử thì sao? . Chúng ta có thể sử dụng hàm

console.log( document.querySelector('#myId') );

44

console.log( document.querySelector('#myId') );

2

Hãy thử

console.log( document.querySelector('#myId') );

6-ing nó và xem những gì nó trả về…

console.log( document.querySelector('#myId') );

3

Nó trông giống như một mảng gồm tất cả các phần tử khớp với bộ chọn đó

Điều này khá chính xác, ngoại trừ thay vì một mảng, nó là một kiểu dữ liệu đặc biệt được gọi là NodeList. NodeList giống như một mảng ngoại trừ việc nó được tạo thành từ các phần tử HTML. Nếu bạn chỉnh sửa một trong những yếu tố này bằng JavaScript (ví dụ:. thay đổi phong cách), nó sẽ hiển thị trên trang ngay lập tức

Bạn có thể coi nó giống như một mảng — điều chính mà bạn phải chú ý là nhiều hàm mảng sẽ không hoạt động (ví dụ:.

console.log( document.querySelector('#myId') );

46)

Bây giờ chúng ta đã có một NodeList gồm tất cả các phần tử

console.log( document.querySelector('h1') );

5 của chúng ta, hãy làm gì đó với chúng. Chúng ta cần lặp qua chúng bằng vòng lặp for, sau đó thay đổi từng cái - bạn có thể lặp qua NodeList

Hãy thử thay đổi

console.log( document.querySelector('#myId') );

48 của tất cả các

console.log( document.querySelector('h1') );

5 thành

console.log( document.querySelector('#myId') );

60 — nó trông như thế này

console.log( document.querySelector('#myId') );

4

Tất cả

console.log( document.querySelector('h1') );

5 của bạn sẽ thay đổi phông chữ của họ

Đây là cách bạn chọn và thay đổi nhiều thành phần từ một bộ chọn truy vấn…

Phần kết luận

chúng ta đi thôi. Tôi hy vọng bạn đã học được điều gì đó ngày hôm nay 😁

Nếu bạn biết ai đó mà tôi có thể trợ giúp với bài viết này, hãy đồng hành và chia sẻ nó với họ — chia sẻ là quan tâm. Nếu bạn có bất kỳ phản hồi nào, cần trợ giúp hoặc chỉ muốn nói xin chào, vui lòng làm như vậy trong phần bình luận (hoặc liên hệ với tôi)

Nếu bạn thấy bài viết này có giá trị, tôi thực sự đánh giá cao nếu bạn quyên góp một vài đô la theo cách của tôi - tôi mất rất nhiều thời gian và công sức để viết những bài báo này cũng như duy trì trang web này và tôi làm tất cả miễn phí. (nếu bạn cực kỳ quan tâm, bạn thậm chí có thể tham gia Patreon của tôi 😍)

Cuối cùng nhưng không kém phần quan trọng, đừng quên tham gia ✨✨✨ danh sách email kỳ diệu đặc biệt ✨✨✨ để nhận các hướng dẫn phát triển web chất lượng tuyệt vời mỗi tuần một lần từ đây và trên internet (do tôi tuyển chọn)

JS có thể thay đổi nội dung của các phần tử HTML không?

DOM HTML cho phép JavaScript thay đổi nội dung của các phần tử HTML .

JavaScript có thể thay đổi kiểu của phần tử HTML không?

DOM HTML cho phép JavaScript thay đổi kiểu của các thành phần HTML .

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ể tương tác với HTML như thế nào?

javascript được nhúng vào html bằng các thẻ script. nếu bạn mở tệp javascript thô, trình duyệt sẽ không thực thi nó, nó sẽ chỉ hiển thị mã. .

HTML cung cấp cấu trúc và ngữ nghĩa như XML, CSS cung cấp cách trình bày, màu sắc, phông chữ, v.v.

programming javascript

Javascript có thể thay đổi tất cả các phần tử html trong trang không?

Bắt đầu

Tại sao tôi vẫn muốn thay đổi HTML?

DOM là gì?

Chọn một phần tử

Thay đổi nội dung của một phần tử

Các lớp học

Lấy danh sách các lớp

Kiểm tra xem phần tử có lớp không

Thêm một lớp học

Loại bỏ một lớp học

Chuyển đổi một lớp học

Nhận/đặt bất kỳ thuộc tính nào

Thay đổi CSS của một phần tử

Chọn nhiều phần tử

Phần kết luận

JS có thể thay đổi nội dung của các phần tử HTML không?

JavaScript có thể thay đổi kiểu của phần tử HTML không?

JavaScript truy cập và thao tác các phần tử HTML như thế nào?

JavaScript có thể tương tác với HTML như thế nào?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội