search

Dom khác với html như thế nào?

Ngày đăng: 11/01/2023
Trả lời: 0
Lượt xem: 27

Các trang web hiện đại rất năng động. Điều này có nghĩa là chúng tôi cần một cách phù hợp và thuận tiện để sửa đổi và thao tác cấu trúc của tài liệu web

Show

Chẳng hạn, sự sửa đổi này trong tài liệu HTML thường ở dạng tạo, thêm hoặc xóa các phần tử trong tài liệu

Trong bài viết này, bạn sẽ tìm hiểu Mô hình Đối tượng Tài liệu (DOM) là gì, một chút về lịch sử của nó và cách bạn sử dụng nó để thao tác với các tài liệu web, đặc biệt là các tài liệu HTML

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

DOM là một giao diện web, được phát triển và phát hành bởi World Wide Web Consortium (W3C). Tổ chức này được thành lập để thiết lập các tiêu chuẩn cho World Wide Web

DOM là một API web trung lập về ngôn ngữ. Điều này có nghĩa là bạn có thể triển khai và áp dụng nó trong bất kỳ ngôn ngữ lập trình nào

DOM đại diện cho các phần cấu trúc của tài liệu web dưới dạng các đối tượng có thể được truy cập và thao tác. Nói cách khác, DOM cho phép bạn với tư cách là nhà phát triển phần mềm thực hiện những việc sau.  

  • Tạo và xây dựng tài liệu web.  
  • Điều hướng cấu trúc của tài liệu web.  
  • Thêm, sửa đổi hoặc xóa các thành phần và nội dung trong tài liệu web

Lịch sử của DOM

Lịch sử của DOM có liên quan đến JavaScript và JScript là ngôn ngữ kịch bản được sử dụng rộng rãi đầu tiên. Những ngôn ngữ này đã giúp làm cho các trang web tương tác

Trước khi W3C phát triển đặc tả DOM tiêu chuẩn, JavaScript và JScript có các cách khác nhau để cho phép truy cập vào thao tác tài liệu HTML

Các phương thức và giao diện hạn chế này cho phép bạn thao tác các tài liệu HTML theo cách này đã trở thành DOM Cấp 0

Năm 1998, W3C hoàn thành dự thảo đặc tả DOM tiêu chuẩn đầu tiên, trở thành tiêu chuẩn khuyến nghị cho tất cả các trình duyệt. Đặc tả DOM tiêu chuẩn này đã trở thành DOM Cấp 1. DOM cấp 1 đã cung cấp một mô hình toàn diện để thao tác với cả tài liệu HTML và XML

Năm 2000, W3C đã phát hành DOM Cấp 2, giới thiệu các phương thức như 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
5, cũng như mô hình sự kiện được tiêu chuẩn hóa và hỗ trợ cho các không gian tên XML và CSS

DOM Cấp 3, phát hành năm 2004, đã thêm hỗ trợ cho XPath và xử lý sự kiện bàn phím. Và vào cuối năm 2015, đặc tả DOM mới nhất, DOM Cấp 4, đã trở thành tiêu chuẩn được công bố

Cây DOM là gì?

Biểu diễn cấu trúc do DOM tạo ra rất giống một cái cây. Nó có một số đối tượng trong đó được gọi là các nút

Trình duyệt sử dụng biểu diễn cây DOM mà nó xây dựng từ tài liệu HTML để xác định nội dung sẽ hiển thị trên trang web. Ví dụ: một biểu diễn trực quan của cây DOM sẽ trông như thế này

Dom khác với html như thế nào?
Cây DOM

Tài liệu HTML của cây DOM ở trên trông như thế này.  




    
    
    
    TITLE
    


    

        
HELLO WORLD

    

    Document Object Model

Các nút so với các phần tử trong DOM

Thông thường, các nhà phát triển nhầm lẫn các nút với các phần tử. Vì vậy, chúng ta nên phân biệt giữa hai sớm trong bài viết này để tránh nhầm lẫn

Các nút là tất cả các thành phần mà một tài liệu trang web được tạo thành từ. Nói cách khác, một trang web là tập hợp các nút

Một phần tử là một loại nút trong tài liệu. Chẳng hạn, thuộc tính DOM 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
6 khi được sử dụng trên nút cha sẽ trả về tất cả các nút khác nhau có trong nút cha được chỉ định đó

