Bắt đầu xem và thay đổi DOM

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Xem video và hoàn thành các hướng dẫn tương tác này để tìm hiểu thông tin cơ bản về cách xem và thay đổi DOM của trang bằng Chrome DevTools.

Hướng dẫn này giả định rằng bạn biết sự khác biệt giữa DOM và HTML. Hãy xem lại phụ lục: HTML so với DOM.

Xem các nút DOM

Cây DOM của bảng điều khiển Elements (Phần tử) là nơi bạn thực hiện tất cả các hoạt động liên quan đến DOM trong Công cụ cho nhà phát triển.

Kiểm tra một nút

Khi bạn quan tâm đến một nút DOM cụ thể, Kiểm tra là một cách nhanh chóng để mở Công cụ cho nhà phát triển và kiểm tra nút đó.

  1. Trong danh sách sau, hãy nhấp chuột phải vào Michelangelo. Trên trình đơn, hãy chọn Kiểm tra.

    • Michelangelo
    • Raphael

    Bảng điều khiển Elements (Phần tử) của Công cụ cho nhà phát triển sẽ mở ra. <li>Michelangelo</li> được làm nổi bật trong Cây DOM.

    Đánh dấu nút Michelangelo

  2. Nhấp vào Chọn một phần tử.

  3. Chọn Tokyo trong danh sách sau.

    • Tokyo
    • Beirut

    <li>Tokyo</li> được làm nổi bật trong Cây DOM.

Kiểm tra một nút cũng là bước đầu tiên để xem và thay đổi kiểu và CSS của nút.

Di chuyển trong Cây DOM bằng bàn phím

Sau khi chọn một nút trong Cây DOM, bạn có thể di chuyển trong Cây DOM bằng bàn phím.

  1. Trong danh sách sau, hãy nhấp chuột phải vào Ringo rồi chọn Kiểm tra. <li>Ringo</li> được chọn trong Cây DOM.

    • George
    • Ringo
    • Paul

    • John

      Kiểm tra nút Ringo

  2. Nhấn phím mũi tên Lên 2 lần. Đã chọn <ul>.

    Kiểm tra nút ul

  3. Nhấn phím mũi tên Trái. Danh sách <ul> sẽ thu gọn.

  4. Nhấn lại phím mũi tên Trái. Nút mẹ của nút <ul> đã được chọn. Trong trường hợp này, đó là nút <li> chứa hướng dẫn cho bước 1.

  5. Nhấn phím Mũi tên xuống 3 lần để chọn lại danh sách <ul> mà bạn vừa thu gọn. Ứng dụng sẽ hiển thị như sau: <ul>...</ul>

  6. Nhấn phím mũi tên phải. Danh sách sẽ mở rộng.

Di chuyển vào khung hiển thị

Khi xem Cây DOM, đôi khi bạn sẽ thấy mình đang ở trong một nút DOM không có trong khung nhìn. Ví dụ: giả sử bạn đã cuộn xuống cuối trang và bạn quan tâm đến nút <h1> ở đầu trang. Cuộn vào khung nhìn cho phép bạn nhanh chóng đặt lại vị trí khung nhìn để có thể xem nút.

  1. Trong danh sách sau, hãy nhấp chuột phải vào Magritte rồi chọn Kiểm tra.

    • Magritte
    • Soutine

  2. Hãy di chuyển đến phần phụ lục Cuộn vào khung hiển thị để xem thêm hướng dẫn.

Sau khi hoàn tất, bạn nên quay lại phần này.

Hiển thị thước

Khi có thước kẻ trong khung nhìn, bạn có thể đo chiều rộng và chiều cao của một phần tử khi di chuột qua phần tử đó trong bảng điều khiển Phần tử.

Bật thước kẻ theo một trong hai cách sau:

  • Nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (macOS) để mở trình đơn Lệnh, nhập Show rulers on hover rồi nhấn Enter.
  • Kiểm tra Cài đặt > Lựa chọn ưu tiên > Phần tử > Hiện thước khi di chuột.

Đơn vị đo kích thước của thước là pixel.

