DOM (Mô hình đối tượng tài liệu) – đối tượng dom là gì

Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : đối tượng dom là gì

Trong bài viết này, chúng ta sẽ thảo luận về Mô hình đối tượng tài liệu (DOM ) cùng với các thuộc tính của nó và các phương pháp được sử dụng để thao tác với Tài liệu, & amp; hiểu cách triển khai của chúng thông qua các ví dụ.

Mô hình đối tượng tài liệu (DOM) dành cho HTML (Ngôn ngữ đánh dấu siêu văn bản) XML (Ngôn ngữ đánh dấu có thể mở rộng ) các tài liệu. Nó xác định cấu trúc logic của tài liệu và cách một tài liệu được truy cập và thao tác.

Lưu ý : Nó được gọi là cấu trúc logic vì DOM không ‘ t chỉ định bất kỳ mối quan hệ nào giữa các đối tượng.

DOM là một cách để trình bày trang web theo cách phân cấp có cấu trúc để người lập trình và người dùng lướt qua tài liệu dễ dàng hơn. Với DOM, chúng ta có thể dễ dàng truy cập và thao tác các thẻ, ID, lớp, Thuộc tính hoặc Phần tử của HTML bằng các lệnh hoặc phương thức được cung cấp bởi đối tượng Document. Sử dụng DOM, JavaScript có quyền truy cập vào HTML cũng như CSS của trang web và cũng có thể thêm hành vi vào các phần tử HTML. về cơ bản Mô hình đối tượng tài liệu là một API đại diện và tương tác với các tài liệu HTML hoặc XML.

Tại sao cần có DOM?

HTML được sử dụng để cấu trúc các trang web và Javascript được sử dụng để thêm hành vi vào các trang web của chúng tôi. Khi một tệp HTML được tải vào trình duyệt, javascript không thể hiểu trực tiếp tài liệu HTML. Vì vậy, một tài liệu tương ứng được tạo (DOM). DOM về cơ bản là đại diện của cùng một tài liệu HTML nhưng ở một định dạng khác với việc sử dụng các đối tượng . Javascript diễn giải DOM một cách dễ dàng, tức là javascript không thể hiểu các thẻ (& lt; h1 & gt; H & lt; / h1 & gt;) trong tài liệu HTML nhưng có thể hiểu đối tượng h1 trong DOM. Giờ đây, Javascript có thể truy cập từng đối tượng (h1, p, v.v.) bằng cách sử dụng các chức năng khác nhau.

Cấu trúc của DOM : DOM có thể được coi là Cây hoặc Rừng ( nhiều hơn một cây). Thuật ngữ mô hình cấu trúc đôi khi được sử dụng để mô tả biểu diễn dạng cây của tài liệu. Mỗi nhánh của cây kết thúc bằng một nút và mỗi nút chứa các đối tượng Người nghe sự kiện có thể được thêm vào các nút và được kích hoạt khi xảy ra một sự kiện nhất định. Một thuộc tính quan trọng của mô hình cấu trúc DOM là: nếu bất kỳ hai triển khai DOM nào được sử dụng để tạo bản trình bày của cùng một tài liệu, chúng sẽ tạo ra cùng một mô hình cấu trúc, với chính xác các đối tượng và mối quan hệ giống nhau.

Tại sao được gọi là Mô hình đối tượng?
Tài liệu được tạo mô hình bằng cách sử dụng các đối tượng và mô hình không chỉ bao gồm cấu trúc của tài liệu mà còn bao gồm hành vi của tài liệu và các đối tượng mà nó được cấu tạo như các phần tử thẻ với các thuộc tính trong HTML.

Xem Thêm  Ẩn và Hiển thị một Div bằng Javascript - ẩn và hiện div bằng javascript w3schools