Trong ví dụ bên dưới, thuộc tính childNodes được sử dụng trên nút phần tử 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
7 của tài liệu HTML được cung cấp ở trên

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]

Lưu ý rằng có năm mục trong 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
8. Điều này là do chúng ta có một loại nút khác, các nút văn bản, khác với các nút phần tử trong nút phần tử 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
7

Để điều tra thêm về vấn đề này, hãy thực hiện các bước sau trong bảng điều khiển của bạn

  1. Nhấp vào biểu tượng thả xuống ngay trước "nodeList"
  2. Chọn nút văn bản bằng cách nhấp vào biểu tượng thả xuống trước "kiểm tra"
  3. Kiểm tra tùy chọn textContent trong các tùy chọn danh sách trong danh sách thả xuống

Nếu làm theo hướng dẫn ở trên, bạn sẽ thấy nội dung kiểm tra của nút văn bản đầu tiên là "/n  ". Đây là một nút văn bản cho biết một dòng mới sau nút phần tử 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
7, nút phần tử 
//javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
1 và nút phần tử 
//javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
2

Dom khác với html như thế nào?

Mối quan hệ giữa các nút trong cây DOM

Các nút trong cây DOM có mối quan hệ thứ bậc với nhau trong cây DOM. Chúng được xác định bởi vị trí của chúng so với nhau trong cây DOM

Đây là các vị trí nút có trong hình minh họa cây DOM ở trên

  • Nút gốc. Nút gốc luôn ở đỉnh của cây DOM. Trong tài liệu HTML, nút gốc luôn là phần tử 
    //javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
    3
  • nút con. Nút con là một nút được nhúng bên trong một nút khác. Trong hình minh họa ở trên, các phần tử 
    //javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
    4 và 
    




    
    
    
    Document


   
      
    
    • item one
      • 
    
    • item two
      • 
    
    • item three
      • 
    
    • item four
      •
    7 là con của phần tử 
    //javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
    3
  • Nút hậu duệ. Bất kỳ nút nào được định vị bên dưới nút khác theo thứ tự phân cấp là con cháu của các nút được định vị phía trên nó. Ví dụ: mặc dù phần tử  
    //javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
    7 không phải là phần tử con trực tiếp của phần tử 
    




    
    
    
    Document


   
      
    
    • item one
      • 
    
    • item two
      • 
    
    • item three
      • 
    
    • item four
      •
    7, nhưng nó là phần tử con của phần tử 
    




    
    
    
    Document


   
      
    
    • item one
      • 
    
    • item two
      • 
    
    • item three
      • 
    
    • item four
      •
    7 và  gốc 
    //javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
    3
  • nút cha. Bất kỳ nút nào có nút khác bên trong nó là nút cha. Ví dụ: phần tử 
    




    
    
    
    Document


   
      
    
    • item one
      • 
    
    • item two
      • 
    
    • item three
      • 
    
    • item four
      •
    7 là cha của phần tử 
    //javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
    1 và 
    //javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
    2 trong ví dụ trên. Lưu ý rằng chỉ các nút loại phần tử mới có thể là nút cha
  • nút anh chị em. Các nút ở cùng cấp theo thứ tự phân cấp trong cây DOM là các nút anh chị em. Ví dụ: các phần tử 
    //javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
    1 và 
    //javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]
    2 trong ví dụ trên là anh em ruột
  • Nút lá. Văn bản bên trong các phần tử là các nút lá. Điều này là do họ không thể có các nút con của riêng mình

HTMLCollection so với nodeList

Để thao tác trên cây DOM, bạn cần có cách chọn từng mục riêng lẻ hoặc tập hợp các mục trong đó

Bạn có thể sử dụng một ngôn ngữ lập trình như JavaScript để chọn một mục hoặc một tập hợp các mục trong cây DOM bằng cách sử dụng một số phương thức do DOM cung cấp

Các phương pháp 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
5 và 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
47 có thể chọn các mục riêng lẻ. Các phương pháp 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
48, 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
49 hoặc 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
70 có thể chọn một tập hợp các mục

Trong cây DOM, chúng ta có thể lấy HTMLCollection hoặc NodeList dựa trên phương thức được sử dụng để chọn tập hợp các mục. Các phương thức 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
48 và 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
49 trả về HTMLCollections, trong khi 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
73 trả về một nodeList

