Duyệt qua và thao tác

Bài học 6 trên 13 trong khóa học Các phương thức DOM trong JavaScript của Coddy.

Cùng làm một thử thách nhé!

Thử thách

Dễ

Bạn được cung cấp code HTML có năm đoạn văn với tên lớp item.

Chỉ sử dụng JavaScript, hãy sửa văn bản trong các đoạn văn để chúng giống như một danh sách được đánh số.

Đây là đầu ra mong đợi:

Đừng quên làm mới trang web để xem các thay đổi của JS!

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <p class="item">Banana</p>
        <p class="item">Apple</p>
        <p class="item">Pear</p>
        <p class="item">Water</p>
        <p class="item">Milk</p>
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Các phương thức DOM trong JavaScript

1Giới thiệu

Giới thiệu Mô hình đối tượng tài liệu

2Phương thức DOM I

getElementById Chỉnh sửa kiểu dáng phần tử getElementsByClassNameDuyệt qua và thao tácgetElementsByTagName querySelector

3Các phương thức DOM II

querySelectorAll addEventListener innerHTML createElement và appendChild Chuyển đổi classList

Tự luyện tập: Playground Web