Hướng dẫn is dom same as html? - dom có ​​giống html không?

Vì vậy, chúng tôi có thể đánh dấu nội dung của chúng tôi và cung cấp cho nó một số cấu trúc, nói rằng mọi thứ có liên quan như thế nào, cũng như cho nó nhiều ý nghĩa hơn.

Vì vậy, ví dụ, chúng tôi có những danh sách

hoặc không đặt hàng này, sau đó có con. Đó là một bit cấu trúc. Và mỗi đứa trẻ đó là một yếu tố danh sách các thẻ
• có một số nội dung bên trong nó.

  Vì vậy, chúng tôi biết rằng có ba yếu tố trong danh sách của chúng tôi mà mỗi yếu tố có một số nội dung văn bản. Chúng tôi biết làm thế nào họ liên quan đến nhau. Sau đó, chúng tôi biết nơi nó sẽ phù hợp với phần còn lại của trang của chúng tôi.

  Nhưng điều này một mình không phải là một trang đầy đủ.

  Danh sách các kiểu tiệc trong đánh dấu HTML, trong một tệp lớn hơn với các phần tử HTML như

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  1,

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  2 và

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  3.

  Thông thường loại HTML này được tìm thấy trong phần còn lại của nội dung của bạn. Vì vậy, nó sẽ là toàn bộ trang.

  Vì vậy, chúng tôi sẽ thấy rằng chúng tôi bắt đầu với một cái gì đó như thẻ phần tử

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  1 này ở đầu tệp HTML của chúng tôi, đó là cha mẹ của mọi thứ khác. Và thông thường, chúng tôi sẽ bắt đầu với yếu tố

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  2 bao gồm một số siêu dữ liệu và thông tin về chính trang này, ví dụ như tiêu đề.

  Sau đó, chúng tôi sẽ chuyển xuống thường xuyên, chúng tôi sẽ có một thẻ

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  3 mà mô tả thêm nội dung thực tế của trang như một người dùng sẽ thấy nó. Thông thường, nó thực hành tốt để có một yếu tố

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  7 hoặc loại nội dung chính trong trang của bạn. Những gì duy nhất cho trang này. Vì vậy, không nhất thiết phải điều hướng, nhưng những thứ độc đáo thực sự.

  Và cuối cùng, tất cả các cách trong đó cuối cùng chúng tôi sẽ có được nội dung thực tế mà chúng tôi muốn hiển thị, trong trường hợp này, danh sách các phong cách tiệc tùng của chúng tôi.

  Và một điều mà bạn có thể lưu ý là tất cả những điều này là phân cấp. Vì vậy, chúng tôi bắt đầu với thẻ cấp cao nhất

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  1 đó và mọi thứ đều là một đứa trẻ của yếu tố đó. Và mỗi thẻ phần tử này có thể có con, trẻ em có thể là các yếu tố HTML khác hoặc nó chỉ có thể là nội dung văn bản đơn giản.

  Nhưng vào cuối ngày, điều này hiển thị nhiều ý nghĩa và cấu trúc hơn chỉ là văn bản đơn giản mà chúng ta đã xem xét trước đây. Nhưng đây vẫn chỉ là một tệp văn bản. Bạn không thể chính xác chỉ gửi cái này cho ai đó và giống như, Oh Oh, hey, hãy xem trang web của tôi. Có phải điều này thực sự tuyệt vời? Nó có rất nhiều thứ trong đó.

  Vậy làm thế nào điều này trở thành một trang web thực tế trông giống như bạn mong đợi? Đó là nơi mà DOM phát huy tác dụng.

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

  Mô hình đối tượng tài liệu (DOM): API mô tả cách thức hoạt động của các trang web. Được thực hiện bởi các trình duyệt.

  DOM là mô hình đối tượng tài liệu và đây là API mô tả cách thức hoạt động của các trang web và nó được triển khai bởi các trình duyệt.

  Tệp văn bản HTML phác thảo một trang và một loạt các hộp đại diện cho các nút DOM phù hợp với các phần tử.

  Vì vậy, khi trình duyệt nhận được một tệp văn bản HTML, nó sử dụng API DOM để tìm ra cách phân tích tệp văn bản đó vào cấu trúc dữ liệu phân cấp này mà đôi khi chúng ta gọi là DOM Tree, bởi vì nó là một cấu trúc dữ liệu cây

  Chúng ta có thể thấy rằng đối tượng cấp cao nhất là tài liệu này. Và sau đó nó có con. Nó có các nút bên trong nó. Và tất cả chúng đều ánh xạ tới cùng một phần tử HTML mà chúng ta thấy trong tệp văn bản của mình. Vì vậy, có một phần tử văn bản

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  1 và tương ứng với nút HTML DOM. Phần tử

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  3 HTML trở thành nút DOM cơ thể, et cetera, tất cả các cách xuống.

  Trình duyệt có cùng các thành phần danh sách được xác định trong tệp văn bản HTML và các nút DOM.

  Và sau đó, đây là tất cả cấu trúc dữ liệu nội bộ mà trình duyệt duy trì và cập nhật và giữ đồng bộ. Và nó có rất nhiều thuộc tính bổ sung và hành vi thú vị gắn liền với từng nút DOM này, mọi thứ bạn cần để làm cho một trang web hoạt động.

  Vì vậy, sau đó, trình duyệt sử dụng cấu trúc dữ liệu DOM bên trong đó, cùng với tất cả các hành vi mà nó đại diện, để thực sự hiển thị trang web mà bạn đã từng thấy và người dùng của bạn có thể nhìn thấy và tương tác.

  Các tiêu chuẩn HTML và DOM bao gồm: ánh xạ giữa các phần tử HTML và các nút DOM, định nghĩa và hành vi phần tử, chức năng JavaScript mà trình duyệt nên thực hiện (như

  document.querySelector('li')
  
  // 
  💃🏻 dance
  

  1) và một loạt các công cụ khác.

  Vì vậy, chúng ta có thể nghĩ về tiêu chuẩn HTML và tiêu chuẩn DOM về cơ bản giống như các bộ quy tắc. Và các quy tắc này sẽ bao gồm những thứ như làm thế nào để bạn ánh xạ giữa phần tử HTML và nút DOM? Cũng như mỗi yếu tố đó nên làm gì? Làm thế nào để họ cư xử? Những loại thuộc tính và thuộc tính bạn có thể đặt trên chúng? Họ nên trông như thế nào? Cũng như chức năng JavaScript mà trình duyệt nên thực hiện để truy cập DOM.

  Vì vậy, ví dụ, nếu bạn đã từng sử dụng biến

  document.querySelector('li')
  
  // 
  💃🏻 dance
  

  1 trong JavaScript, thì đó không phải là nguồn gốc từ chính JavaScript. Nó không đến từ JavaScript. Đó là lý do tại sao nó không luôn luôn hoạt động nếu bạn ở trong nút viết mã bên máy chủ và bạn gọi

  document.querySelector('li')
  
  // 
  💃🏻 dance
  

  1 nó có thể không thực sự ở đó.

  document.querySelector('li')
  
  // 
  💃🏻 dance
  

  4Object được xác định bởi API DOM và nó có một tập hợp các thuộc tính và chức năng JavaScript mà bạn có thể gọi trên đó để tương tác với DOM theo trình duyệt được cung cấp.

  Và cũng có một loạt các thứ khác mà các API và tiêu chuẩn khác nhau này thực hiện và mô tả. Đó là một ý tưởng thực sự tuyệt vời nếu bạn có thời gian để đi và bắt đầu chọc chúng, đọc qua chúng. Bạn sẽ học được một loạt các thứ. Và về cơ bản, mọi thứ xảy ra trên các trang web mà bạn có thể viết trong một tệp và có nó trở nên sống động, nó được mô tả bởi một trong những tiêu chuẩn này.

  Một bộ kế hoạch (HTML) được trao cho một người xây dựng với một cuốn sách (trình duyệt) được biến thành một ngôi nhà (DOM).

  Có một phép ẩn dụ mà tôi nghĩ là thực sự hữu ích trong việc hiểu cách HTML và DOM tương tác. Vì vậy, tôi thích nghĩ về HTML là kế hoạch nhà, như kế hoạch xây dựng. Vì vậy, chúng tôi có thể lấy tệp HTML văn bản này, gửi nó đến trình duyệt và sau đó trình duyệt sẽ đọc tất cả các tiêu chuẩn và API xung quanh DOM để tìm ra cách thực sự xây dựng một ngôi nhà từ các kế hoạch xây dựng đó.

  Cùng một bộ kế hoạch (HTML) được trao cho một người xây dựng khác với một cuốn sách (trình duyệt) được biến thành một ngôi nhà giống hệt nhau (DOM).

  Và sau đó về lý thuyết, nếu chúng ta gửi cùng một tệp văn bản HTML đến một trình duyệt khác, nó sẽ tham chiếu các API và tiêu chuẩn đó để xây dựng một ngôi nhà khá giống nhau.

  Chúng tôi có lẽ sẽ không bao giờ giống hệt nhau chỉ vì xây dựng một trình duyệt là vô cùng phức tạp. Các tiêu chuẩn này rất lớn và nó rất khó để khiến chúng luôn hành xử chính xác theo cùng một cách trong mọi kịch bản mọi lúc. Vì vậy, bạn có thể thấy một số khác biệt nhỏ, nhưng đối với hầu hết các phần, đây sẽ là cùng một ngôi nhà.

  Hai người dùng đứng cạnh các ngôi nhà Dom, đã được sửa đổi hoặc hoàn toàn được thay thế bằng một tòa nhà khác.

  Và sau đó tất nhiên bạn có người dùng tương tác với trang web của mình và vì chúng khiến các sự kiện xảy ra, hãy nhấp vào mọi thứ hoặc thực hiện các công việc khác, thường thì trình duyệt sẽ diễn giải đang gửi biểu mẫu hoặc bất cứ điều gì khác.

  Đôi khi, như Let Let nói, bạn đã sử dụng một khung ứng dụng trang duy nhất, vì vậy, nơi bạn sử dụng JavaScript để thay thế hoàn toàn nội dung của trang của bạn bằng một thứ khác. Vì vậy, DOM mà người dùng đang nhìn thấy có thể trông hoàn toàn khác với DOM ban đầu được tạo từ tệp nguồn HTML. Và điều đó hoàn toàn ổn. Đó là một điều xảy ra. Nhưng tất cả có nguồn gốc từ cùng một nơi mặc dù DOM có thể tiếp tục và mở rộng và khác nhau.

  Bản demo trực tiếp với trục trặc

  Vậy tại sao don lồng chúng ta hãy xem một số mã? Tôi có ở đây ứng dụng trục trặc nhỏ đáng yêu này và nó có một tệp HTML, trông thực sự giống với mã mà chúng tôi chỉ đang xem. Chúng ta có thể thấy ở đây rằng chúng ta có danh sách này và tất cả các yếu tố.

  HTML kết xuất trong một trình duyệt với một danh sách các phong cách tiệc tùng.

  Vì vậy, hãy để Lừa đi trước và xem xét điều này trong trang mới. Vì vậy, đây là những gì chúng ta mong đợi để xem. Nếu chúng tôi xem nguồn trang, chúng tôi sẽ thấy rằng đây là cùng một tệp HTML mà chúng tôi thấy rằng máy chủ sẽ hiển thị. Hãy để đi trước và xem liệu chúng ta có thể xem xét DOM không.

  HTML được hiển thị tương tự với các công cụ nhà phát triển mở để hiển thị cây Dom phù hợp.

  Vì vậy, tôi sẽ làm tất cả những điều này với các công cụ của nhà phát triển Chrome, nhưng hầu như tất cả các trình duyệt đều có một số cách để truy cập các công cụ nhà phát triển này. Vì vậy, ở đây tôi có thể thấy một đại diện của cây Dom của tôi. Một lần nữa, tôi thấy rằng tôi bắt đầu với yếu tố

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  1 cấp cao nhất này. Tôi đã có

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  2 và

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  3 như được mô tả trong tệp HTML của tôi và những gì một lần nữa, đây là tất cả các nút DOM. Tôi có thể nhấp vào tất cả các cách xuống và xem các yếu tố danh sách của tôi.

  Vì vậy, tôi đã đề cập rằng cũng có các phần JavaScript của DOM. Vì vậy, ví dụ, chúng ta có thể nhập tài liệu. Và sau đó chúng tôi sẽ có được đối tượng tài liệu. Điều này có một loạt các chức năng và thuộc tính khác nhau mà bạn có thể sử dụng để truy cập và làm những việc khác nhau để tương tác với DOM thông qua JavaScript.

  document.children
  
  // HTMLCollection [html]
  

  Vì vậy, ví dụ, chúng ta có thể nhìn vào trẻ em của đối tượng tài liệu và chúng ta thấy rằng nó thực sự chỉ là yếu tố

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  1 này mà chúng ta đã xác định trong tệp văn bản HTML hiện đã được chuyển thành mô hình đối tượng tài liệu. Và chúng ta có thể tiếp tục tương tác với điều này.

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  Chúng ta có thể lấy yếu tố

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  1 đó và nhìn vào con cái của nó, và sau đó chúng ta sẽ thấy

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  2 và

  document.children[0].children
  
  // HTMLCollection(2) [head, body]
  

  3. Và chúng ta chỉ có thể tiếp tục làm điều này mãi mãi, hoặc chúng ta cũng có thể sử dụng các API DOM khác nhau để tương tác trực tiếp với những điều đó.

  document.querySelector('li')
  
  // 
  💃🏻 dance
  

  Vì vậy, ví dụ, nếu bạn đã từng thực hiện tài liệu.QuerySelector, chúng tôi có thể sử dụng điều này để sử dụng bộ chọn CSS để lấy một phần tử ra khỏi tài liệu, miễn là nó tồn tại. Vì vậy, ví dụ, tôi có thể nói tôi muốn một yếu tố phù hợp với phần tử danh sách. Và tôi sẽ chỉ lấy cái đầu tiên và sau đó tôi có thể tương tác với cái này.

  Các công cụ phát triển mở với

  được tô sáng trong tab các phần tử. Một chú giải công cụ được mở, nói rằng sử dụng $ 0 trong bảng điều khiển để chỉ phần tử này.

  Cũng có một mẹo thú vị, ít nhất là trong các công cụ Chrome Dev, không rõ ràng về những công cụ khác, nhưng bạn có thể thấy ở đây rằng nếu bạn có một phần tử được chọn ở đây trong cây Dom, bạn có thể sử dụng

  newLi = document.createElement('li')
  
  // 
  
  

  3 trong bảng điều khiển để tham khảo Đối với yếu tố này, điều đó chỉ có nghĩa là ngay bây giờ

  newLi = document.createElement('li')
  
  // 
  
  

  3 sẽ đề cập đến yếu tố danh sách của tôi. Và nếu tôi nhấp vào thứ khác

  newLi = document.createElement('li')
  
  // 
  
  

  3, nó sẽ đề cập đến cái đó.

  Tôi cũng có thể gán chúng cho các biến để tôi có thể truy cập chúng sau. Hoặc bạn luôn có thể nhấp chuột phải và lưu trữ như một biến toàn cầu. Điều này thực sự hữu ích nếu bạn gỡ lỗi chỉ để có một số quyền truy cập nhanh chóng vào mọi thứ.

  Vì vậy, một lần nữa, những điều, các biến mà tôi làm việc bây giờ là các đối tượng DOM thực tế. Và tất cả các API trên chúng được xác định bởi API DOM, mặc dù tôi đã truy cập chúng thông qua JavaScript mà Lọ cung cấp bởi trình duyệt cụ thể của tôi.

  Vì vậy, một điều chỉ cho thấy rằng DOM tách biệt với HTML ban đầu được tạo ra trang này là tôi có thể tiếp tục và chỉ thay đổi tài liệu. Thông thường, điều này sẽ xảy ra như là kết quả của một số JavaScript mà bạn đã viết trên trang, nhưng chúng tôi có thể có một số niềm vui.

  Một yếu tố danh sách mới đã được thêm vào HTML được kết xuất và cây Dom.

  Một API DOM thú vị là một API tạo ra các yếu tố mới. Vì vậy, nếu bạn đang sử dụng thứ gì đó có thể phản ứng hoặc Ember hoặc Angular hoặc Vue mà Lôi thực hiện một số kết xuất lạ mắt cho bạn, họ có thể sử dụng API này dưới mui xe theo cách mà bạn không thể tự viết.

  newLi = document.createElement('li')
  
  // 
  
  

  Vì vậy, tôi có thể tạo một yếu tố danh sách mới và tôi sẽ gọi tài liệu đó. Và nó có một chức năng gọi là createdeement. Và sau đó tôi nói với nó tên thẻ mà tôi muốn. Trong trường hợp này, chỉ là một yếu tố danh sách khác.

  newLi.textContent = 'hello world'
  
  // 'hello world'
  

  Và sau đó về yếu tố này tôi có thể bây giờ, hãy để nói rằng đặt nội dung văn bản thành Hello World. Bây giờ điều này không thực sự tồn tại ở bất cứ đâu trong DOM. Tôi chỉ có một tham chiếu đến yếu tố này, nhưng tôi có thể thêm nó vào DOM.

  $0.appendChild(newLi)
  
  // 
  hello world
  

  Vì vậy, nếu tôi có, rất tiếc, tôi có danh sách không theo thứ tự của mình, tôi có thể nối cho đứa trẻ, vượt qua nó là yếu tố danh sách mới của tôi. Cây dom của tôi đã được cập nhật với đối tượng mà tôi vừa tạo.

  Nhưng nếu chúng tôi xem nguồn trang, tệp HTML này vẫn không thay đổi. Điều này không nhất thiết phải đồng bộ hóa với DOM. Đây là tệp văn bản mà trình duyệt được sử dụng để tạo phiên bản ban đầu của việc này, nhưng sau đó cây Dom thay đổi theo thời gian. Và điều đó hoàn toàn tốt.

  Sự kết luận

  Có một loạt những điều thú vị khác mà bạn có thể làm với API DOM. Khá nhiều sự kiện, tương tác, đó là những gì, ví dụ là mô tả một yếu tố danh sách thường có viên đạn nhỏ này và có một số vết lõm và tất cả những thứ tuyệt vời khác này.

  Vì vậy, nếu bạn muốn tìm hiểu thêm, tôi thực sự khuyên bạn nên tài liệu mạng Mozilla Developer và đặc biệt là họ đã bắt đầu với trang HTML, đó sẽ đi qua những điều cơ bản của HTML, và sau đó một khi bạn quen thuộc với điều đó , Tôi thực sự khuyên bạn nên giới thiệu về tài liệu của họ về tài liệu DOM, sau đó nói một chút về API DOM và cách nó tương tác với JavaScript, cách bạn có thể truy cập nó.

  Và nói chung, tôi sẽ chỉ nói rằng các tài liệu web MDN là một điều tuyệt vời, họ là trang web của tôi đến tài liệu. Vì vậy, nếu bạn muốn nhìn thêm một chút vào những thuộc tính và chức năng bạn có thể gọi trên các nút dom, đây là một nơi tuyệt vời để đi.

  Marie sóng tạm biệt!

  Cảm ơn bạn rất nhiều vì đã tham gia cùng tôi hôm nay. Tôi hy vọng rằng điều đó đã cung cấp cho bạn một cái nhìn sâu sắc hơn một chút về chính xác cách HTML và mô hình đối tượng tài liệu tương tác với nhau trong các trang web.

  Hy vọng rằng video tiếp theo của tôi, chúng tôi sẽ đi một chút về sự khác biệt giữa các thuộc tính HTML và thuộc tính DOM. Nói cách khác, cách bạn có thể đặt mọi thứ trong HTML là giá trị ban đầu và sau đó tiếp tục cập nhật chúng và truy cập chúng trong JavaScript trong suốt vòng đời của trang web của bạn. Những thứ như người nghe giá trị hoặc sự kiện hoặc các loại đầu vào mà bạn có trên trang của bạn. Đó chắc chắn là một cái gì đó đã cắn tôi trong quá khứ và là một nguồn gây nhầm lẫn.

  Vì vậy, hãy kiểm tra lại thời gian khác và xem liệu tôi có quản lý để tạo video đó không. Và trong thời gian chờ đợi, nếu bạn nhìn vào bên dưới, cần có các liên kết đến tất cả các tài nguyên mà tôi đã sử dụng ngày hôm nay bao gồm các tài liệu MDN và ứng dụng trục trặc mà tôi chỉ giới thiệu. Cảm ơn bạn rất nhiều và có một ngày tuyệt vời.

  ---

  Có phải DOM chỉ là một tệp HTML?

  DOM không phải là bản sao của tệp HTML - nó chỉ đơn giản là một cách khác mà trình duyệt web tổ chức thông tin HTML. Cách một trình duyệt tạo DOM tương tự như cách nó tạo ra một trang web. — it's simply a different way that the web browser organizes the HTML information. The way a browser creates the DOM is similar to how it creates a web page.

  DOM liên quan đến HTML như thế nào?

  DOM là viết tắt của mô hình đối tượng tài liệu. Trong thế giới của Web, tất cả các trang web HTML được gọi là tài liệu. Mô hình đối tượng tài liệu đại diện cho từng trang web này trong cấu trúc giống như cây để giúp truy cập và quản lý các yếu tố dễ dàng hơn.. In the world of web, all HTML webpages are referred to as documents. The Document Object Model represents each of these web pages in a tree-like structure to make it easier to access and manage the elements.

  HTML có theo DOM không?

  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ì vậy, 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.. so basically Document Object Model is an API that represents and interacts with HTML or XML documents.

  Là phần DOM của HTML hay JavaScript?

  Dom và JavaScript có nghĩa là, nó được viết bằng JavaScript, nhưng sử dụng DOM để truy cập tài liệu và các yếu tố của nó.DOM không phải là ngôn ngữ lập trình, nhưng không có nó, ngôn ngữ JavaScript sẽ không có bất kỳ mô hình hoặc khái niệm nào về các trang web, tài liệu HTML, tài liệu SVG và các bộ phận thành phần của chúng.it is written in JavaScript, but uses the DOM to access the document and its elements. The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, SVG documents, and their component parts.