Thuộc tính của DOM : Hãy xem các thuộc tính của đối tượng tài liệu mà đối tượng tài liệu có thể truy cập và sửa đổi.

  • Đối tượng Window < strong>: Đối tượng Window là đối tượng của trình duyệt luôn ở trên cùng của hệ thống phân cấp. Nó giống như một API được sử dụng để thiết lập và truy cập vào tất cả các thuộc tính và phương thức của trình duyệt. Nó được trình duyệt tạo tự động.
  • Đối tượng tài liệu: Khi một tài liệu HTML được tải vào một cửa sổ, nó sẽ trở thành một đối tượng tài liệu. Đối tượng “document” có nhiều thuộc tính tham chiếu đến các đối tượng khác cho phép truy cập và sửa đổi nội dung của trang web. Nếu có nhu cầu truy cập bất kỳ phần tử nào trong trang HTML, chúng tôi luôn bắt đầu với việc truy cập đối tượng ‘document’. Đối tượng tài liệu là thuộc tính của đối tượng window.
  • Đối tượng biểu mẫu: Đối tượng này được thể hiện bằng các thẻ.
  • Đối tượng liên kết : Nó được thể hiện bằng các thẻ.
  • Đối tượng neo : Nó được đại diện bởi các thẻ.
  • Phần tử điều khiển biểu mẫu: : Biểu mẫu có thể có nhiều thành phần điều khiển như trường văn bản, nút, nút radio, hộp kiểm, v.v.
  • Phương thức của Đối tượng Tài liệu :

    • write (“string”) : Viết chuỗi đã cho vào tài liệu.
    • getElementById () : trả về phần tử có giá trị id đã cho.
    • getElementsByName () : trả về tất cả các phần tử có giá trị tên đã cho.
    • getElementsByTagName (): < / strong> trả về tất cả các phần tử có tên thẻ đã cho.
    • getElementsByClassName () : trả về tất cả các phần tử có tên lớp đã cho.

    Ví dụ: Trong ví dụ này, Chúng tôi sử dụng id phần tử HTML để tìm phần tử DOM HTML.

    < h2 class = "tabtitle"> HTML

    & lt;! DOCTYPE html & gt;

    < p class = "line number2 index1 alt1"> & lt; html & gt;

    & lt; body & gt;

    & lt; h2 & gt; GeeksforGeeks & lt; / h2 & gt;

    & lt; p id = "intro" & gt; A Máy tính Cổng thông tin khoa học dành cho người đam mê công nghệ. & Lt; / p & gt;

    & lt; p & gt; Ví dụ này minh họa & lt; b & gt; getElementById & lt; / b & gt; phương thức. & lt; / p & gt;

    & lt; p id < code class = "western"> = "demo" & gt; & lt; / p & gt;

    & lt; script & gt;

    const element = document.getElementById ("i ntro ");

    document.getElementById (" demo ") .innerHTML =

    " Giới thiệu của GeeksforGeeks là: "+ element.innerHTML;

    & lt; / < / code> script & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
     

    Đầu ra:

    Ví dụ : Ví dụ này mô tả cách biểu diễn các phần tử HTML trong cấu trúc cây. < / p>

    html

    & lt; bảng & gt;

    & lt; ROWS & gt;

    & lt; tr & gt;

    & lt; td & gt; Xe & lt; / td & gt;

    & lt; td & gt; Scooter & lt; / td & gt;

    & lt; / tr & gt;

    < / code> & lt; tr & gt;

    & lt; td < code class = "western"> & gt; MotorBike & lt; / td & gt;

    & lt; td & gt; Xe buýt & lt; / td & gt;

    & lt; / tr & gt;

    & lt; / ROWS & gt;

    & lt; / bảng & gt;

     
     

    DOM không phải là gì?

    • Mô hình đối tượng tài liệu không phải là mô tả nhị phân mà nó không xác định bất kỳ mã nguồn nhị phân nào trong các giao diện của nó.
    • Mô hình đối tượng tài liệu không được sử dụng để mô tả các đối tượng trong XML hoặc HTML trong khi DOM mô tả các tài liệu XML và HTML dưới dạng các đối tượng.
    • Mô hình đối tượng tài liệu không được đại diện bằng dấu tập hợp các cấu trúc dữ liệu ; nó là một giao diện chỉ định đại diện đối tượng.
    • Mô hình đối tượng tài liệu không hiển thị mức độ quan trọng của đối tượng trong tài liệu, tức là nó không có thông tin về đối tượng nào trong tài liệu. phù hợp với ngữ cảnh và không phù hợp với ngữ cảnh.

    Các cấp độ của DOM :

    • Cấp độ 0: > Cung cấp tập hợp giao diện cấp thấp.
    • Cấp 1: DOM cấp 1 có thể được mô tả thành hai phần: CORE HTML .
      • CORE cung cấp các giao diện cấp thấp có thể được sử dụng để đại diện cho bất kỳ tài liệu có cấu trúc nào.
      • HTML cung cấp giao diện cấp cao có thể được sử dụng để đại diện cho các tài liệu HTML.
    • Cấp 2: bao gồm sáu thông số kỹ thuật: CORE2 >, CHẾ ĐỘ XEM , SỰ KIỆN , PHONG CÁCH , DU LỊCH RANGE .
      • CORE2 : mở rộng chức năng của CORE được chỉ định bởi DOM cấp 1.
      • VIEWS : chế độ xem cho phép các chương trình truy cập động và thao tác nội dung của tài liệu.
      • SỰ KIỆN : Sự kiện là các tập lệnh được trình duyệt thực thi khi người dùng phản ứng với trang web.
      • PHONG CÁCH : cho phép các chương trình tự động truy cập và thao tác nội dung của các biểu định kiểu.
      • TRAVERSAL : Điều này cho phép các chương trình duyệt qua tài liệu một cách động.
      • RANGE : Cái này cho phép các chương trình xác định động một loạt nội dung trong tài liệu.
    • Cấp độ 3: bao gồm năm thông số kỹ thuật khác nhau: CORE3 , TẢI và LƯU , HIỆU LỰC , SỰ KIỆN XPATH .
      • CORE3 : mở rộng chức năng của CORE được chỉ định bởi DOM cấp 2.
      • TẢI và LƯU: Điều này cho phép chương trình tải động nội dung của tài liệu XML vào tài liệu DOM và lưu Tài liệu DOM thành tài liệu XML bằng cách tuần tự hóa.
      • HIỆU LỰC : Điều này cho phép chương trình cập nhật động nội dung và cấu trúc của tài liệu trong khi đảm bảo tài liệu vẫn hợp lệ.
      • SỰ KIỆN : mở rộng chức năng của Sự kiện do DOM Cấp 2 chỉ định.
      • XPATH : XPATH là ngôn ngữ đường dẫn có thể được sử dụng để truy cập cây DOM.

    Ví dụ: Ví dụ này minh họa thao tác dom bằng Phương pháp.

    HTML

    & lt;! DOCTYPE html & gt;

    & lt; html & gt;

    & lt; head & gt;

    & lt; title & gt; Thao tác DOM & lt; / title & gt;

    & lt; / đầu & gt;

    < code class = "trơn"> & lt; body & gt;

    & lt; nhãn & gt; Nhập Giá trị 1: & lt; / label & gt;

    & lt; input loại = "text" id = "val1" / & gt;

    & lt; br < / code> / & gt;

    & lt; br / & gt;

    & lt; nhãn & gt; Nhập Giá trị 2: & lt; / label & gt;

    & lt; input type = ". text" id < / code> = "val2" / & gt;

    & lt; br / & gt;

    & lt; nút onclick = "getAdd ()" & gt; Nhấp Để Thêm & lt; / nút & gt;

    & lt; p id = "kết quả " & gt; & lt; / p & gt; < / p>

    & lt; script type = < / code> "text / javascript" & gt;

    < code class = "undefined space"> function getAdd () {

    // Tìm nạp giá trị của đầu vào với id val1

    const num1 = Number (document.getElementById ("val1"). value);

    // Tìm nạp giá trị đầu vào có id val2

    const num2 = Number ( document.getElementById ("val2"). value);

    const add = num1 + num2;

    console.log (add);

    // Hiển thị kết quả trong đoạn văn bằng dom

    document .getElementById ("result"). innerHTML = "Addition:" + add;

    < / p>

    // Thay đổi màu của thẻ đoạn bằng màu đỏ < / p>

    document.getElementById ("result"). style.color = "red ";

    }

    & lt; / script & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
     

    Đầu ra:

    Tài liệu tham khảo: https: //www.w3.org/TR/DOM-Level-3-Core/introduction.html

    HTML là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách cấu trúc trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML Ví dụ về HTML này.

    Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề đối tượng dom là gì

