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

Kayce Basques
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 kiến thức cơ bản về cách xem và thay đổi DOM của một trang bằng Công cụ của Chrome cho nhà phát triển.

Phần 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 phần Phụ lục: HTML so với DOM để biết nội dung giải thích.

Xem các nút DOM

Cây DOM của bảng điều khiển 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ể, hãy Kiểm tra để nhanh chóng mở Công cụ cho nhà phát triển và điều tra nút đó.

  1. Nhấp chuột phải vào Michelangelo bên dưới rồi chọn Kiểm tra.
    • Michelangelo
    • Raphael Kiểm tra nút Bảng điều khiển Elements (Phần tử) của DevTools sẽ mở ra. <li>Michelangelo</li> được làm nổi bật trong Cây DOM. Làm nổi bật nút Michelangelo<
  2. Nhấp vào biểu tượng Kiểm tra ở góc trên bên trái của DevTools.Biểu tượng Kiểm tra

  3. Nhấp vào văn bản Tokyo ở bên dưới.

    • Tokyo

    • Beirut

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

Việc kiểm tra nút cũng là bước đầu tiên để xem và thay đổi kiểu của nút. Xem bài viết Bắt đầu xem và thay đổi CSS.

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ể điều hướng Cây DOM bằng bàn phím.

  1. Nhấp chuột phải vào Ringo ở bên dưới 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. Phầ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. Mã sẽ có dạng như sau: <ul>...</ul>

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

Cuộn vào khung hiển thị

Khi xem Cây DOM, đôi khi bạn sẽ thấy mình quan tâm đến một nút DOM hiện 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. Tính năng Cuộn vào chế độ xem cho phép bạn nhanh chóng định vị lại khung nhìn để có thể xem nút.

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

    • Magritte
    • Soutine

  2. Chuyển đến mục Phụ lục: Cuộn vào chế độ xem ở cuối trang này. Bạn có thể làm theo hướng dẫn tại đó.

Sau khi hoàn tất hướng dẫn ở cuối trang, bạn nên quay lại đây.

Hiển thị thước

Bằng cách dùng thước kẻ ở phía trên và bên trái 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 lên phần tử đó trong bảng điều khiển Phần tử.

Thước kẻ.

