Bản đánh máy htmlcollection

Khi bạn mở một trang web trong trình duyệt, nội dung HTML của trang được tải xuống và được xây dựng [vẽ] trực quan trên màn hình. Để làm việc đó, trình duyệt tạo ra một đối tượng có tên là Document Object Model gọi tắt là

var arr =  document.getElementsByClassName["demo"];

//truy cập phần tử thứ 2 tìm được
arr[1].innerHTML = "Hi";

7, các đối tượng này là mô hình logic biểu diễn cấu trúc của trang HTML.

var arr =  document.getElementsByClassName["demo"];

//truy cập phần tử thứ 2 tìm được
arr[1].innerHTML = "Hi";

7 của văn bản HTML biểu thị bởi cây là tập hợp các hộp phần tử lồng nhau

DOM object image image

JavaScript có thể sử dụng các đối tượng DOM để tương tác với cấu trúc trang với các hành động như thêm, xóa, chỉnh sửa các phần tử của trang

Cây đối tượng DOM

Như hình ảnh trên,

var arr =  document.getElementsByClassName["demo"];

//truy cập phần tử thứ 2 tìm được
arr[1].innerHTML = "Hi";

7 biểu diễn ở dạng cây. Phần tử HTML trở thành các nut trong cây. Như cấu trúc dữ liệu dạng cây, các nút có chứa các nút con. Có một số nút cùng cấp trong cây

Xem lại hình trên thì

• has 2 node con is and
• có 1 phần tử con là

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  0 tìm tất cả các phần tử có tên thẻ trong hàm tham số. Nó trả về một tập hợp HTMLCollection trong đó chứa các phần tử HTMLElement được tìm thấy. Bạn có thể sử dụng thuộc tính

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  1 để biết số lượng phần tử được trả về, từ đó có thể duyệt qua tập tin này một cách dễ dàng

  Ví dụ tìm tất cả các phần tử đoạn văn [the

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  2]. Sau đó chuyển đổi toàn bộ nội dung các đoạn văn thành

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  3

      
          DEMO JAVASCRIPT
      
      
      
          
  hi
          
  hello
          
  hi
  
          
           
      
      
  

  Code code on change content of the p to thẻ. Chào thế giới

  getElementsByClassName

  Phương thức

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  0 tìm tất cả các phần tử có thuộc tính lớp [lớp] được đưa ra. Nó cũng trả về HTMLCollection

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  Phần tử trong DOM - HTMLElement

  Mỗi một phần tử trong

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  7 đều có các thuộc tính và phương thức cung cấp thông tin về phần tử đó trong

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  7

  Các thuộc tính của phần tử trong

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  7

  • var arr =  document.getElementsByClassName["demo"];
    
    //truy cập phần tử thứ 2 tìm được
    arr[1].innerHTML = "Hi";
    

    4. Trả về mảng các phần tử con của nó

  • var arr =  document.getElementsByClassName["demo"];
    
    //truy cập phần tử thứ 2 tìm được
    arr[1].innerHTML = "Hi";
    

    5. first element con

  • var arr =  document.getElementsByClassName["demo"];
    
    //truy cập phần tử thứ 2 tìm được
    arr[1].innerHTML = "Hi";
    

    6. con end end section

  • var arr =  document.getElementsByClassName["demo"];
    
    //truy cập phần tử thứ 2 tìm được
    arr[1].innerHTML = "Hi";
    

    7. Return to

    var arr =  document.getElementsByClassName["demo"];
    
    //truy cập phần tử thứ 2 tìm được
    arr[1].innerHTML = "Hi";
    

    8 if has an element con, return to

    var arr =  document.getElementsByClassName["demo"];
    
    //truy cập phần tử thứ 2 tìm được
    arr[1].innerHTML = "Hi";
    

    9

  •   
        
    
          
    some text
          
    some other text
        
    
    
        
    
      
    

    0. the end of the end of the leveling

  •   
        
    
          
    some text
          
    some other text
        
    
    
        
    
      
    

    1. before the death section

  •   
        
    
          
    some text
          
    some other text
    
      
    
    
        
    
    
        
    
      
    

    2. return node cha

  Đầy đủ các thuộc tính của phần tử HTML xem tại HTML ELEMENT

  Xem ví dụ

    
      
  
        
  some text
        
  some other text
      
  
  
      
  
    
  

  Tổng kết

  Toàn bộ cấu trúc HTML của trang được mô tả trong

  var arr =  document.getElementsByClassName["demo"];
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  7, Javascript truy cập tới DOM thông qua các đối tượng xây dựng sẵn có là

    
      
  
        
  some text
        
  some other text
      
  
  
      
  
    
  

  4

  Tìm một phần tử trong DOM bằng cách sử dụng các phương thức.

    
      
  
        
  some text
  
    
  
  
        
  some other text
      
  
  
      
  
    
  

  5,

    
      
  
        
  some text
        
  some other text
      
  
  
      
  
    
  

  6,

    
      
  
        
  some text
        
  some other text
      
  
  
      
  
    
  

  7

  Mỗi phần tử DOM lại có các thuộc tính, phương thức nên có thể tương tác với HTML một cách dễ dàng. Các phần sau chúng ta sẽ tìm cách tương tác với các phần tử DOM