Cách truy cập đối tượng mô hình trong javascript

Mô hình Đối tượng Tài liệu [DOM] là một giao diện không phụ thuộc vào ngôn ngữ cung cấp quyền truy cập vào cấu trúc và nội dung của tài liệu HTML. JavaScript thường là ngôn ngữ được sử dụng để truy cập DOM để tạo các trang web động và tương tác

Hướng dẫn này cung cấp tổng quan về Mô hình đối tượng tài liệu và chỉ cho bạn cách tương tác với nó bằng một loạt ví dụ về JavaScript

Trước khi bắt đầu

Các ví dụ trong hướng dẫn này sử dụng các công cụ dành cho nhà phát triển của trình duyệt web để xem DOM và tương tác với bảng điều khiển JavaScript. Để tận dụng tối đa thông tin trong hướng dẫn này, hãy làm theo trên trình duyệt Chrome hoặc Firefox của riêng bạn

• Trên Chrome, hãy tham khảo tài liệu Open Chrome DevTools của Google để tìm hiểu cách truy cập các công cụ dành cho nhà phát triển của họ

• Trên Firefox, hãy tham khảo tài liệu Open the Inspector của Mozilla để tìm hiểu cách truy cập các công cụ dành cho nhà phát triển của họ

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

Mô hình đối tượng tài liệu [DOM] là một giao diện cung cấp quyền truy cập vào cấu trúc và nội dung của tài liệu HTML. DOM đại diện cho các phần tử và nội dung của tài liệu HTML dưới dạng các nút và đối tượng. Biểu diễn DOM sau đó có thể được truy cập và sửa đổi bằng JavaScript và các ngôn ngữ kịch bản khác

Về cơ bản, DOM là thứ cho phép các trang web trở nên động. Các ngôn ngữ như JavaScript hoạt động với các nút tạo nên DOM để thay đổi cách trình bày của trang web một cách linh hoạt và tương tác

Có nhiều cách hiển thị DOM. Một trong những cách được sử dụng rộng rãi nhất là định dạng HTML. Khi bạn mở bảng điều khiển Kiểm tra của trình duyệt, bạn có thể xem biểu diễn HTML của một trang web. Ví dụ dưới đây hiển thị đánh dấu HTML cho một trang web đơn giản

  
    Example Page
  
  
    
Example page content.
  

DOM khác với mã nguồn HTML như thế nào

Bản thân DOM không tương đương với mã nguồn HTML của trang web. Thay vào đó, DOM là đại diện cho cách một trang web được hiển thị tại thời điểm nó được truy cập

Để minh họa cách mã nguồn DOM và HTML có thể khác nhau như thế nào, ví dụ bên dưới hiển thị tệp nguồn HTML. Tệp HTML bao gồm một hàm JavaScript bổ sung thêm các phần tử HTML vào trang sau khi tải trang

Tập tin. trang ví dụ. html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

  
    Example Page
    
  
  
    
Example page content.
  

Sau khi trang HTML được tải và JavaScript chạy, biểu diễn DOM của nguồn HTML ở trên giống với mã được hiển thị bên dưới. JavaScript đã bị loại bỏ để làm cho HTML kết quả dễ đọc hơn. HTML bây giờ bao gồm một danh sách không có thứ tự [

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

0

] với hai mục danh sách [

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1].

    
        Example Page
        
    
    
        
Example page content.
        

            
First item
            
Second item
        
    

Do DOM liên quan đến việc hiển thị trạng thái hiện tại của trang HTML nên giờ đây nó hiển thị các phần tử HTML mới đã được thêm vào trang bởi JavaScript. DOM luôn phản ánh mọi phép cộng, phép trừ hoặc các sửa đổi khác xảy ra với một trang web. Đặc tính này cho phép DOM làm cho các trang web trở nên động

Mô hình đối tượng tài liệu và JavaScript

Thông thường, JavaScript là cách các nhà phát triển web tương tác với DOM. JavaScript có thể truy cập DOM bằng đối tượng

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2 và các nút được lồng bên dưới nó

Các phần tiếp theo giải thích đối tượng

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2 là gì và các bộ phận cấu thành nó

Để làm việc với DOM, JavaScript phía máy khách cung cấp đối tượng

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2. Đối tượng này bao gồm các thuộc tính và phương thức để truy cập và sửa đổi DOM

Phần trước bao gồm một số ví dụ về đối tượng

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2 đang hoạt động. Dưới đây là hai lệnh bổ sung hiển thị thêm các tính năng của đối tượng

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2

1. Các thuộc tính của đối tượng

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   

   2 cung cấp thông tin về tài liệu HTML hoặc quyền truy cập vào các nút lồng nhau của nó. Chúng cũng cho phép bạn sửa đổi các đặc điểm của DOM như trong ví dụ bên dưới

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   

   2

   Ví dụ JavaScript truy cập thuộc tính

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   

   9 của đối tượng

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   

   2 và đặt giá trị của nó thành

   
   
     
       Example Page
       
     
     
       
   Example page content.
   
     
   
   
     
   

   0. Trang web nó sửa đổi bây giờ sẽ có nền màu xanh lam. Biểu diễn DOM của thay đổi trông như sau

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   

   6

   Màu xanh lam được gán cho phần tử bằng thuộc tính

   
   
     
       Example Page
       
     
     
       
   Example page content.
     
   

   1

2. Đối tượng

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   

   2 có một số phương thức thực hiện mọi thứ từ cung cấp quyền truy cập vào các nút cụ thể để thêm các nút mới vào DOM. Trong ví dụ bên dưới, phương thức

   
   
     
       Example Page
       
     
     
       
   Example page content.
     
   

   3 lấy mọi phần tử HTML có tên thẻ,