What is the document object model (DOM)?

alt

  • Tác giả: internet-class
  • Ngày đăng: 2016-09-29
  • Đánh giá: 4 ⭐ ( 6745 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript interacts with the page contents through an abstraction known as the document object model or, more typically, the DOM. The DOM consists of the HTML converted into a tree-based representation of the page’s contents. The browser builds the initial DOM based on the page’s HTML source, but from that point on the DOM can evolve as determined by the JavaScript.

    Credits: Talking: Geoffrey Challen (Assistant Professor, Computer Science and Engineering, University at Buffalo). Producing: Greg Bunyea (Undergraduate, Computer Science and Engineering, University at Buffalo).

    Part of the https://www.internet-class.org online internet course. A blue Systems Research Group (https://blue.cse.buffalo.edu) production.

Dom là gì? Một phần mở đầu cho người không lập trình

  • Tác giả: kynguyencongnghe.com
  • Đánh giá: 3 ⭐ ( 7644 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Những khái niệm cơ bản về DOM

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 1795 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML là gì?

DOM là gì? Tìm hiểu và thao tác DOM trong Javascript

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 7647 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: DOM là tên gọi viết tắt của (Document Object Model – tạm dịch Mô hình Các Đối tượng Tài liệu). Là một chuẩn được định nghĩa bởi W3C (Tổ Chức Web Toàn Cầu - World Wide Web Consortium). DOM được dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dụng như Javascript, PHP...

DOM trong Javascript là gì? Cấu trúc của DOM 2021 như thế nào?

  • Tác giả: teky.edu.vn
  • Đánh giá: 5 ⭐ ( 8395 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu như bạn muốn tìm hiểu kỹ hơn về vấn đề DOM trong Javascript, bài viết chúng tôi đưa đến vô cùng thú vị, cùng đọc và tìm hiểu bạn nhé!

DOM là gì? Tìm hiểu về Document Object Model

  • Tác giả: bizflycloud.vn
  • Đánh giá: 5 ⭐ ( 3120 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: DOM (Document Object Model) là một API dùng để hiển thị các phần tử của tài liệu HTML và XML dưới dạng ngôn ngữ lập trình đối tượng.

DOM là gì? Tìm hiểu về Document Object Model

  • Tác giả: bizcloud.vn
  • Đánh giá: 3 ⭐ ( 5746 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: DOM (Document Object Model) là một API dùng để hiển thị các phần tử của tài liệu HTML và XML dưới dạng ngôn ngữ lập trình đối tượng. Cấu trúc DOM cho bất kỳ

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình