HTML has too quen thuộc với lập trình viên, vậy nó được hiểu như thế nào? . Chúng ta nhìn vào một tệp HTML thì nhìn thấy văn bản, còn trình duyệt nhìn vào sẽ thấy cây DOM

DOM là gì?

Thêm một khái niệm nữa, chúng ta thường nghe đến DOM và làm việc với chúng, vậy chúng được hiểu như thế nào?

Chúng ta có thể thấy tất cả các thẻ HTML sẽ được quản lý trong tài liệu đối tượng [DOM], thẻ cao nhất là thẻ html, tiếp đến là phân nhánh body và head. Bên trong đầu thì có các thẻ như phong cách, tiêu đề,. và bên trong phần nội dung chứa bất kỳ thẻ nào đó là thành phần của HTML. Như vậy ta có thể hiểu Javascript để thao tác với các thẻ HTML ta phải thông qua đối tượng tài liệu [DOM]

Với DOM, JavaScript là tất cả sức mạnh cần thiết để tạo ra HTML động

• JavaScript can change all the HTML section in page
• JavaScript could change all all properties HTML in page
• JavaScript can change all CSS style in page
• JavaScript can't remove the HTML Element Element and Thuộc tính hiện tại
• JavaScript có thể bổ sung các yếu tố HTML mới và các thuộc tính
• JavaScript can’t reconverse with all the HTML event in page
• JavaScript could create the new HTML event in page

Document Object Model - DOM ["Mô hình đối tượng tài liệu"], là một giao diện lập trình ứng dụng [API]. DOM được sử dụng để truy xuất tài liệu ở định dạng HTML và XML, có dạng dữ liệu cấu trúc cây và thông thường mô hình DOM độc lập với hệ điều hành và dựa trên kỹ thuật lập trình hướng đối tượng để mô tả tài liệu

Thời kỳ khai thác các thành phần trong một tài liệu HTML mô tả bằng các phiên bản khác nhau của DOM được hiển thị bởi các chương trình duyệt web thông qua JavaScript do không có một hệ thống chuẩn nhất nào. Điều kiện này buộc World Wide Web Consortium [W3C] phải đưa ra một loạt các mô tả kỹ thuật về tiêu chuẩn cho DOM để hệ thống mô hình này tốt nhất

DOCTYPE html>



Click the button to display the cookies associated with this document.

Try it


function myFunction[] {
    document.getElementById["demo"].innerHTML =
    "Cookies associated with this document: " + document.cookie;
}

kết quả của ví dụ trên như sau

HTML DOM là gì?

HTML DOM là một đối tượng mô hình chuẩn và giao diện lập trình cho HTML. it'sdefault

• Các phần tử HTML giống như các đối tượng
• thuộc tính của tất cả các phần tử HTML
• các phương pháp để truy cập tất cả các phần tử HTML
• sự kiện cho tất cả các phần tử HTML

HTML DOM là một tiêu chuẩn cho phép bạn thực hiện các công việc thao tác với một trang web bất kỳ. nhận, thay đổi, thêm hoặc xóa các thành phần của HTML

Thuộc tính DOM

Attributes property là một khái niệm của DOM trả về một tập hợp các thuộc tính của nút được định nghĩa duy nhất, như một đối tượng NamedNodeMap. Các nút có thể được truy cập bởi các con số chỉ, và chỉ số bắt đầu từ 0. And a number of index is organic for go qua all other members of Attributes. Bạn có thể sử dụng các thuộc tính của đối tượng NamedNodeMap để xác định số lượng các thuộc tính, lặp lại tất cả sau đó bạn có thể tính các nút và trích xuất các thông tin mà bạn muốn

Các ví dụ sau

DOCTYPE html>



Click the button to display the name of the button's second attribute [index 1].

Try it




function myFunction[] {
    var x = document.getElementById["myBtn"].attributes[1].name;
    document.getElementById["demo"].innerHTML = x;
}

Kết quả sẽ như sau