HTMLCollection và nodeList chia sẻ một số điểm tương đồng và khác biệt. Chúng giống nhau theo những cách sau

  • Chúng là các đối tượng giống như mảng
  • Chúng là tập hợp các vật phẩm
  • Chúng có thể được chuyển đổi thành một mảng bằng cách sử dụng phương thức 
    




    
    
    
    Document


   
      
    
    • item one
      • 
    
    • item two
      • 
    
    • item three
      • 
    
    • item four
      •
    74
  • Cả hai đều có lập chỉ mục dựa trên số không
  • Cả hai đều có thể được lặp đi lặp lại với một for. vòng
  • Họ có một thuộc tính chiều dài
  • Họ không có sẵn các phương thức mảng

Dưới đây là một tài liệu HTML mẫu và mã JavaScript để nhấn mạnh những điểm tương đồng này






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    • 
   


    


    
//javascript content

const listItemsHtmlCollection = document.getElementsByTagName("li")
console.log(listItemsHtmlCollection) // HTMLCollection(4) [li, li, li, li]

const listItemsNodeList = document.querySelectorAll("li")
console.log(listItemsNodeList) // NodeList(4) [li, li, li, li]

Bạn có thể thấy ở trên rằng trong khi 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
75 trả về một HTMLCollection với các mục khớp với thẻ 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
76 được chỉ định, thì 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
73 trả về một nodeList

Bây giờ, hãy sử dụng một for. vòng lặp để lặp lại trên cả hai bộ sưu tập






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
4

Trong cả hai trường hợp, màu của văn bản sẽ được đổi thành màu đỏ

Dom khác với html như thế nào?

Bây giờ hãy xóa for. lặp lại vòng lặp và sử dụng một phương thức mảng trên bản đồ để lặp lại cả hai bộ sưu tập






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
7
Dom khác với html như thế nào?

Để sử dụng thành công phương pháp mảng bản đồ, bạn phải chuyển đổi cả hai mục thành một mảng bằng phương pháp 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
74 như thế này. 

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
0

Có hai cách chính trong đó HTMLCollection và một nodeList khác nhau. họ đang

  • Một nodeList đi kèm với một số phương thức và thuộc tính sẵn có không có sẵn trong HTMLCollection. Các phương thức bao gồm các phương thức 
    




    
    
    
    Document


   
      
    
    • item one
      • 
    
    • item two
      • 
    
    • item three
      • 
    
    • item four
      •
    79 và 
    //javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
    00 để lặp qua một nodeList. Các thuộc tính bao gồm thuộc tính keys và thuộc tính value
  • Một HTMLCollection luôn hoạt động, trong khi một nodeList có thể là trực tiếp hoặc tĩnh. Một bộ sưu tập các nút đang hoạt động nếu một thay đổi trong cây DOM tự động cập nhật bộ sưu tập. Nếu một thay đổi trong cây DOM không ảnh hưởng đến bộ sưu tập thì nó là tĩnh. Các thay đổi của DOM có thể là thêm một nút mới hoặc loại bỏ một nút hiện có. Các phương thức DOM như 
    




    
    
    
    Document


   
      
    
    • item one
      • 
    
    • item two
      • 
    
    • item three
      • 
    
    • item four
      •
    5 và 
    




    
    
    
    Document


   
      
    
    • item one
      • 
    
    • item two
      • 
    
    • item three
      • 
    
    • item four
      •
    48 trả về HTMLCollections luôn hoạt động. Phương thức 
    




    
    
    
    Document


   
      
    
    • item one
      • 
    
    • item two
      • 
    
    • item three
      • 
    
    • item four
      •
    70 trả về một nodeList tĩnh

Phương thức HTML DOM

Lõi DOM cấp 1, lõi Dom cấp 2 và lõi Dom cấp 3 đã giới thiệu một số phương pháp cho phép các nhà phát triển web thao tác trên cây DOM. Một số phương pháp sau đây

Phương pháp DOM //javascript content //select the element node with the DOM method querySelector const body = document.querySelector('body') //select the children nodes with the element node with the DOM property node.childNodes const childrenNodes = body.childNodes //console log the children nodes console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]04

Phương thức 

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
04 tạo một phần tử thuộc loại được chỉ định làm đối số của nó

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
8
//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
9

