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

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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. Xem Phụ lục: HTML và DOM để 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 Inspect (Kiểm tra).
    • Michelangelo
    • Mặt nạ Raphael Kiểm tra nút Bảng điều khiển Elements của Công cụ cho nhà phát triển sẽ mở ra. <li>Michelangelo</li> được đánh dấu trong Cây DOM. Nêu bật Michelangelo< nút
  2. Nhấp vào biểu tượng Kiểm tra ở góc trên cùng bên trái của Công cụ cho nhà phát triển. Biểu tượng Kiểm tra

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

    • Tokyo

    • Beirut

      Hiện tại, <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 của một nút. Xem bài viết Bắt đầu tìm hiểu cách 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 .

  1. Nhấp chuột phải vào Ringo ở bên dưới rồi chọn Inspect (Kiểm tra). Đã chọn <li>Ringo</li> 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 <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 quan tâm đến một nút DOM hiện không ở trong khung nhìn. Ví dụ: giả sử bạn cuộn xuống cuối và bạn quan tâm đến nút <h1> ở đầu trang. Di chuyển vào khung hiển thị cho phép bạn nhanh chóng đặt lại vị trí khung nhìn để có thể thấy nút.

  1. Nhấp chuột phải vào Magritte ở bên dưới rồi chọn Inspect (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. Hướng dẫn sẽ tiếp tục ở đó.

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 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 Elements.

Thước kẻ.

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

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

Đơn vị kích thước của thước kẻ 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 vai trò.

  1. Tập trung con trỏ vào bảng điều khiển Elements.
  2. Nhấn Control+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à vai trò.

Bảng điều khiển Elements 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ẽ diễn ra khi bạn nhập. Nếu bạn luôn làm việc với các truy vấn tìm kiếm dài, bạn có thể làm cho Công cụ cho nhà phát triển chỉ chạy tìm kiếm khi nhấn Enter.

Để tránh chuyển đổi không cần thiết giữa các nút, hãy xoá phần Settings (Cài đặt) Cài đặt. > Lựa chọn ưu tiên > Toàn cầu > 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 một cách nhanh chóng 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. Nhấp chuột phải vào Michelle ở bên dưới rồi chọn Inspect (Kiểm tra).

    • Món 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 này đã được chọn bằng màu xanh dương.

    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 ở trên các 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ị của 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 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 rằng đã chọn nút.

    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 phím Enter. Màu nền của nút chuyển thành vàng.

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

Bạn cũng có thể sử dụng thao tác 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 Inspect (Kiểm tra).

    • Trưởng tu viện
    • Hành trình
    • 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> chuyển thành <button> nút.

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

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

Để chỉnh sửa các nút dưới dạng HTML với tính năng đánh dấu và tự động hoàn thành cú pháp, 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
    • Rajesh
    • Leonard

  2. Trong bảng điều khiển Elements, hãy nhấp chuột phải vào nút hiện tại rồi chọn Elements 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. DevTool làm nổi bật cú pháp HTML và tính năng tự động hoàn thành thẻ cho bạn.

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

  4. Chọn phần tử li trong trình đơn tự động hoàn thành rồi nhập >. Công cụ cho nhà phát triển sẽ 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 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.

Sao chép 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, hãy nhấp chuột phải vào <li>Nana</li> rồi chọn Elements trên trình đơn thả xuống.

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

  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 phím tắt: mũi tên 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 bằng cách sử dụng Chụp ảnh màn hình nút.

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

  2. Trong bảng điều khiển Elements, hãy nhấp chuột phải vào URL hình ảnh rồi chọn Elements từ trình đơn thả xuống.

    Đang chụp ảnh màn hình nút.

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

    Đã lưu ảnh chụp màn hình nút 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.

    • Kỳ quan Stevie
    • 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 duy trì trạng thái như :active, :hover, :focus, :visited và :focus-within.

  1. Di chuột qua Chúa tể của những loài ruồi ở bên dưới. Màu nền sẽ chuyển sang màu cam.

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

  2. Nhấp chuột phải vào Chúa tể của những loài ruồi ở 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 Trạng thái > :di chuột. Hãy xem phần Phụ lục: Thiếu lựa chọn nếu bạn không thấy lựa chọn này. Màu nền vẫn là màu cam ngay cả khi bạn không thực sự di chuột qua nút này.

Ẩn một nút

Nhấn 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
    • Ngôi sao điểm đến của tôi

  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 này sẽ hiển thị lại.

Xoá nút

Nhấn 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).

    • Người được minh hoạ
    • Qua kính soi
    • Tổ chức

  2. Nhấn phím Delete. Nút đã bị xoá. Bạn cũng có thể nhấp chuột phải vào nút rồi sử dụng lựa chọn Xoá phần tử.

  3. Nhấn Control+Z hoặc Command+Z (Mac). Thao tác cuối cùng sẽ bị huỷ và nút này sẽ xuất hiện lại.

Nút truy cập trong Bảng điều khiển

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 Tham chiếu JavaScript đến chúng.

Tham chiếu đến 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 nút này trong Bảng điều khiển với biến $0.

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

    • 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 cho kết quả 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 $0 vào Bảng điều khiển một lần nữa rồi nhấn Nhập lại. Giờ đây, $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. Nhấp chuột phải vào The Big Sleep (Giấc ngủ lớn) ở bên dưới rồi chọn Inspect (Kiểm tra).

    • Giấc ngủ ngon
    • Tạm biệt lâu dài

  2. Nhấp chuột phải vào <li>The Big Sleep</li> trong Cây DOM rồi chọn Store as global biến. Hãy xem phần Phụ lục: Thiếu lựa chọn nếu bạn không thấy lựa chọn này.

  3. Nhập temp1 vào Bảng điều khiển rồi nhấn phím Enter. Kết quả của biểu thức cho biết biến này được đánh giá cho 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 đến 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 Anh em Karamazov ở bên dưới rồi chọn Kiểm tra.

    • Anh em nhà Karamazov
    • Tội phạm 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. 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 của bạn.

  3. Nhấn Control+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ụ cho nhà phát triển cho phép bạn tạm dừng JavaScript của một 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á những nội dung 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 được đề cập trong hướng dẫn này. Hã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ô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ụ cho nhà phát triển.

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 nhận 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ủ 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 gồm các đối tượng như sau:

html
  head
    title
  body
    h1
    p
    script

Cây đối tượng, hay nút này, đại diện cho nội dung của trang được gọi là DOM. Ngay bây giờ, mã này trông giống như HTML, nhưng giả sử tập lệnh được tham chiếu tại 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ó giao diện 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 thể hiện 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ẽ trở nên 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 Scroll vào view (Di chuyển vào khung hiển thị). Làm theo hướng dẫn bên dưới để hoàn tất phần này.

  1. Nút <li>Magritte</li> vẫn sẽ được chọn trong Cây DOM. Nếu không, hãy quay lại Di chuyển vào khung hiển thị rồi 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 (Cuộn vào khung hiển thị). Khung nhìn của bạn cuộn sao lưu để bạn có thể thấy 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 bài hướng dẫn này hướng dẫn bạn nhấp chuột phải vào một nút trong Cây DOM rồi chọn một lựa chọn trong trình đơn theo bối cảnh bật lên. Nếu bạn không thấy 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