Bạn có thể tìm kiếm Cây DOM theo chuỗi, bộ chọn CSS hoặc bộ chọn XPath.

  1. Đặt con trỏ vào bảng điều khiển Phần tử.
  2. Nhấn tổ hợp phím Control+F hoặc Command+F (macOS). Thanh Tìm kiếm sẽ mở ở cuối Cây DOM.

  3. Nhập The Moon is a Harsh Mistress. Câu cuối cùng được làm nổi bật trong Cây DOM.

    Làm nổi bật cụm từ tìm kiếm trong thanh Tìm kiếm.

Thanh Tìm kiếm cũng hỗ trợ bộ chọn CSS và XPath.

Bảng Phần tử sẽ chọn kết quả trùng khớp đầu tiên trong cây DOM và cuộn kết quả đó vào chế độ xem trong khung hiển thị. Theo mặc định, việc này sẽ diễn ra khi bạn nhập. Nếu luôn làm việc với các cụm từ tìm kiếm dài, bạn có thể thiết lập để Công cụ cho nhà phát triển chỉ chạy tìm kiếm khi bạn nhấn phím Enter.

Để tránh việc chuyển đổi không cần thiết giữa các nút, hãy bỏ đánh dấu hộp (cài đặt) Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Global (Chung) > Search as you type (Tìm kiếm khi bạn nhập).

Đã bỏ đánh dấu hộp kiểm Tìm kiếm khi bạn nhập trong phần Cài đặt.

Chỉnh sửa DOM

Bạn có thể chỉnh sửa DOM ngay lập tức và xem những thay đổi đó ảnh hưởng đến trang như thế nào.

Chỉnh sửa nội dung

Để chỉnh sửa nội dung của một nút, hãy nhấp đúp vào nội dung đó trong Cây DOM.

  1. Trong danh sách sau, hãy nhấp chuột phải vào Michelle rồi chọn Kiểm tra.

    • Chiên
    • Mỹ

  2. Trong Cây DOM, hãy nhấp đúp vào Michelle. Nói cách khác, hãy nhấp đúp vào văn bản giữa <li> và </li>. Văn bản được đánh dấu màu xanh dương để cho biết rằng văn bản đó đã được chọn.

    Chỉnh sửa văn bản

  3. Xoá Michelle, nhập Leela, sau đó nhấn phím Enter để xác nhận thay đổi. Văn bản thay đổi từ Michelle thành Leela.

Chỉnh sửa thuộc tính

Để chỉnh sửa thuộc tính, hãy nhấp đúp vào tên hoặc giá trị thuộc tính. Hãy làm theo các hướng dẫn này để tìm hiểu cách thêm thuộc tính vào một nút.

  1. Trong danh sách sau, hãy nhấp chuột phải vào Howard rồi chọn Kiểm tra.

    • Howard
    • Vince

  2. Mở rộng <ul>, sau đó nhấp đúp vào <li> để chỉnh sửa. Văn bản được làm nổi bật để cho biết nút đã được chọn.

    Sau khi bạn nhấp vào, nút sẽ được làm nổi bật để cho biết đã được chọn.

  3. Nhấn phím mũi tên Phải, thêm dấu cách, nhập style="background-color:gold" rồi nhấn Enter. Màu nền của nút sẽ thay đổi thành màu vàng.

    Thêm thuộc tính kiểu vào nút

Chỉnh sửa loại nút

Để chỉnh sửa loại nút, hãy nhấp đúp vào loại đó rồi nhập loại mới.

  1. Trong danh sách sau, hãy nhấp chuột phải vào Hank rồi chọn Kiểm tra.

    • Trưởng khoa
    • Hank
    • Thaddeus
    • Brock

  2. Nhấp đúp vào <li>. Văn bản li được làm nổi bật.

  3. Xoá li, nhập button, rồi nhấn phím Enter. Nút <li> thay đổi thành nút <button>.

    Thay đổi loại nút thành nút

Chỉnh sửa dưới dạng HTML