Nói lại bản ghi, attribute là thuộc tính của các phần tử DOM. Thuộc tính cho biết các đặc điểm của phần tử DOM đó

Tài sản

Thuộc tính cung cấp thêm thông tin về các thành phần trong HTML, các phần tử DOM được ánh xạ vào các đối tượng Javascript khi chúng ta sử dụng Javascript để thao tác với DOM

var paragraphs = document.getElementsByTagName['P']; // [1]
var firstParagraph = paragraphs[0]; // [2]

Phần tử

DOCTYPE html>



Click the button to display the name of the button's second attribute [index 1].

Try it




function myFunction[] {
    var x = document.getElementById["myBtn"].attributes[1].name;
    document.getElementById["demo"].innerHTML = x;
}

0 đầu tiên của tài liệu được ánh xạ thành đối tượng Javascript được trỏ bởi biến

DOCTYPE html>



Click the button to display the name of the button's second attribute [index 1].

Try it




function myFunction[] {
    var x = document.getElementById["myBtn"].attributes[1].name;
    document.getElementById["demo"].innerHTML = x;
}

1, [

DOCTYPE html>



Click the button to display the name of the button's second attribute [index 1].

Try it




function myFunction[] {
    var x = document.getElementById["myBtn"].attributes[1].name;
    document.getElementById["demo"].innerHTML = x;
}

2 trả về một cấu trúc dữ liệu tương tự 1 mảng các Node được gọi là NodeList, tức là có thuộc tính độ dài và truy xuất . Phần tử DOM được ánh xạ thành đối tượng có thuộc tính và phương thức trong Javascript. Thuộc tính của đối tượng Javascript, được gọi là thuộc tính. Chung quy lại thì

DOCTYPE html>



Click the button to display the name of the button's second attribute [index 1].

Try it




function myFunction[] {
    var x = document.getElementById["myBtn"].attributes[1].name;
    document.getElementById["demo"].innerHTML = x;
}

3 thuộc tính của các phần tử DOM còn

DOCTYPE html>



Click the button to display the name of the button's second attribute [index 1].

Try it




function myFunction[] {
    var x = document.getElementById["myBtn"].attributes[1].name;
    document.getElementById["demo"].innerHTML = x;
}

4 thuộc tính của đối tượng Javascript

**Một vài chú ý nhỏ

• DOCTYPE html>
  
  
  
  Click the button to display the name of the button's second attribute [index 1].
  
  Try it
  
  
  
  
  function myFunction[] {
      var x = document.getElementById["myBtn"].attributes[1].name;
      document.getElementById["demo"].innerHTML = x;
  }
  
  
  
  
  

  3 của phần tử DOM và

  DOCTYPE html>
  
  
  
  Click the button to display the name of the button's second attribute [index 1].
  
  Try it
  
  
  
  
  function myFunction[] {
      var x = document.getElementById["myBtn"].attributes[1].name;
      document.getElementById["demo"].innerHTML = x;
  }
  
  
  
  
  

  6 của đối tượng Javascript tương ứng thì không có quan hệ 1 - 1. Chẳng hạn như thuộc tính

  DOCTYPE html>
  
  
  
  Click the button to display the name of the button's second attribute [index 1].
  
  Try it
  
  
  
  
  function myFunction[] {
      var x = document.getElementById["myBtn"].attributes[1].name;
      document.getElementById["demo"].innerHTML = x;
  }
  
  
  
  
  

  7 được ánh xạ thành thuộc tính

  DOCTYPE html>
  
  
  
  Click the button to display the name of the button's second attribute [index 1].
  
  Try it
  
  
  
  
  function myFunction[] {
      var x = document.getElementById["myBtn"].attributes[1].name;
      document.getElementById["demo"].innerHTML = x;
  }
  
  
  
  
  

  8 và thuộc tính

  DOCTYPE html>
  
  
  
  Click the button to display the name of the button's second attribute [index 1].
  
  Try it
  
  
  
  
  function myFunction[] {
      var x = document.getElementById["myBtn"].attributes[1].name;
      document.getElementById["demo"].innerHTML = x;
  }
  
  
  
  
  

  9 được ánh xạ thành

  var paragraphs = document.getElementsByTagName['P']; // [1]
  var firstParagraph = paragraphs[0]; // [2]
  

  0
• Sử dụng phương thức

  var paragraphs = document.getElementsByTagName['P']; // [1]
  var firstParagraph = paragraphs[0]; // [2]
  

  1 và

  var paragraphs = document.getElementsByTagName['P']; // [1]
  var firstParagraph = paragraphs[0]; // [2]
  

  2. To thao tác với thuộc tính để tương tác với thuộc tính, sử dụng ký hiệu dấu chấm

  var paragraphs = document.getElementsByTagName['P']; // [1]
  var firstParagraph = paragraphs[0]; // [2]
  

  3
• Thuộc tính

  var paragraphs = document.getElementsByTagName['P']; // [1]
  var firstParagraph = paragraphs[0]; // [2]
  

  4 của phần tử

  var paragraphs = document.getElementsByTagName['P']; // [1]
  var firstParagraph = paragraphs[0]; // [2]
  

  5 vì chính vì vậy thay đổi thuộc tính không chắc chắn làm thay đổi thuộc tính và đảo ngược

Nói một cách khái niệm, nếu giá trị trong đầu vào được định nghĩa là 'nhập để tìm kiếm', thì tương ứng tương ứng cũng như vậy. Sau khi người dùng nhập dữ liệu, 'abc' không có giới hạn, thì thuộc tính sẽ được thiết lập thành 'abc', tuy nhiên, thuộc tính vẫn không thay đổi

console.log[input.getAttribute['value']];
// type to search

console.log[input.value];
// 'abc'

Mặc dù nghĩa dịch sang tiếng việt giống nhau nhưng attribute và

DOCTYPE html>



Click the button to display the name of the button's second attribute [index 1].

Try it




function myFunction[] {
    var x = document.getElementById["myBtn"].attributes[1].name;
    document.getElementById["demo"].innerHTML = x;
}

6 thuộc về 2 thế giới hoàn toàn khác nhau. Cần phải xác định danh tính để tránh các lỗi hiểu lầm không cần thiết

Cây cấu trúc trong DOM

Hạt

Đối với HTML DOM, cấu trúc dạng cây gọi là DOM Tree có nghĩa là mọi thành phần đều được xem là 1 nút [node], được biểu diễn trên 1 cây. Các phần tử khác nhau sẽ được phân loại các nút khác nhau nhưng quan trọng nhất là 3 loại. nút gốc [nút tài liệu], nút phần tử [nút phần tử], nút văn bản [nút văn bản]

• Nút gốc: thường được biểu diễn bởi thẻ là thành phần của HTML.
• Node section. biểu thị cho 1 phần tử HTML
• Nút văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 nút văn bản. Đó có thể là tên trang web trong thẻ , tên đề mục trong thẻ

  , hay một đoạn văn trong thẻ

  Ngoài ra còn có nút thuộc tính [nút thuộc tính] và nút chú thích [nút nhận xét]

Quan hệ giữa các nút

• Nút gốc [tài liệu gốc] luôn luôn là nút đầu tiên
• Tất cả các nút không phải là nút gốc và tất cả chỉ có 1 nút cha [cha]
• Một nút có thể có một hoặc nhiều con, hoặc cũng có thể không có con nào
• Những nút anh em [anh chị em] thì có cùng nút cha
• Trong các nút anh em [anh chị em], nút đầu tiên được gọi là anh cả [firstChild] và nút cuối cùng là em út [lastChild]

Thuộc tính và phương thức thường gặp

Các khái niệm này khá quen thuộc, các bạn có thể tìm trong W3Schools

Truy xuất DOM

Truy xuất gián tiếp

Mỗi nút trên cây DOM đều có 6 thuộc tính quan hệ giúp bạn truy xuất gián tiếp theo vị trí của nút

• Nút. cha mẹNode. tham chiếu đến nút cha của nút hiện tại, và nút cha này là duy nhất cho mỗi nút. Do đó, nếu bạn cần tìm nguồn gốc xa của 1 nút, bạn phải kết nối thuộc tính nhiều lần, ví dụ

  var paragraphs = document.getElementsByTagName['P']; // [1]
  var firstParagraph = paragraphs[0]; // [2]
  

  8
• Nút. nút con. tham chiếu đến các nút con trực tiếp của nút hiện tại, và kết quả là 1 mảng các đối tượng. Lưu ý rằng, các nút con không được phân biệt bởi loại nút, nên kết quả trả về có thể bao gồm nhiều loại nút khác nhau
• Nút. đứa trẻ đầu tiên. tham chiếu đến nút con đầu tiên của nút hiện tại, và tương đương với công việc cuộc gọi

  var paragraphs = document.getElementsByTagName['P']; // [1]
  var firstParagraph = paragraphs[0]; // [2]
  

  9
• Nút. con cuối cùng. tham chiếu đến nút con cuối cùng của nút hiện tại, và tương đương với công việc cuộc gọi

  console.log[input.getAttribute['value']];
  // type to search
  
  console.log[input.value];
  // 'abc'
  

  0
• Nút. tiếp theoAnh chị em. tham chiếu đến nút anh em liền kề sau nút hiện tại
• Nút. trướcAnh chị em. tham chiếu đến nút anh em liền kề liền kề với nút hiện tại

Truy xuất trực tiếp

Truy xuất trực tiếp sẽ nhanh hơn và đơn giản hơn khi bạn không cần phải biết nhiều về quan hệ và vị trí của nút. Có 3 phương thức để bạn truy xuất trực tiếp được hỗ trợ ở mọi trình duyệt

• console.log[input.getAttribute['value']];
  // type to search
  
  console.log[input.value];
  // 'abc'
  

  1

• console.log[input.getAttribute['value']];
  // type to search
  
  console.log[input.value];
  // 'abc'
  

  2

• console.log[input.getAttribute['value']];
  // type to search
  
  console.log[input.value];
  // 'abc'
  

  3

Trình duyệt hiện đại sau này [Chrome] có hỗ trợ thêm các phương thức truy xuất mạnh mẽ và linh hoạt hơn nhiều, thậm chí còn hỗ trợ truy xuất theo vùng chọn CSS phức tạp như vùng chọn jQuery [một thư viện Javascript mạnh và

• console.log[input.getAttribute['value']];
  // type to search
  
  console.log[input.value];
  // 'abc'
  

  4. truy xuất đến vùng lựa chọn và trả về kết quả tham chiếu đầu tiên

• console.log[input.getAttribute['value']];
  // type to search
  
  console.log[input.value];
  // 'abc'
  

  5. analog

  console.log[input.getAttribute['value']];
  // type to search
  
  console.log[input.value];
  // 'abc'
  

  6 but return a arrays tham chiếu

• console.log[input.getAttribute['value']];
  // type to search
  
  console.log[input.value];
  // 'abc'
  

  7. tham chiếu đến tất cả các nút có thuộc tính

  DOCTYPE html>
  
  
  
  Click the button to display the name of the button's second attribute [index 1].
  
  Try it
  
  
  
  
  function myFunction[] {
      var x = document.getElementById["myBtn"].attributes[1].name;
      document.getElementById["demo"].innerHTML = x;
  }
  
  
  
  
  

  8 chứa tất cả các tên lớp cần tìm

Kết luận

Chung quy lại chúng ta đã cùng nhau tìm hiểu các khái niệm cơ bản về DOM và cách thao tác với nó. Đó chỉ là những kiến ​​thức hết sức cơ bản, tuy nhiên bạn cũng có thể thấy DOM quan trọng như thế nào

Làm cách nào để nhận giá trị bằng cách sử dụng getElementsByName trong JavaScript?

getElementsByName trong JavaScript là gì?

Làm cách nào để lấy giá trị của phần tử theo tên trong JavaScript?