Phương thức DOM HTML

querySelector ()

Phương thức Document querySelector()trả về firstphần tử trong tài liệu khớp với bộ chọn hoặc nhóm bộ chọn được chỉ định. Nếu không tìm thấy kết quả phù hợp nào, trả về null.

Nội dung HTML:

 element-example 

Nội dung JavaScript:

document.querySelector("#id-example"); // Returns the element with id "id-example" document.querySelector(".class-example"); // Returns the element with class "class-example" document.querySelector("a"); // Returns the "a" element 

Lưu ý querySelector()trả về phần tử so khớp đầu tiên, để trả về tất cả các kết quả phù hợp, hãy sử dụng phương thức querySelectorAll () để thay thế.

 First Second 
document.querySelector("#example"); // Returns only the element containing 'First'

bên trongHTML

Phần mềm innerHTMLhỗ trợ trả về nội dung HTML bên trong một phần tử đã chọn và cũng cho phép bạn xác định nội dung HTML mới.

Nhận nội dung phần tử

Demo

var element = document.getElementById("demo"); console.log(element.innerHTML) //logs 

Demo

Đặt nội dung phần tử

var element = document.getElementById("demo"); element.innerHTML = " Demo ";

HTML bây giờ sẽ giống như

 Demo 

Cân nhắc về Bảo mật

Giá trị được đặt thành innerHTMLphải đến từ các nguồn đáng tin cậy, vì Javascript sẽ đặt bất kỳ thứ gì bên trong phần tử đó và nó sẽ được chạy dưới dạng HTML thuần túy.

Thí dụ:

Đặt alert();giá trị ”” sẽ khiến hàm “alert ()” trong Javascript được kích hoạt:

var element = document.getElementById("demo"); element.innerHTML = "alert();";

Kiểu tấn công này được gọi là Cross Site Scripting, viết tắt là XSS.

Đây là một trong những cách phổ biến nhất để thực hiện một cuộc tấn công XSS. Nếu bạn muốn tìm hiểu thêm một chút và học cách phòng thủ trước nó, hãy xem tài nguyên này.

getElementById ()

Các getElementById()phương thức trả về các phần tử có thuộc tính id với giá trị quy định. Nó nhận một đối số, là một chuỗi phân biệt chữ hoa chữ thường của id cho phần tử bạn muốn.

Phương pháp này là một trong những phương thức phổ biến nhất trong HTML DOM và được sử dụng hầu như bất cứ khi nào bạn muốn thao tác hoặc lấy thông tin từ một phần tử trong tài liệu của mình. Đây là một ví dụ đơn giản về cú pháp:

Nội dung HTML:

Nội dung JavaScript:

document.getElementById("demo"); // Returns the element with id "demo"

Nếu bạn có nhiều hơn một phần tử có cùng giá trị id(thực hành không tốt!), getElementByIdSẽ trả về phần tử đầu tiên được tìm thấy:

 First Second 
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'

Thêm thông tin:

document.getElementById ()

Các giải pháp thay thế:

Một giải pháp thay thế thường được sử dụng document.getElementByIdlà sử dụng bộ chọn jQuery mà bạn đọc thêm tại đây.

Thông tin thêm về HTML DOM

Với HTML DOM, JavaScript có thể truy cập và thay đổi tất cả các phần tử của tài liệu HTML.

Khi một trang web được tải, trình duyệt sẽ tạo một đối tượng D ocument O M odel của trang đó.

Mô hình HTML DOM được xây dựng như một cây đối tượng:

Mỗi phần tử trong DOM cũng được gọi là một nút.

   My title    My Link 

My header

DOM cho HTML ở trên như sau:

Cây DOM

Với mô hình đối tượng, JavaScript có tất cả sức mạnh cần thiết để tạo HTML động:

  • JavaScript có thể thay đổi tất cả các phần tử HTML trong trang
  • JavaScript có thể thay đổi tất cả các thuộc tính HTML trong trang
  • JavaScript có thể thay đổi tất cả các kiểu CSS trong trang
  • JavaScript có thể xóa các phần tử và thuộc tính HTML hiện có
  • JavaScript có thể thêm các phần tử và thuộc tính HTML mới
  • JavaScript có thể phản ứng với tất cả các sự kiện HTML hiện có trong trang
  • JavaScript có thể tạo các sự kiện HTML mới trong trang