Để chỉnh sửa nút dưới dạng HTML có tính năng làm nổi bật cú pháp và tự động hoàn thành, hãy chọn Chỉnh sửa dưới dạng HTML trong trình đơn thả xuống của nút.

  1. Nhấp chuột phải vào Leonard bên dưới rồi chọn Kiểm tra.

    • Penny
    • Howard
    • Rajesh
    • Leonard

  2. Trong bảng điều khiển Elements (Phần tử), hãy nhấp chuột phải vào nút hiện tại rồi chọn Edit as HTML (Chỉnh sửa dưới dạng HTML) trong trình đơn thả xuống.

    Trình đơn thả xuống của một nút.

  3. Nhấn phím Enter để bắt đầu một dòng mới và bắt đầu nhập <l. DevTool làm nổi bật cú pháp HTML và đề xuất các thẻ để tự động hoàn thành.

    Tự động hoàn thành thẻ HTML.

  4. Chọn phần tử li trong trình đơn tự động hoàn thành rồi nhập >. DevTools tự động thêm thẻ đóng </li> sau con trỏ.

    Công cụ cho nhà phát triển sẽ tự động đóng thẻ.

  5. Nhập Sheldon vào bên trong thẻ rồi nhấn tổ hợp phím Control hoặc Command + Enter để áp dụng các thay đổi.

Sao chép một nút

Bạn có thể sao chép một phần tử bằng cách nhấp chuột phải vào phần tử đó rồi chọn Sao chép phần tử.

  1. Nhấp chuột phải vào Nana trong danh sách sau rồi chọn Kiểm tra.

    • Bonfire of the Vanities
    • Nana
    • Orlando
    • Tiếng ồn trắng

  2. Trong bảng Elements (Phần tử), hãy nhấp chuột phải vào <li>Nana</li> rồi chọn Duplicate element (Sao chép phần tử) trong trình đơn thả xuống.

    Tuỳ chọn Sao chép phần tử được làm nổi bật trong trình đơn thả xuống.

  3. Quay lại trang. Mục trong danh sách đã được sao chép.

Bạn cũng có thể dùng các phím tắt: Shift + Alt + Mũi tên xuống (Windows và Linux) và Shift + Option + Mũi tên xuống (macOS).

Chụp ảnh màn hình nút

Bạn có thể chụp ảnh màn hình bất kỳ nút riêng lẻ nào trong Cây DOM.

  1. Nhấp chuột phải vào hình ảnh bất kỳ trên trang này rồi chọn Kiểm tra.

  2. Trong bảng điều khiển Elements (Phần tử), hãy nhấp chuột phải vào URL hình ảnh rồi chọn Capture node screenshot (Chụp ảnh màn hình nút) trong trình đơn thả xuống.

    Ảnh chụp màn hình nút đang được chụp.

  3. Ảnh chụp màn hình sẽ được lưu vào thư mục tải xuống (Windows và macOS).

Tìm hiểu thêm trong bài viết 4 cách chụp ảnh màn hình bằng Công cụ cho nhà phát triển.

Sắp xếp lại các nút DOM

Kéo các nút để sắp xếp lại.

  1. Trong danh sách sau, hãy nhấp chuột phải vào Elvis Presley rồi chọn Kiểm tra. Đây là mục cuối cùng trong danh sách.

    • Stevie Wonder
    • Tom Waits
    • Chris Thile
    • Elvis Presley

  2. Trong Cây DOM, hãy kéo <li>Elvis Presley</li> lên đầu danh sách.

Trạng thái bắt buộc

Bạn có thể buộc các nút duy trì ở các trạng thái như :active, :hover, :focus, :visited và :focus-within.

  1. Di chuột qua mục Chúa ruồi trong danh sách. Màu nền chuyển thành màu cam.

    • Chúa ruồi
    • Tội ác và hình phạt
    • Moby Dick

  2. Nhấp chuột phải vào mục danh sách The Lord of the Flies rồi chọn Kiểm tra.

  3. Nhấp chuột phải vào <li class="demo--hover">The Lord of the Flies</li> rồi chọn Force State (Buộc trạng thái) > :hover. Đọc phụ lục về các lựa chọn bị thiếu nếu bạn không thấy lựa chọn này.

    Màu nền vẫn là màu cam, mặc dù bạn không thực sự di chuột qua nút.