Bây giờ hãy kiểm tra bảng điều khiển để biết bảng điều khiển danh sách đã đăng nhập. Bạn sẽ thấy rằng hiện có 5 phần tử 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
76 bên trong phần tử cha 
//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
07

Dom khác với html như thế nào?

Phương pháp DOM //javascript content //select the element node with the DOM method querySelector const body = document.querySelector('body') //select the children nodes with the element node with the DOM property node.childNodes const childrenNodes = body.childNodes //console log the children nodes console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]08

Phương thức 

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
08 tạo một nút văn bản với chuỗi được chỉ định làm đối số của nó. Hãy thêm văn bản vào phần tử 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
76 mà chúng ta đã tạo ở trên






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
5

Bây giờ hãy lưu tệp JavaScript của bạn và tải lại trang web của bạn

Dom khác với html như thế nào?

Phương pháp DOM //javascript content //select the element node with the DOM method querySelector const body = document.querySelector('body') //select the children nodes with the element node with the DOM property node.childNodes const childrenNodes = body.childNodes //console log the children nodes console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]81

Phương thức 

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
81 thêm một nút vào cuối danh sách con của nút cha

Nếu con được chỉ định là một nút hiện có trong tài liệu, thì 

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
81 sẽ di chuyển nó từ vị trí hiện tại trên cây DOM sang vị trí mới. Chúng tôi đã sử dụng phương pháp trước đó để biến phần tử 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
76 mới tạo của chúng tôi thành phần tử con của phần tử 
//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
07

Phương pháp DOM Document
  • item one
  • item two
  • item three
  • item four
5

Phương thức này chọn và trả về phần tử có ID được chỉ định bên trong nó làm đối số. Nếu không có phần tử nào như vậy tồn tại, phương thức trả về null. Hãy thêm một thuộc tính id vào phần tử 

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
07 của chúng ta trong tài liệu HTML và đặt cho nó một đường viền màu đỏ

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
0
//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
1
Dom khác với html như thế nào?

Phương pháp DOM Document
  • item one
  • item two
  • item three
  • item four
48

Phương thức 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
48 chọn tất cả các phần tử có tên lớp được chỉ định và trả về chúng dưới dạng HTMLCollection theo thứ tự chúng xuất hiện trên cây DOM

Bạn có thể truy cập các phần tử riêng lẻ trong HTMLCollection theo số chỉ mục của chúng. Hãy thêm một thuộc tính lớp vào hai phần tử 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
76 đầu tiên trong tài liệu HTML của chúng ta và thay đổi màu văn bản của chúng thành màu đỏ như thế này

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
2
//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
3
Dom khác với html như thế nào?

Phương pháp DOM Document
  • item one
  • item two
  • item three
  • item four
49

Phương thức 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
49 trả về một HTMLCollection gồm tất cả các phần tử có tên thẻ được chỉ định làm đối số của nó, theo thứ tự chúng xuất hiện trên cây DOM

Hãy chọn các phần tử 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
76 bằng phương thức 
//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
94 và thay đổi kiểu phông chữ của chúng thành chữ nghiêng

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
4
Dom khác với html như thế nào?

Phương pháp DOM Document
  • item one
  • item two
  • item three
  • item four
47

Phương thức 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
47 chấp nhận bất kỳ bộ chọn chuỗi CSS nào làm đối số. Sau đó, nó sử dụng bộ chọn đã chỉ định để chọn cái đầu tiên trong tài liệu khớp với bộ chọn đã chỉ định đó

Hãy thay đổi, chọn hai phần tử 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
76 đầu tiên của chúng ta bằng phương pháp 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
47 và thay đổi màu văn bản của chúng thành màu đen

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
5
Dom khác với html như thế nào?

Lưu ý rằng chỉ có mục danh sách đầu tiên được đổi màu thành đen.

Phương pháp DOM Document
  • item one
  • item two
  • item three
  • item four
70

Phương thức 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
70, giống như phương thức 





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
51, chấp nhận bất kỳ bộ chọn chuỗi CSS nào làm đối số của nó. Sau đó, nó sử dụng bộ chọn chuỗi CSS đã chỉ định để chọn tất cả các phần tử khớp với bộ chọn đã chỉ định đó, đặt chúng vào một nodeList và trả về nodeList đó

Bây giờ, hãy sử dụng nó để thay đổi tất cả văn bản trong các mục trong danh sách thành màu xanh lá cây

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
6
Dom khác với html như thế nào?

