Hướng dẫn dùng docuemt JavaScript



Đối tượng document trong JavaScript đại diện cho toàn bộ tài liệu HTML.

Khi tài liệu html được tải trong trình duyệt, nó sẽ trở thành một đối tượng document. Nó là phần tử gốc đại diện cho tài liệu html. Nó có các thuộc tính và phương thức. Nhờ sự giúp đỡ của đối tượng document, chúng tôi có thể thêm nội dung động vào trang web.

Đối tượng document là thuộc tính của đối tượng window, vì vậy nó có thể được truy cập bằng cách:

Hoặc:

Theo W3C - "Document Object Model (DOM) - Mô hình đối tượng document (DOM) là giao diện nền tảng và trung lập ngôn ngữ cho phép các chương trình và tập lệnh tự động truy cập và cập nhật nội dung, cấu trúc và css của tài liệu".


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

Hình dưới đây thể hiện các thuộc tính của đối tượng docment.

Hướng dẫn dùng docuemt JavaScript



Các phương thức của đối tượng document

Chúng ta có thể truy cập và thay đổi nội dung của trang web bằng các phương thức của đối tượng document.

Các phương thức quan trọng của đối tượng document như sau:

Phương thứcMô tả
write("string") viết chuỗi đã cho trên doucment.
writeln("string") viết chuỗi đã cho trên doucment với ký tự newline ở cuối.
getElementById() trả về phần tử có giá trị id đã cho.
getElementsByName() trả về tất cả các phần tử có giá trị name đã cho.
getElementsByTagName() trả về tất cả các phần tử có tên thẻ đã cho.
getElementsByClassName() trả về tất cả các phần tử có class đã cho.

Truy cập giá trị trường bằng đối tượng document

Trong ví dụ này, chúng ta sẽ nhận được giá trị của văn bản đầu vào từ người dùng. Ở đây, chúng ta đang sử dụng document.form1.name.value để lấy giá trị của trường name:

document: là phần tử gốc đại diện cho tài liệu html.

form1 : là tên của biểu mẫu.

name : là tên thuộc tính của văn bản đầu vào.

value : là thuộc tính, trả về giá trị của văn bản đầu vào.

Dưới đây là ví dụ sử dụng đối tượng document:




Vi du doi tuong document trong JavaScript



    
Enter Name:

Kết quả:



- Để sử dụng JavaScript trong trang web, chúng ta có hai cách cơ bản như sau:

Nội dung chính

  • 1) Viết mã lệnh trực tiếp vào trang web
  • 2) Viết mã lệnh vào tập tin JavaScript
  • 2.1) Cách tạo tập tin JavaScript
  • 2.2) Cách viết mã lệnh trong tập tin JavaScript
  • 2.3) Cách nhúng tập tin JavaScript vào trang web
  • 3) Kết luận

  • Cách 1: Viết mã lệnh JavaScript trực tiếp vào trang web.
  • Cách 2: Viết mã lệnh JavaScript vào tập tin JavaScript (tập tin có phần đuôi là .js)

1) Viết mã lệnh trực tiếp vào trang web

- Mã lệnh JavaScript có thể được viết trực tiếp vào trang web thông qua cặp thẻ .

Trang web dưới đây sử dụng một đoạn

Xem ví dụ

- Các đoạn

Xem ví dụ

- Bên trong đoạn .

- Ví dụ, cách viết mã lệnh trong tập tin myscript.js dưới đây là ĐÚNG.

document.getElementById("demo1").innerHTML = "Tài liệu học CSS";
document.getElementById("demo2").innerHTML = "Tài liệu học MySQL";
document.getElementById("demo3").innerHTML = "Tài liệu học PHP";

- Ví dụ, cách viết mã lệnh trong tập tin myscript.js dưới đây là SAI.

2.3) Cách nhúng tập tin JavaScript vào trang web

- Để nhúng tập tin JavaScript vào trang web thì ta chỉ cần thêm vào trang web cặp thẻ

- Lưu ý: Đường dẫn đến tập tin JavaScript có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối





    Lập Trình Web


    

Tài liệu học HTML

Tài liệu học JavaScript

Xem ví dụ

- Ta có thể nhúng tập tin JavaScript ở bất kỳ nơi nào trong trang web. Tuy nhiên nên đặt chúng ở vị trí cuối cùng trong phần tử giống ví dụ phía trên. Điều đó giúp cải thiện tốc độ tải giao diện của trang web và tránh một số trường hợp xảy ra lỗi thực thi ngoài mong đợi.

- Bạn sẽ được tìm hiểu kỹ về vấn đề này ở bài Nguyên lý thực thi mã lệnh trong JavaScript.

- Trong một trang web có thể nhúng nhiều tập tin JavaScript.





    Lập Trình Web


    

Tài liệu học HTML

Tài liệu học JavaScript

Xem ví dụ

3) Kết luận

- Giữa việc viết mã lệnh trong tập tin JavaScript và viết trực tiếp vào trang web thì chúng ta nên dùng cách viết mã lệnh trong tập tin JavaScript. Bởi vì đối với những chương trình lớn khoảng vài trăm hoặc vài nghìn dòng, việc viết vào tập tin JavaScript sẽ giúp ta dễ quan sát, quản lý cũng như cập nhật nâng cấp mã nguồn hơn.

- Tuy nhiên, những ví dụ trong loạt bài hướng dẫn học JavaScript này đa số khoảng từ 20 dòng lệnh đổ lại nên chúng tôi sử dụng cách viết mã lệnh JavaScript trực tiếp vào trang web để bạn dễ quan sát tổng thể hơn.