Ẩn một nút

Nhấn phím H để ẩn một nút.

  1. Trong danh sách sau, hãy nhấp chuột phải vào The Stars My Destination rồi chọn Kiểm tra.

    • Bá tước Monte Cristo
    • The Stars My Destination

  2. Nhấn phím H. Nút bị ẩn. Bạn cũng có thể nhấp chuột phải vào nút rồi dùng lựa chọn Ẩn phần tử.

    Giao diện của nút trong Cây DOM sau khi bị ẩn

  3. Nhấn lại phím H. Nút này sẽ xuất hiện lại.

Xoá nút

Nhấn phím Delete để xoá một nút.

  1. Trong danh sách sau, hãy nhấp chuột phải vào Foundation rồi chọn Inspect (Kiểm tra).

    • The Illustrated Man
    • Through the Looking-Glass
    • Tổ chức

  2. Nhấn phím Delete. Nút này sẽ bị xoá. Bạn cũng có thể nhấp chuột phải vào nút rồi sử dụng tuỳ chọn Delete element (Xoá phần tử).

  3. Nhấn tổ hợp phím Control+Z hoặc Command+Z (macOS). Thao tác gần đây nhất sẽ được huỷ và nút sẽ xuất hiện lại.

Truy cập vào các nút trong Bảng điều khiển

Công cụ cho nhà phát triển cung cấp một vài phím tắt để truy cập vào các nút DOM từ Bảng điều khiển hoặc lấy tệp tham chiếu JavaScript đến các nút đó.

Tham chiếu đến nút hiện được chọn bằng $0

Khi kiểm tra một nút (bao gồm cả các phần tử giả như ::before hoặc ::after), văn bản == $0 bên cạnh nút có nghĩa là bạn có thể tham chiếu nút này trong Bảng điều khiển bằng biến $0.

  1. Nhấp chuột phải vào mục danh sách The Left Hand of Darkness rồi chọn Kiểm tra.

    • Bàn tay trái của bóng tối
    • Dune

  2. Nhấn phím Escape để mở Ngăn bảng điều khiển. Bạn có thể phải chọn Console (Bảng điều khiển) để mở.

  3. Nhập $0 rồi nhấn phím Enter. Kết quả của biểu thức là $0 có giá trị là <li>The Left Hand of Darkness</li>.

    Kết quả của biểu thức $0 đầu tiên trong Bảng điều khiển.

  4. Di chuột lên kết quả. Nút này được làm nổi bật trong khung nhìn.

  5. Nhấp vào <li>Dune</li> trong Cây DOM, nhập lại $0 trong Bảng điều khiển, rồi nhấn lại phím Enter. Bây giờ, $0 cho kết quả là <li>Dune</li>.

    Kết quả của biểu thức $0 thứ hai trong Console.

Lưu trữ dưới dạng biến toàn cục

Nếu bạn cần tham chiếu lại một nút nhiều lần, hãy lưu trữ nút đó dưới dạng biến toàn cục.

  1. Trong danh sách sau, hãy nhấp chuột phải vào The Big Sleep rồi chọn Kiểm tra.

    • The Big Sleep
    • The Long Goodbye

  2. Nhấp chuột phải vào <li>The Big Sleep</li> trong Cây DOM rồi chọn Lưu trữ dưới dạng biến toàn cục. Nếu bạn không thấy lựa chọn này, hãy đọc về các lựa chọn bị thiếu.

  3. Nhập temp1 vào Bảng điều khiển rồi nhấn Enter. Kết quả của biểu thức cho thấy biến đánh giá đến nút. Nhấp vào nút để mở rộng mục trong danh sách.

    Kết quả của biểu thức temp1.

Sao chép đường dẫn JS