Phương pháp DOM Document
  • item one
  • item two
  • item three
  • item four
52

Phương thức 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
52 thêm một tên thuộc tính mới vào một phần tử. Nếu một thuộc tính có tên đó đã có trong phần tử, giá trị của nó sẽ thay đổi thành giá trị được đặt trong đối số

Phương thức chấp nhận hai đối số. Đối số đầu tiên là tên của thuộc tính bạn muốn tạo. Đối số thứ hai là giá trị cần đặt trên thuộc tính, luôn là một chuỗi

Hãy sử dụng nó để cung cấp cho mục thứ ba của chúng ta một thuộc tính lớp và thay đổi màu văn bản thành màu đen

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
7
Dom khác với html như thế nào?

Phương pháp DOM Document
  • item one
  • item two
  • item three
  • item four
54

Phương thức 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
54 loại bỏ một thuộc tính được chỉ định. Nó lấy tên của thuộc tính cần xóa làm đối số. Hãy xóa thuộc tính id khỏi phần tử cha 
//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
07 và sử dụng id đã xóa để xóa đường viền màu đỏ của nó

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
8

Bây giờ hãy lưu tệp JavaScript của bạn và tải lại trang web của bạn. Lưu ý rằng các đường viền vẫn còn đó. Nếu bạn kiểm tra bảng điều khiển, bạn sẽ thấy thông báo lỗi cho biết ul không còn được xác định nữa

Phương pháp DOM Document
  • item one
  • item two
  • item three
  • item four
57

Phương thức 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
57 trả về true nếu một nút là con của một nút và trả về false nếu ngược lại

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
9





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
0

Phương pháp DOM Document
  • item one
  • item two
  • item three
  • item four
59

Phương thức 






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
59 trả về mục được chỉ định tại chỉ mục được chỉ định làm đối số của nó khi được sử dụng trên bộ sưu tập






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
1





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
2

Phương pháp DOM //javascript content //select the element node with the DOM method querySelector const body = document.querySelector('body') //select the children nodes with the element node with the DOM property node.childNodes const childrenNodes = body.childNodes //console log the children nodes console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]01

Phương thức 

//javascript content

//select the  element node with the DOM method querySelector
const body = document.querySelector('body') 
//select the children nodes with the  element node with the DOM property node.childNodes
const childrenNodes = body.childNodes
//console log the children nodes
console.log(childrenNodes)//NodeList(5) [text, div, text, a, text]
02 trả về true nếu phần tử mà nó được gọi có các nút con bên trong nó và trả về false nếu không






    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
1





    
    
    
    Document


   
    
    
  • item one
    • 
    
  • item two
    • 
    
  • item three
    • 
    
  • item four
    •
4

Sự kiện DOM là gì?

Để làm cho trang web của chúng tôi tương tác một cách hợp lý bằng cách bắt đầu phản hồi tự động hoặc sự cố trên trang web, chúng tôi cần Sự kiện

Sự kiện DOM là.  

các hành động hoặc sự cố xảy ra trong hệ thống mà bạn đang lập trình, mà hệ thống sẽ cho bạn biết để mã của bạn có thể phản ứng với chúng. (Nguồn. MĐN)

Một ví dụ phổ biến về sự kiện là khi người dùng nhấp vào nút gửi trong một biểu mẫu, sau đó nút này sẽ gửi dữ liệu đầu vào của người dùng dưới dạng phản hồi cho lần nhấp

Một ví dụ khác là khi người dùng nhấp vào biểu tượng menu, sau đó kích hoạt điều hướng thả xuống hoặc tùy chọn

Bạn có thể sử dụng các ngôn ngữ kịch bản chẳng hạn như JavaScript để đăng ký trình xử lý sự kiện hoặc trình nghe trên các phần tử bên trong cây DOM, chạy khi sự kiện được chỉ định kích hoạt

Trình xử lý sự kiện là một.  

khối mã (thường là hàm JavaScript mà bạn với tư cách là lập trình viên tạo) chạy khi sự kiện kích hoạt. Khi một khối mã như vậy được xác định để chạy để phản hồi lại một sự kiện, chúng tôi nói rằng chúng tôi đang đăng ký một trình xử lý sự kiện. (Nguồn. MĐN)