Bạn có thể bật thước đo theo một trong hai cách sau:

  • Nhấn tổ hợp phím Ctrl+Shift+P hoặc Command+Shift+P (Mac) để mở trình đơn Command (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 > Thành phần > Hiện thước kẻ khi di chuột.

Đơn vị định 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ập trung con trỏ vào bảng điều khiển Thành phần.
  2. Nhấn tổ hợp phím Ctrl+F hoặc Command+F (Mac). Thanh Tìm kiếm sẽ mở ra ở 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.

    Đánh dấu cụm từ tìm kiếm trong thanh Tìm kiếm

Như đã đề cập ở trên, Thanh tìm kiếm cũng hỗ trợ bộ chọn CSS và XPath.

Bảng điều khiển Phần tử chọn kết quả phù hợp đầu tiên trong cây DOM và đưa kết quả đó vào khung nhìn. Theo mặc định, việc này sẽ xảy 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ể chỉ cho phép DevTools chạy tìm kiếm khi bạn nhấn phím Enter.

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

Đã xoá hộp đánh dấu 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 như thế nào đến trang.

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. Nhấp chuột phải vào Michelle ở bên dưới rồi chọn Kiểm tra.

    • Chiên
    • Michelle làm đạo diễn

  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 Enter để xác nhận thay đổi. Văn bản ở trên sẽ 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 hướng dẫn bên dưới để tìm hiểu cách thêm thuộc tính vào một nút.

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

    • Howard
    • Vince

  2. Nhấp đúp vào <li>. Văn bản này được làm nổi bật để cho biết nút đã được chọn.

    Chỉnh sửa nút

  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ẽ chuyển sang màu vàng.

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

Bạn cũng có thể sử dụng tuỳ chọn nhấp chuột phải Chỉnh sửa thuộc tính.

Lựa chọn khi nhấp chuột phải, trong đó thuộc tính chỉnh sửa được làm nổi bật.

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

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

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

    • Dean
    • 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, sau đó nhấn 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ạ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.

    • Đồng xu
    • Howard
    • Tiếng Rajesh
    • Leonard

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

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

  3. Nhấn Enter để bắt đầu một dòng mới và bắt đầu nhập <l. Công cụ cho nhà phát triển làm nổi bật cú pháp HTML và tự động hoàn thành thẻ cho bạn.

    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 sẽ tự động thêm thẻ </li> đóng sau con trỏ.

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

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

    Đang áp dụng các thay đổi.

Nhân bản 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ử trùng lặp.

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

    • Lửa cháy của những chiếc bàn thờ
    • Nana
    • Orlando
    • Tiếng ồn trắng

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

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

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

Bạn cũng có thể sử dụng các phím tắt: mũi tên Shift + Alt + Down (Windows và Linux) và mũi tên Shift + Option + Down (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 nào trong Cây DOM bằng cách sử dụng tính năng Chụp ảnh màn hình nút.

  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 (Thành phần), 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 phần tải xuống.

    Ảnh chụp màn hình nút đã lưu vào phần tải xuống.

Để tìm hiểu thêm về các cách chụp ảnh màn hình bằng Devtools, hãy xem 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 chúng.

  1. Nhấp chuột phải vào Elvis Presley ở bên dưới rồi chọn Inspect (Kiểm tra). Lưu ý rằng đó là mục cuối cùng trong danh sách.

    • Stevie Wonder
    • Tom chờ đợi
    • Chris Thile
    • Elvis Presley

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

    Kéo nút lên đầu danh sách

Buộc trạng thái

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

  1. Di chuột qua The Lord of the Flies (Chúa ruồi) bên dưới. Màu nền sẽ chuyển sang màu cam.

    • Chúa tể của ruồi nhặng
    • Tội phạm và hình phạt
    • Moby Dắc

  2. Nhấp chuột phải vào The Lord of the Flies ở trên 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. Hãy xem phần Phụ lục: Thiếu tuỳ chọn nếu bạn không thấy tuỳ 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. Nhấp chuột phải vào The Stars My Destination (Sao điểm đến của tôi) ở bên dưới rồi chọn Inspect (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 sử dụng tuỳ chọn Ẩn phần tử.

    Nút sẽ trông như thế nào trong Cây DOM sau khi bị ẩn

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

Xoá nút

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

  1. Nhấp chuột phải vào Foundation (Nền tảng) ở bên dưới rồi chọn Inspect (Kiểm tra).

    • The Illustrated Man
    • Alice ở xứ sở gương soi
    • 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 này rồi sử dụng tuỳ chọn Delete element (Xoá phần tử).

  3. Nhấn tổ hợp phím Ctrl+Z hoặc Command+Z (máy Mac). Thao tác cuối cùng sẽ bị huỷ và nút sẽ xuất hiện trở lại.

Truy cập vào các nút trong Console

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

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

Khi kiểm tra một nút, văn bản == $0 bên cạnh nút này có nghĩa là bạn có thể tham chiếu nút này trong Console bằng biến $0.

  1. Nhấp chuột phải vào The Left Hand of Darkness (Bàn tay trái của bóng tối) ở bên dưới rồi chọn Kiểm tra.

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

  2. Nhấn phím Escape để mở Ngăn điều khiển.

  3. Nhập $0 rồi nhấn phím Enter. Kết quả của biểu thức cho thấy rằng $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 Console

  4. Di chuột qua kết quả. Nút đượ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 vào Bảng điều khiển, sau đó nhấn lại phím Enter. Bây giờ, $0 sẽ có giá trị là <li>Dune</li>.

    Kết quả của biểu thức $0 thứ hai trong bảng điều khiển

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. Nhấp chuột phải vào The Big Sleep ở bên dưới rồi chọn Kiểm tra.

    • Giấc ngủ ngon
    • 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. Hãy xem phần Phụ lục: Thiếu tuỳ chọn nếu bạn không thấy tuỳ chọn này.

  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 biết biến này sẽ đánh giá thành nút.

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

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

Sao chép đường dẫn JavaScript vào một nút khi bạn cần tham chiếu đến nút đó trong kiểm thử tự động.

  1. Nhấp chuột phải vào The Brothers Karamazov (Anh em nhà Karamazov) ở bên dưới rồi chọn Inspect (Kiểm tra).

    • Anh em nhà Karamazov
    • Tội ác và sự trừng 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. Biểu thức document.querySelector() phân giải nút đã được sao chép vào bảng nhớ tạm.

  3. Nhấn tổ hợp phím Ctrl+V hoặc Command+V (Mac) để 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 thay đổi DOM

Công cụ phát triển cho phép bạn tạm dừng JavaScript của trang khi JavaScript sửa đổi DOM. Xem điểm ngắt thay đổi DOM.

Các bước tiếp theo

Đó là 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á các tuỳ chọ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 các tuỳ chọn khác không có trong hướng dẫn này. Xem thêm bài viết Phím tắt của bảng điều khiển Phần tử.

Hãy xem trang chủ của Công cụ của Chrome cho nhà phát triển để khám phá mọi thứ khác bạn có thể làm với DevTools.

Hãy xem mục Cộng đồng nếu bạn muốn liên hệ với nhóm Công cụ cho nhà phát triển hoặc yêu cầu trợ giúp từ cộng đồng Công cụ cho nhà phát triển.

Phụ lục: HTML so với DOM

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

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

<!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 như sau:

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 được gọi là DOM. Hiện tại, mã này trông giống như HTML, nhưng giả sử tập lệnh được tham chiếu ở cuối HTML chạy mã này:

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

Mã đó sẽ xoá nút h1 và thêm một nút p khác vào DOM. DOM hoàn chỉnh hiện có dạng như sau:

html
  head
    title
  body
    p
    script
    p

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

Xem phần Giới thiệu về DOM để tìm hiểu thêm.

Phụ lục: Di chuyển vào chế độ xem

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

  1. Bạn vẫn phải chọn nút <li>Magritte</li> trong Cây DOM. Nếu không, hãy quay lại phần Cuộn vào chế độ xem 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 to view (Di chuyển vào khung hiển thị). Khung nhìn của bạn sẽ cuộn lên để bạn có thể xem nút Magritte. Hãy xem phần Phụ lục: Thiếu các tuỳ chọn nếu bạn không thấy tuỳ chọn Cuộn vào chế độ xem.

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

Phụ lục: Thiếu lựa chọn

Nhiều hướng dẫn trong 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, sau đó chọn một tuỳ chọn trong trình đơn theo bối cảnh bật lên. Nếu bạn không thấy tuỳ chọn đã chỉ định trong trình đơn theo bối cảnh, hãy thử nhấp chuột phải ra khỏi văn bản nút.

Vị trí để nhấp nếu bạn không thấy tất cả các tùy chọn