Sao chép đường dẫn JavaScript đến một nút để tham chiếu nút đó trong một kiểm thử tự động.

  1. Trong danh sách sau, hãy nhấp chuột phải vào Anh em nhà Karamazov, rồi chọn Kiểm tra.

    • Anh em nhà Karamazov
    • Tội ác và hình phạt

  2. Nhấp chuột phải vào <li>The Brothers Karamazov</li> trong Cây DOM rồi chọn Sao chép > Sao chép đường dẫn JS. Một biểu thức document.querySelector() phân giải thành nút đã được sao chép vào bảng nhớ tạm.

  3. Nhấn tổ hợp phím Control+V hoặc Command+V (macOS) để dán biểu thức vào Bảng điều khiển.

  4. Nhấn Enter để đánh giá biểu thức.

    Kết quả của biểu thức Sao chép đường dẫn JS

Ngắt khi có thay đổi về DOM

Công cụ cho nhà phát triển cho phép bạn tạm dừng JavaScript của trang khi JavaScript sửa đổi DOM. Đọc thêm về điểm ngắt thay đổi DOM.

Các bước tiếp theo

Như vậy là bạn đã nắm được hầu hết các tính năng liên quan đến DOM trong Công cụ cho nhà phát triển. Bạn có thể khám phá phần còn lại bằng cách nhấp chuột phải vào các nút trong Cây DOM và thử nghiệm với các tuỳ chọn không được đề cập trong hướng dẫn này.

Tiếp tục đọc:

Tham gia cộng đồng Công cụ cho nhà phát triển để liên hệ với nhóm Công cụ cho nhà phát triển hoặc nhận trợ giúp từ các nhà phát triển khác.

Phụ lục

Tìm hiểu thêm về các chủ đề cụ thể.

HTML so với DOM

Phần này giải thích nhanh sự khác biệt giữa HTML và DOM.

Khi bạn dùng trình duyệt web để yêu cầu một trang như https://example.com, máy chủ sẽ trả về một tài liệu HTML:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

Trình duyệt phân tích cú pháp HTML và tạo một cây đối tượng:

html
  head
    title
  body
    h1
    p
    script

Cây đối tượng hoặc nút này đại diện cho nội dung của trang. Đây được gọi là mô hình đối tượng tài liệu, hay gọi tắt là DOM. Hiện tại, các đối tượng trong DOM và HTML là giống nhau.

Giả sử tệp script.js ở cuối HTML có chứa các hàm sau:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

Tập lệnh đó sẽ xoá nút h1 và thêm một nút p khác vào DOM. DOM hiện sẽ có dạng như sau:

html
  head
    title
  body
    p
    script
    p

HTML của trang hiện khác với DOM của trang.

HTML đại diện cho nội dung ban đầu của trang và DOM đại diện cho nội dung hiện tại, đang hoạt động của trang. Khi JavaScript thêm, xoá hoặc chỉnh sửa các nút, DOM sẽ khác với HTML.

Tìm hiểu thêm trong bài viết Giới thiệu về DOM của MDN.

Di chuyển vào khung hiển thị

Đây là phần tiếp theo của phần Scroll into view (Cuộn vào chế độ xem). Làm theo hướng dẫn để hoàn tất phần này.

  1. Nút <li>Magritte</li> vẫn phải được chọn trong Cây DOM. Nếu không, hãy quay lại phần Di chuyển vào khung hiển thị và bắt đầu lại.

  2. Nhấp chuột phải vào nút <li>Magritte</li> rồi chọn Scroll into view (Cuộn vào khung hiển thị). Khung nhìn của bạn sẽ cuộn lên để bạn có thể thấy nút Magritte. Nếu bạn không thấy lựa chọn Di chuyển vào khung hình, hãy đọc về các lựa chọn bị thiếu.

Thiếu tuỳ chọn

Nhiều hướng dẫn trong bài hướng dẫn này yêu cầu bạn nhấp chuột phải vào một nút trong Cây DOM rồi chọn một mục trong trình đơn theo bối cảnh bật lên. Nếu bạn không thấy tuỳ chọn được chỉ định trong trình đơn theo bối cảnh, hãy thử nhấp chuột phải vào vị trí khác ngoài văn bản nút.

Nơi nhấp vào nếu bạn không thấy tất cả các lựa chọn