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.

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ả hoạt động liên quan đến DOM trong DevTools.

Kiểm tra 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ở DevTools và kiểm 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ể di chuyển trong 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 Up (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 không hiện 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 phần Phần 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

Với các 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 qua phần tử đó trong bảng điều khiển Elements (Phần tử).

Thước kẻ.

Bạn có thể bật thước kẻ 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 tiêu điểm con trỏ vào bảng điều khiển Elements (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.

    Làm nổi bật 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 Elements (Phần tử) sẽ chọn kết quả trùng khớp đầu tiên trong cây DOM và đưa kết quả đó vào chế độ xem trong 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 các bước nhảy không cần thiết giữa các nút, hãy bỏ đánh dấu hộp 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).

Đã 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

  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. 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 Kiểm tra.

    • Howard
    • Vince

  2. Nhấp đúp vào <li>. Văn bản được làm nổi bật để cho biết rằng 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ẽ thay đổi thành 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.

Nhấp chuột phải vào các tuỳ chọn có 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 nút, hãy nhấp đúp vào loại đó 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.

    • Penny
    • Howard
    • Rajesh
    • Leonard

  2. Trong bảng điều khiển Elements (Thành phần), 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 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 vào bên trong thẻ rồi nhấn tổ hợp phím Ctrl / 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 lựa chọn Sao chép phần tử.

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

    • Bonfire of the Vanities
    • 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 chụp 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 Công cụ cho nhà phát triển, hãy xem 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 các nút đó.

  1. Nhấp chuột phải vào Elvis Presley ở bên dưới rồi chọn Kiểm tra. Lưu ý rằng đó 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.

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

Buộc 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 ác và sự trừng phạt
    • Moby Dick

  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 giữ nguyên màu cam mặc dù bạn không thực sự di chuột qua nút.

Ẩn 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 bên dưới 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 sử dụng tuỳ chọn Ẩn phần tử.

    Hình ảnh nút trong Cây DOM sau khi nút 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á) để 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 số 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 tham chiếu JavaScript đến các nút đó.

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 đó 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 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.

    • 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. 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 đường dẫn đó trong kiểm thử tự động.

  1. Nhấp chuột phải vào The Brothers Karamazov (Anh em 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 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 có thay đổi về 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 DevTools. Bạn có thể khám phá các 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ác không được đề cập trong hướng dẫn này. Xem thêm Phím tắt trên bảng điều khiển thành phần.

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 Công cụ của Chrome cho nhà phát triển.

Hãy xem phần Cộng đồng nếu bạn muốn liên hệ với nhóm DevTools hoặc yêu cầu cộng đồng DevTools trợ giúp.

Phụ lục: 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 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.

Hãy xem bài viết Giới thiệu về DOM để tìm hiểu thêm.

Phụ lục: Cuộn vào khung hiển thị

Đâ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 Cuộn vào chế độ xem. 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 tuỳ chọn nếu bạn không thấy tuỳ chọn Cuộn vào chế độ xem.

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

Phụ lục: Thiếu tuỳ 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.

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