Ví dụ về các sự kiện được sử dụng trên các phần tử trong cây DOM bao gồm

  • nhấp chuột. Sự kiện nhấp chuột là thao tác di chuột xuống hoặc di chuột lên một thành phần trên trang web
  • bấm phím. Sự kiện nhấn phím xảy ra khi các phím trên bàn phím được nhấn
  • Di chuột lên trên. Sự kiện di chuột qua xảy ra khi thiết bị trỏ được di chuyển lên một phần tử
  • dblclick. Dblclick xảy ra khi có sự kiện nhấp đúp vào một thành phần trên trang web
  • Gửi đi. Một sự kiện gửi xảy ra khi một biểu mẫu được gửi

Phần kết luận

DOM là xương sống của tính năng động của web hiện đại. Nó đại diện cho mọi phần của tài liệu web dưới dạng đối tượng và cung cấp cho ngôn ngữ lập trình các phương thức cần thiết để thao tác và sửa đổi từng phần

Nếu bạn thích bài viết này, bạn nên cho tôi một lời cảm ơn

Tài liệu tham khảo và đọc thêm

  1. https. // thống trị. thông số kỹ thuật. cái gì. tổ chức/
  2. https. //www. w3. org/TR/1998/REC-DOM-Level-1-19981001/level-one-core. html
  3. https. //www. w3. org/TR/1998/REC-DOM-Level-1-19981001/level-one-html. html
  4. https. //www. w3. org/TR/DOM-Cấp-2-HTML/
  5. https. //www. w3. org/TR/DOM-Cấp-3-Lõi/lõi. html

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Dom khác với html như thế nào?
Damilola Oladele

Damilola Oladele là một kỹ sư phần mềm năng động. Ông có kiến ​​thức nền tảng về luật và quản lý tài sản. Anh đam mê sử dụng các công nghệ mới để cung cấp các giải pháp dựa trên web

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

HTML và DOM có giống nhau không?

Mô hình đối tượng tài liệu (DOM) là một API lập trình cho các tài liệu HTML và XML . Nó xác định cấu trúc logic của tài liệu và cách tài liệu được truy cập và thao tác.

Sự khác biệt giữa DOM và trang web là gì?

DOM đại diện cho tài liệu dưới dạng các nút và đối tượng; . Trang web là một tài liệu có thể được hiển thị trong cửa sổ trình duyệt hoặc dưới dạng nguồn HTML

Thuộc tính DOM khác với thuộc tính HTML như thế nào?

Thuộc tính. Các thuộc tính được xác định bởi HTML và được sử dụng để tùy chỉnh thẻ. Của cải. Thuộc tính HTML DOM là các giá trị (của Phần tử HTML) mà bạn có thể đặt hoặc thay đổi. Vì vậy, sự khác biệt chính giữa các thuộc tính và thuộc tính là. Các thuộc tính được xác định bởi HTML, nhưng các thuộc tính được xác định bởi DOM .

DOM có phải là một phần của HTML không?

HTML DOM là một Mô hình đối tượng cho HTML . Nó định nghĩa. Các phần tử HTML dưới dạng đối tượng.

programming html

Bài Viết Liên Quan

De thi học kì 1 hóa 9 tphcm năm 2024
De thi học kì 1 hóa 9 tphcm năm 2024

mẹo hay Học Tốt Học
Nhung loai rau cu tot cho gan và tiên hóa năm 2024
Nhung loai rau cu tot cho gan và tiên hóa năm 2024

mẹo hay
Phục hồi nút erase trong cs6 bị lỗi năm 2024
Phục hồi nút erase trong cs6 bị lỗi năm 2024

mẹo hay Photoshop bị đơ Remove Tool Photoshop Photoshop online
Kiến bu quần lót là hiện tượng gì năm 2024
Kiến bu quần lót là hiện tượng gì năm 2024

là ai
Dì ruột bán cháu ở thường xuân thanh hóa năm 2024
Dì ruột bán cháu ở thường xuân thanh hóa năm 2024

mẹo hay
Chương trình giải toán giải toán đại số năm 2024
Chương trình giải toán giải toán đại số năm 2024

mẹo hay Giải toán online Photomath Mathway
Chủng chuẩn e.coli atcc 25922 là gì năm 2024
Chủng chuẩn e.coli atcc 25922 là gì năm 2024

