Scribd Logo
Upload

Welcome to Scribd!

  • 11 views

    JS PRJ

    Uploaded by

    Khong Thi Hong Anh (K16HL)

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    JS PRJ

    Uploaded by

    Khong Thi Hong Anh (K16HL)
    11 views11 pages

    Original Title

    JS_PRJ

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    11 views11 pages

    JS PRJ

    Uploaded by

    Khong Thi Hong Anh (K16HL)

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 11

    HE160643 – Khổng Thị Hồng Anh

    JavaScript Can Change HTML Content

    JavaScript Can Change HTML Attribute Values

    JavaScript Can Change HTML Styles (CSS)

    JavaScript Can Hide HTML Elements

    JavaScript Can Show HTML Elements

    DOM HTML (Mô hình đối tượng tài liệu)


    Khi một trang web được tải, trình duyệt sẽ tạo Mô hình Đối tượng Tài liệu của
    trang.

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

    Nó định nghĩa:

     Các phần tử HTML dưới dạng đối tượng


     Các 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
     Các sự kiện cho tất cả các phần tử HTML
     Nói cách khác: HTML DOM là một tiêu chuẩn cho cách lấy, thay đổi, thêm
    hoặc xóa các phần tử HTML.
    Các phương thức HTML DOM là các hành động bạn có thể thực hiện (trên Phần tử
    HTML).
    Thuộc tính HTML DOM là các giá trị (của Phần tử HTML) mà bạn có thể đặt hoặc
    thay đổi.
    The DOM Programming Interface
     HTML DOM có thể được truy cập bằng JavaScript (và với các ngôn ngữ lập
    trình khác).
     Trong DOM, tất cả các phần tử HTML được định nghĩa là các đối tượng.
     Giao diện lập trình là các thuộc tính và phương thức của từng đối tượng.
     Thuộc tính là một giá trị mà bạn có thể lấy hoặc đặt (như thay đổi nội dung
    của một phần tử HTML).

     Phương thức là một hành động bạn có thể thực hiện (như thêm hoặc xóa một
    phần tử HTML).

    getElementById
    Cách phổ biến nhất để truy cập một phần tử HTML là sử dụng id của phần tử.
    innerHTML
     Cách dễ nhất để lấy nội dung của một phần tử là sử dụng thuộc tính
    innerHTML.
     Thuộc tính innerHTML hữu ích để lấy hoặc thay thế nội dung của các phần
    tử HTML.

    Tìm các phần tử HTML


    document.getElementById (id) Tìm một phần tử theo id phần tử

    document.getElementsByTagName (tên) Tìm các phần tử theo tên thẻ


    document.getElementsByClassName (tên) Tìm các phần tử theo tên lớp

    Tìm các phần tử HTML bằng CSS Selectors


    Nếu bạn muốn tìm tất cả các phần tử HTML khớp với một bộ chọn CSS được chỉ
    định (id, class names, types, attributes, values of attributes, …), hãy sử dụng
    phương thức querySelectorAll ().

    Tìm các phần tử HTML bằng HTML Object Collections


    Thay đổi các phần tử HTML

    element.innerHTML = new html content: Thay đổi HTML bên trong của một
    phần tử

    element.attribute = new value: Thay đổi giá trị thuộc tính của một phần tử HTML

    element.style.property = new style: Thay đổi kiểu của một phần tử HTML
    element.setAttribute (thuộc tính, giá trị): Thay đổi giá trị thuộc tính của một phần
    tử HTML
    Thêm và xóa các phần tử
     document.createElement (phần tử): Tạo một phần tử HTML
     document.removeChild (phần tử): Xóa một phần tử HTML
     document.appendChild (phần tử): Thêm phần tử HTML
     document.replaceChild (mới, cũ): Thay thế một phần tử HTML
     document.write (text): Ghi vào luồng xuất HTML

    Thêm trình xử lý sự kiện


     document.getElementById (id) .onclick = function () {code} : Thêm mã xử
    lý sự kiện vào sự kiện onclick

    Tìm các đối tượng HTML


    HTML DOM Level 1 đầu tiên (1998), định nghĩa 11 đối tượng HTML, tập hợp đối
    tượng và thuộc tính. Chúng vẫn có giá trị trong HTML5.

    Sau đó, trong HTML DOM Level 3, nhiều đối tượng, bộ sưu tập và thuộc tính hơn
    đã được thêm vào.
     document.anchors: Trả về tất cả <a> phần tử có thuộc tính tên
     document.baseURI: Trả về URI cơ sở tuyệt đối của tài liệu
     document.body: Trả về phần tử <body>
     document.cookie: Trả về cookie của tài liệu
     document.doctype: Trả về loại tài liệu
     document.documentElement: Trả về <html> phần tử
     document.documentMode: Trả về chế độ được trình duyệt sử dụng
     document.documentURI: Trả về URI của tài liệu
     document.domain: Trả về tên miền của máy chủ tài liệu
     document.embeds: Trả về tất cả các phần tử <embed>
     document.forms: Trả về tất cả các phần tử <form>
     document.head: Trả về phần tử <head>
     document.images: Trả về tất cả các phần tử <img>
     document.implementation: Trả về việc triển khai
     document.inputEncoding Trả về mã hóa của tài liệu (bộ ký tự) 3
     document.lastModified Trả về ngày và giờ tài liệu được cập nhật 3
     document.links Trả về tất cả các phần tử <areosystem và <a> có thuộc tính
    href 1
     document.readyState Trả về trạng thái (đang tải) của tài liệu 3
     document.referrer Trả về URI của liên kết giới thiệu (tài liệu liên kết) 1
     document.scripts Trả về tất cả các phần tử <script> 3
     document.strictErrorChecking Trả về nếu việc kiểm tra lỗi được thực thi 3
     document.title Trả về phần tử <title> 1
     document.URL Trả về URL đầy đủ của tài liệu 1

    Ví dụ về các sự kiện HTML:


     Khi người dùng nhấp chuột
     Khi một trang web đã tải
     Khi một hình ảnh đã được tải
     Khi chuột di chuyển qua một phần tử
     Khi một trường đầu vào được thay đổi
     Khi một biểu mẫu HTML được gửi
     Khi người dùng gõ phím
    The addEventListener() method
     Phương thức addEventListener () gắn một trình xử lý sự kiện vào phần tử
    được chỉ định.
     Phương thức addEventListener () gắn một trình xử lý sự kiện vào một phần
    tử mà không ghi đè các trình xử lý sự kiện hiện có.
     Bạn có thể thêm nhiều trình xử lý sự kiện vào một phần tử.
     Bạn có thể thêm nhiều trình xử lý sự kiện cùng loại vào một phần tử, tức là
    hai sự kiện "nhấp chuột".
     Bạn có thể thêm trình xử lý sự kiện vào bất kỳ đối tượng DOM nào không
    chỉ các phần tử HTML. tức là đối tượng cửa sổ.
     Phương thức addEventListener () giúp dễ dàng kiểm soát cách sự kiện phản
    ứng với hiện tượng nổi bọt.
     Khi sử dụng phương thức addEventListener (), JavaScript được tách biệt
    khỏi đánh dấu HTML, để dễ đọc hơn và cho phép bạn thêm trình xử lý sự
    kiện ngay cả khi bạn không kiểm soát đánh dấu HTML.
     Bạn có thể dễ dàng loại bỏ trình nghe sự kiện bằng cách sử dụng phương
    thức removeEventListener ().
    Phương thức addEventListener () cho phép bạn thêm trình xử lý sự kiện trên bất kỳ
    đối tượng DOM HTML nào, chẳng hạn như các phần tử HTML, tài liệu HTML,
    đối tượng cửa sổ hoặc các đối tượng khác hỗ trợ sự kiện, như đối tượng
    xmlHttpRequest.

    Phương thức removeEventListener () xóa các trình xử lý sự kiện đã được đính kèm
    với phương thức addEventListener ():
    Các mối quan hệ nút
     Các nút trong cây nút có mối quan hệ thứ bậc với nhau.
     Các thuật ngữ cha mẹ, con cái và anh chị em ruột được sử dụng để mô tả các
    mối quan hệ.
     Trong cây nút, nút trên cùng được gọi là gốc (hoặc nút gốc)
     Mỗi nút đều có chính xác một nút cha, ngoại trừ nút gốc (không có nút cha)
     Một nút có thể có một số nút con
     Anh chị em (anh chị em) là các nút có cùng cha mẹ
    Điều hướng giữa các nút
    Bạn có thể sử dụng các thuộc tính nút sau để điều hướng giữa các nút bằng
    JavaScript:
     parentNode
     childNodes[nodenumber]
     firstChild
     lastChild
     nextSibling
     previousSibling

    Tạo phần tử HTML mới - insertBefore ()


     Phương thức appendChild () trong ví dụ trước, đã thêm phần tử mới vào làm
    phần tử con cuối cùng của phần tử gốc.
     Nếu không muốn, bạn có thể sử dụng phương thức insertBefore ():

    Đối tượng HTMLCollection


    Phương thức getElementsByTagName () trả về một đối tượng HTMLCollection.

    Đối tượng HTMLCollection là một danh sách (tập hợp) các phần tử HTML giống
    như mảng.

    You might also like