Đối tượng DOM trong JavaScript (Phần 1)
I.DOM là cái gì ?
+ DOM : Document Object Model
+ DOM là tập hợp các đối tượng HTML chuẩn được dùng để truy xuất và thay đổi các thành phần HTML trong trang web
+ Một số đối tượng của DOM : window , document ,history , link , frame.
=> Tại sao lại cần DOM : Khi chúng ta viết 1 trang web thì chúng ta muốn tương tác với các thẻ trong trang web đó thì chúng ta sẽ làm như thế nào (tương tác ở đây có thể hiểu như chúng ta thay đổi màu , thuộc tính , giá trị ...) muốn tương tác được như vậy thì cần JavaScript để tương tác và chúng ta sử dụng DOM để tương tác.
II.Tập hợp các đối tượng trong DOM
+ Document là chứa tất các các thẻ.
+ Thẻ HTML cha toàn bộ nội dung trang web
=> Nếu bạn muốn truy xuất đến thẻ HTML thì bạn phải lấy đối tượng Document.
+ Thẻ html chia ra làm 2 phần head và body
+ Phần head có thẻ title
+ Phần body có rất nhiều loại thẻ trong sơ đồ này chỉ nêu ra 2 loại thẻ là h1 và a
+ Trong thẻ a lại có các thuộc tính như href và text
Chúng ta truy xuất các đối tượng theo mô hình này
Document.get.... để lấy các đối tượng.
Đối tượng window DOM :
+ Là thể hiện của đối tượng cửa sổ trình duyệt là đối tượng đại diện cho cả cái trình duyệt
+ Tồn tại khi mở một tài liệu HTML
+ Đối tượng này được sử dụng nhằm truy xuất các thông tin của cửa sổ trình duyệt như tên trình duyệt , thanh tiêu đề , phiên bản trình duyệt.
=> Khi lấy được các thông tin này qua đối tượng window sẽ rất thuận tiện để lập trình website
Đối tượng Window này bao gồm thuộc tính và các phương thức
- Một số thuộc tính :
history : Lịch sử truy cập trình duyệt
event : Các sự kiện trên trình duyệt.
location : địa chỉ web mà ta đang truy cập
- Một số các phương thức (hành động )
Alert , close , blur
=> Muốn truy suất đến các thuộc tính về trình duyệt (địa chỉ , kích thước ) thì ta cần gọi Window hay nếu muốn tạo ra các phương thức như open close thì ta cần sử dụng window.
=> Phân biệt thuộc tính Document của window và đối tượng document.
Đối tượng Document : đại diện cho nội dung trang HTML đang hiển thị trên trình duyệt.
=> Chúng ta sử dụng đến document khi muốn can thiệp các thẻ chứa nội dung trang web.
+ Dùng để lấy thông tin về các tài liệu và các thành phần HTML khi xử lý sự kiện.
=> Tổng kết lại : nếu chúng ta muốn truy xuất đến các thẻ thuộc về nội dung của trang web như p , a , link , img thì cần gọi đối tượng Document.
III. Làm sao để truy suất đến thẻ một cách chính xác nhất ?
VD : Tạo trang web click và nut button hiện ra dòng text
2.DocumentgetElementsByTagName()
=> Lấy tất cả các thẻ có cùng tên lưu trữ nó dưới dạng mảng.
=> Nếu muốn truy xuất đến 1 thẻ nhất định trong mảng thì cần phải có chỉ số
VD :
III. Cách gọi hàm trong java scrpit
Ví dụ :
-> Khi thực hiện đoạn code trên tại sao chỉ có hàm display được gọi ...mặc dù khi click vào button chúng ta vẫn gọi được hàm LayGiaTriTheP?
=> - JavaScrpit đọc code từ trên xuống dưới , từ trái qua phải
- Không có sự ưu tiên khi đọc code html hay code javascript
do đó Khi ta gọi hàm LayGiaTriTheP() chưa có thẻ P nào được tạo nên hàm này không thực hiện được.
=> Để sửa thì ta sẽ cho đoạn script ở cuối sau khi đã khai báo các thẻ p
+ DOM : Document Object Model
+ DOM là tập hợp các đối tượng HTML chuẩn được dùng để truy xuất và thay đổi các thành phần HTML trong trang web
+ Một số đối tượng của DOM : window , document ,history , link , frame.
=> Tại sao lại cần DOM : Khi chúng ta viết 1 trang web thì chúng ta muốn tương tác với các thẻ trong trang web đó thì chúng ta sẽ làm như thế nào (tương tác ở đây có thể hiểu như chúng ta thay đổi màu , thuộc tính , giá trị ...) muốn tương tác được như vậy thì cần JavaScript để tương tác và chúng ta sử dụng DOM để tương tác.
II.Tập hợp các đối tượng trong DOM
+ Document là chứa tất các các thẻ.
+ Thẻ HTML cha toàn bộ nội dung trang web
=> Nếu bạn muốn truy xuất đến thẻ HTML thì bạn phải lấy đối tượng Document.
+ Thẻ html chia ra làm 2 phần head và body
+ Phần head có thẻ title
+ Phần body có rất nhiều loại thẻ trong sơ đồ này chỉ nêu ra 2 loại thẻ là h1 và a
+ Trong thẻ a lại có các thuộc tính như href và text
Chúng ta truy xuất các đối tượng theo mô hình này
Document.get.... để lấy các đối tượng.
Đối tượng window DOM :
+ Là thể hiện của đối tượng cửa sổ trình duyệt là đối tượng đại diện cho cả cái trình duyệt
+ Tồn tại khi mở một tài liệu HTML
+ Đối tượng này được sử dụng nhằm truy xuất các thông tin của cửa sổ trình duyệt như tên trình duyệt , thanh tiêu đề , phiên bản trình duyệt.
=> Khi lấy được các thông tin này qua đối tượng window sẽ rất thuận tiện để lập trình website
Đối tượng Window này bao gồm thuộc tính và các phương thức
- Một số thuộc tính :
history : Lịch sử truy cập trình duyệt
event : Các sự kiện trên trình duyệt.
location : địa chỉ web mà ta đang truy cập
- Một số các phương thức (hành động )
Alert , close , blur
=> Muốn truy suất đến các thuộc tính về trình duyệt (địa chỉ , kích thước ) thì ta cần gọi Window hay nếu muốn tạo ra các phương thức như open close thì ta cần sử dụng window.
=> Phân biệt thuộc tính Document của window và đối tượng document.
Đối tượng Document : đại diện cho nội dung trang HTML đang hiển thị trên trình duyệt.
=> Chúng ta sử dụng đến document khi muốn can thiệp các thẻ chứa nội dung trang web.
+ Dùng để lấy thông tin về các tài liệu và các thành phần HTML khi xử lý sự kiện.
=> Tổng kết lại : nếu chúng ta muốn truy xuất đến các thẻ thuộc về nội dung của trang web như p , a , link , img thì cần gọi đối tượng Document.
III. Làm sao để truy suất đến thẻ một cách chính xác nhất ?
VD : Tạo trang web click và nut button hiện ra dòng text
2.DocumentgetElementsByTagName()
=> Lấy tất cả các thẻ có cùng tên lưu trữ nó dưới dạng mảng.
=> Nếu muốn truy xuất đến 1 thẻ nhất định trong mảng thì cần phải có chỉ số
VD :
III. Cách gọi hàm trong java scrpit
Ví dụ :
-> Khi thực hiện đoạn code trên tại sao chỉ có hàm display được gọi ...mặc dù khi click vào button chúng ta vẫn gọi được hàm LayGiaTriTheP?
=> - JavaScrpit đọc code từ trên xuống dưới , từ trái qua phải
- Không có sự ưu tiên khi đọc code html hay code javascript
do đó Khi ta gọi hàm LayGiaTriTheP() chưa có thẻ P nào được tạo nên hàm này không thực hiện được.
=> Để sửa thì ta sẽ cho đoạn script ở cuối sau khi đã khai báo các thẻ p
Nhận xét
Đăng nhận xét