3. JavaScript lặp qua các phần tử đó, sau đó xuất từng thuộc tính

   
   
     
       Example Page
       
     
     
       
   Example page content.
     
   

   4 của phần tử.

   
   
     
       Example Page
       
     
     
       
   Example page content.
     
   

   1

   Sử dụng vòng lặp

   
   
     
       Example Page
       
     
     
       
   Example page content.
     
   

   5 ở trên, bảng điều khiển JavaScript sẽ hiển thị đầu ra sau

   
   
     
       Example Page
       
     
     
       
   Example page content.
     
   

   3

Nút và phần tử

Đối tượng

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2 chứa nhiều đối tượng khác tạo nên DOM. Các đối tượng này được gọi là các nút. Các nút bao gồm mọi thứ từ các phần tử HTML, đến các thuộc tính, đến văn bản

Bạn có khả năng làm việc thường xuyên nhất với các nút phần tử. Các nút phần tử DOM tương ứng với các phần tử HTML của trang web. Chúng cho phép bạn truy cập và thao tác với các khối xây dựng của một trang web

Tập lệnh được sử dụng trong phần DOM khác với nguồn HTML như thế nào đã thêm một

yếu tố và
• các yếu tố cho trang. Điều này đã thêm hai loại nút sau vào trang
  • Các nút phần tử, được tạo bằng phương thức

    
    
      
        Example Page
        
      
      
        
    Example page content.
      
    

    7
  • Các nút văn bản, được tạo bằng phương pháp

    
    
      
        Example Page
        
      
      
        
    Example page content.
      
    

    8

  Mỗi phần của đối tượng

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  

  2 thực sự là một nút thuộc loại này hay loại khác. Ngoài ra, mỗi nút kế thừa các thuộc tính chung, như phương thức

  
  
      
          Example Page
          
      
      
          
  Example page content.
          
  
              
  First item
              
  Second item
          
      
  
  

  0, cho phép các phần tử thêm các nút văn bản

  Đối tượng

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  

  2 không chỉ cho phép bạn mở rộng DOM. Chẳng hạn, bạn cũng có thể sử dụng nó để điều hướng DOM và thực hiện các sửa đổi chính xác cho nó. Tập lệnh bên dưới trình bày cách thực hiện những sửa đổi này đối với DOM. Truy cập trang ví dụ. trang html trong trình duyệt của bạn. Sau đó, mở bảng điều khiển JavaScript của trình duyệt của bạn và nhập mã JavaScript sau

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  

  0

  Kết quả là DOM được cập nhật và văn bản,

  
  
      
          Example Page
          
      
      
          
  Example page content.
          
  
              
  First item
              
  Second item
          
      
  
  

  2, chứa trong

• thẻ được cập nhật thành

  
  
      
          Example Page
          
      
      
          
  Example page content.
          
  
              
  First item
              
  Second item
          
      
  
  

  3.

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  

  3

  Xem hướng dẫn của chúng tôi Duyệt qua Mô hình đối tượng tài liệu bằng JavaScript để tìm hiểu về các phương thức đối tượng tài liệu tích hợp khác

  Phần kết luận

  DOM cung cấp giao diện cho trang web HTML. Điều này cho phép bạn thao tác cấu trúc và nội dung của trang web bằng ngôn ngữ kịch bản, như JavaScript. Hướng dẫn này đã giới thiệu cho bạn về DOM và trình bày cách JavaScript được sử dụng để thêm, sửa đổi và xóa các thành phần HTML khỏi trang web

  Thêm thông tin

  Bạn có thể muốn tham khảo các tài nguyên sau để biết thêm thông tin về chủ đề này. Mặc dù chúng được cung cấp với hy vọng rằng chúng sẽ hữu ích, xin lưu ý rằng chúng tôi không thể đảm bảo tính chính xác hoặc kịp thời của các tài liệu được lưu trữ bên ngoài

  Làm cách nào để truy cập thuộc tính mô hình trong JavaScript?

  Vì vậy, để hoàn thành mục tiêu này, bạn phải thực hiện một số chuyển đổi. Tôi nghĩ bạn có hai lựa chọn. Chuyển đổi đối tượng ResponseDTO thành chuỗi JSON và chuyển nó tới jsp và bạn có thể nhận trực tiếp đối tượng javascript. Truyền đối tượng ResponseDTO cho JSP và điền vào đối tượng javascript như những gì bạn đang thử.

  Làm cách nào để truy cập khóa đối tượng trong JavaScript?

  Đầu tiên lấy Đối tượng JavaScript trong một biến. Sử dụng đối tượng. keys[objectName] method để có quyền truy cập vào tất cả các khóa của đối tượng.

  Làm cách nào để đọc dữ liệu mô hình trong JavaScript?

  Cách truy cập dữ liệu Mô hình trong khối mã Javascript/Jquery trong. .

  Gán thuộc tính - Các kiểu dữ liệu cơ bản như int , string , DateTime [ví dụ:. Kiểu mẫu. Tên ]

  Gán đối tượng - Các lớp tùy chỉnh hoặc sẵn có [ví dụ:. người mẫu , người mẫu. UserSettingsObj ]

  Làm cách nào để truy cập mảng đối tượng trong JavaScript?

  Cấu trúc dữ liệu lồng nhau là một mảng hoặc đối tượng tham chiếu đến các mảng hoặc đối tượng khác, i. e. giá trị của nó là mảng hoặc đối tượng. Có thể truy cập các cấu trúc như vậy bằng cách áp dụng liên tiếp ký hiệu dấu chấm hoặc dấu ngoặc vuông . Đây là một ví dụ. dữ liệu const = { mã. 42, mặt hàng. [{ Tôi. 1, tên. 'foo' }, { id. 2, tên. 'thanh' }] };