là ai Hỏi Đáp Là gì
Có xét ngành nghề khi nhập khẩu hàng hóa năm 2024
Có xét ngành nghề khi nhập khẩu hàng hóa năm 2024

mẹo hay
Phần mềm khắc phụ lỗi wifi trên an năm 2024
Phần mềm khắc phụ lỗi wifi trên an năm 2024

mẹo hay
Học hỏi những điểm tốt tiếng anh là gì năm 2024
Học hỏi những điểm tốt tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Học Tiếng anh
Bài tập hỗn hợp kim loại tác dụng với hno3 năm 2024
Bài tập hỗn hợp kim loại tác dụng với hno3 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Banner cỡ lớn treo ngoài đường tiếng anh là gì năm 2024
Banner cỡ lớn treo ngoài đường tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh poster banner, standee Billboard là gì Banner treo tường
Phòng khám trung nguyện ở bình đại bến tre năm 2024
Phòng khám trung nguyện ở bình đại bến tre năm 2024

mẹo hay
Cường hóa lên thẳng 15 trong nháy mắt năm 2024
Cường hóa lên thẳng 15 trong nháy mắt năm 2024

mẹo hay
Cải lương chi bảo là gì năm 2024
Cải lương chi bảo là gì năm 2024

là ai Hỏi Đáp Là gì
Top hãng mặt nạ nội địa trung quốc năm 2024
Top hãng mặt nạ nội địa trung quốc năm 2024

mẹo hay Top List Top
Giải hóa 8 bài nồng độ dung dịch năm 2024
Giải hóa 8 bài nồng độ dung dịch năm 2024

mẹo hay
Goh là viết tắt của gì trong tiếng anh năm 2024
Goh là viết tắt của gì trong tiếng anh năm 2024

là ai Học Tốt Tiếng anh GOH container Container lạnh
Bao cáo đầu tư mua đất để làm văn phòng năm 2024
Bao cáo đầu tư mua đất để làm văn phòng năm 2024

mẹo hay
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024

là ai Hỏi Đáp Là gì

Quảng Cáo

Có thể bạn quan tâm

Đánh giá xe mercedes c class năm 2024
2 tháng trước . bởi WhitishRebirth
Mv sơn tùng hãy trao cho anh bao nhiêu tiền năm 2024
2 tháng trước . bởi MatchingBowling
Cách dùng bao cao su như thế nào năm 2024
2 tháng trước . bởi NewDemon
Cách làm bản kiểm điểm lỗi ko làm bài năm 2024
2 tháng trước . bởi All-whiteAnnuity
So sánh omron và dr.cảe năm 2024
2 tháng trước . bởi MacabreBrunch
Diện tích sàn nhà ở tiếng anh là gì năm 2024
2 tháng trước . bởi Decision-makingAnemia
Báo cáo tài chính đã được kiểm toán của vinamilk năm 2024
2 tháng trước . bởi Big-cityAdvertising
Conan tập mới nhất là bao nhiêu năm 2024
2 tháng trước . bởi CurrentRendition
Bài hát mỗi bước ta đi của nhạc sĩ nào năm 2024
2 tháng trước . bởi ErodingAgriculture
Cách fix lỗi minecraft bị crash ưin 7 năm 2024
2 tháng trước . bởi GoodlyMomentum

Toplist được quan tâm

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
6 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
6 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
6 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
6 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
6 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
6 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
6 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
6 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
6 tháng trước

Quảng cáo

Xem Nhiều

Có xét ngành nghề khi nhập khẩu hàng hóa năm 2024
1 tuần trước
Hạt giống nguyên chủng là gì năm 2024
10 giờ trước
De thi học kì 1 hóa 9 tphcm năm 2024
1 ngày trước
Phần mềm khắc phụ lỗi wifi trên an năm 2024
1 tuần trước
Chủng chuẩn e.coli atcc 25922 là gì năm 2024
6 ngày trước
Phục hồi nút erase trong cs6 bị lỗi năm 2024
2 ngày trước
Nhung loai rau cu tot cho gan và tiên hóa năm 2024
1 ngày trước
Chương trình giải toán giải toán đại số năm 2024
6 ngày trước
Học hỏi những điểm tốt tiếng anh là gì năm 2024
1 tuần trước
Dì ruột bán cháu ở thường xuân thanh hóa năm 2024
4 ngày trước

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Học Tốt Inc.