Html bên ngoài trong javascript

Đối với lập trình Web, kiến ​​thức về DOM và khả năng thao tác DOM là hai yếu tố quan trọng nhất. Đơn giản vì DOM cho bạn nỗ lực thay đổi mọi thứ của trang web, khi mà mọi nội dung đều có thể thêm, bớt, xóa, chỉnh sửa để mang lại trải nghiệm và nội dung tốt nhất. Bài viết này sẽ giúp bạn hiểu bản chất và cách sử dụng DOM

Định nghĩa DOM

DOM là viết tắt của Mô hình đối tượng tài liệu, là một tiêu chuẩn được định nghĩa bởi W3C được sử dụng để truy xuất dữ liệu trên các tài liệu có cấu trúc HTML hoặc XML bằng các ngôn ngữ thông dịch như javascript, PHP,. . Ngoài ra, DOM giúp thao tác dữ liệu theo hướng đối tượng mô hình. Các phần tử bên trong tài liệu có cấu trúc được định nghĩa thành các đối tượng, phương thức và thuộc tính để có thể truy xuất dễ dàng mà vẫn đảm bảo cấu trúc tính toán. Mỗi phần tử là một đối tượng, sở hữu các thuộc tính và các phương thức để làm việc với các thuộc tính như bổ sung, xóa, chỉnh sửa, cập nhật. Bên cạnh đó, bạn cũng có thể thêm bớt các phần tử thùy thích, giúp nội dung cấu trúc của trang web luôn cập nhật động

CÂY TRÚC DOM NÚT

Đối với HTML DOM, mọi thành phần đều được xem là một nút. Được biểu diễn trên một cấu trúc cây gọi là cây DOM. Các phần tử khác nhau sẽ được phân loại thành các loại 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: chính là tài liệu HTML, thường được biểu diễn bởi thẻ .
  • Node section. Biểu diễn cho một 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à một nút văn bản. Đó có thể là tên trang web trong thẻ , tên đề mục trong thẻ <h1>, một đoạn văn bản trong thẻ<p>.</p></li><li>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)</li></ul><p>Ví dụ cụ thể cho các nút</p><pre><code><html> <head> <title> Demo HTML Title

    Demo

    GG

    Trong ví dụ trên

    • : Document node
    • , , ,

      là thẻ Element node

    • Nút văn bản là thẻ văn bản

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

    • Node gốc luôn là node đầu tiên
    • Tất cả các nút không phải nút gốc đều chỉ có một nút cha (cha)
    • Một nút có thể có một hoặc nhiều con, nhưng cũng có thể không có con nào
    • Các nút có cùng nút cha được gọi là các nút anh em
    • Trong các node anh em, node đầu tiên được gọi là con cả (firstChild), node cuối cùng được gọi là con út (lastChild)

    Thao tác với DOM

    Mọi nội dung của trang web đều có thể được cập nhật thông tin qua các thuộc tính của DOM. Tất cả từ thay đổi định dạng chữ, nội dung chữ đến thay đổi nút và thêm nút mới. Do đó, để sáng tạo nội dung tốt, bạn cần bám vào công thức cách thao tác DOM và ý nghĩa của từng thuộc tính, phương thức

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

    You can see fullđử ở. http. //www. w3schools. com/jsref/dom_obj_all. asp

    Một số thuộc tính

    • Tôi. Định danh _ là duy nhất cho mỗi phần tử nên thường được sử dụng để truy xuất DOM một cách nhanh chóng
    • tên lớp. Tên lớp _ cũng được sử dụng để truy xuất trực tiếp như id, nhưng một tên lớp có thể sử dụng cho nhiều phần tử
    • tên thẻ. Tên thẻ HTML
    • bên trongHTML. Mã HTML return side in the left section. Đoạn mã HTML này là chuỗi ký tự chứa tất cả các phần tử bên trong bao gồm các nút phần tử và các nút văn bản
    • bên ngoàiHTML. Trả về mã HTML của phần tử hiện tại
    • văn bảnnội dung. Trả về 1 chuỗi ký tự chứa nội dung của tất cả các nút văn bản bên trong phần tử hiện tại
    • thuộc tính. Các thuộc tính như id, class, href, name, title,…
    • Phong cách. Set the setting format of the current section at
    • giá trị. Get the value of the section is select to a variable

    One some method

    • getElementById(id). Tham chiếu đến một nút duy nhất có thuộc tính id giống với id cần tìm
    • getElementsByTagName(tên thẻ). Tham chiếu đến tất cả các nút thuộc tính tagName giống với tên thẻ cần tìm
    • getElementsByName(tên). Tham chiếu đến tất cả các nút có thuộc tính tên cần tìm
    • getAttribute(tên thuộc tính). Nhận giá trị thuộc tính
    • setAttribute(tên thuộc tính, giá trị). Edit property value
    • appendChild(nút). Add 1 node con to node current at
    • removeChild(nút). Xóa một nút con khỏi nút hiện tại

    Mặt khác, các phần tử DOM đều là các nút trên cây cấu trúc DOM. Chúng sở hữu thêm các thuộc tính quan hệ để biểu thị sự phụ thuộc giữa các nút với nhau. Nhờ các thuộc tính quan hệ này, chúng ta có thể truy xuất DOM gián tiếp dựa trên vị trí và quan hệ của các thành phần tử

    Một số thuộc tính quan hệ

    • cha mẹNode. Node cha
    • nút con. Nút con
    • đứa trẻ đầu tiên. Node con first
    • con cuối cùng. Node con end
    • tiếp theoAnh chị em. Node anh em liền kề sau
    • trướcAnh chị em. Node anh em liền kề trước

    Truy xuất DOM

    Truy xuất gián tiếp

    Thao tác truy xuất các nút gián tiếp theo vị trí trên DOM còn được gọi là DOM duyệt. Mỗi nút trên 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 hiện tại, và nút cha này là duy nhất cho mỗi nút. Làm điều đó nếu bạn muốn tìm nguồn gốc xa của một nút, bạn phải kết nối thuộc tính nhiều lần. Ví dụ. - Nút. cha mẹNode. mẹNOde
    • 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à một mảng các đối tượng. Lưu ý rằng, các nút con không được phân loại bởi nút loại, 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, tương đương với lệnh gọi Node. nút con[0]
    • Nút. con cuối cùng. Tham chiếu đến nút cuối cùng của nút hiện tại. Tương ứng với cuộc gọi Node. nút con [Phần tử. nút con. chiều dài - 1] Nút. tiếp theoAnh chị em. Tham chiếu đến node anh em liền kề sau node hiện tại
    • Nút. trướcAnh chị em. Tham chiếu đến node anh em liền kề node hiện tại

    Xem bên dưới để xác định danh sách hơn

    Html bên ngoài trong javascript

    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 sử dụng để truy xuất trực tiếp được hỗ trợ bởi mọi trình duyệt

    • tài liệu. getElementById(‘id_cần_tìm’)
    • tài liệu. getElementsByTagName('div')
    • tài liệu. getElementByName(‘tên_cần_tìm’)

    Tạo thêm hoặc di chuyển DOM chuyên nghiệp với appendChild

    Như bạn đã biết, mọi nút trên cây cấu trúc DOM đều bắt nguồn sâu từ nút gốc và bắt buộc phải có một nút cha. Do đó, khi một DOM mới được tạo ra, bạn cần thực hiện thêm thao tác là tìm một nút trên cây DOM để tạo nút cha cho nút vừa tạo thì quá trình tạo nút mới đã hoàn tất. Để tạo nút mới, bạn sử dụng một trong 2 phương pháp sau

    • tài liệu. createElement(tên_thẻ_html). Tạo một phần tử nút từ nút gốc
    • tài liệu. createTextNode(chuỗi_ký_tự). Tạo một nút văn bản từ nút gốc. Khi bạn tạo một nút mới nhưng chưa gán nút cha cho nó, nút đó sẽ tồn tại trong bộ nhớ đệm của máy tính. Bạn sẽ không thể truy xuất đến nút đó, trừ khi bạn đã lưu tham chiếu đến nút đó bằng một biến

    Một lưu ý khi tạo thêm DOM. nút mới được tạo sẽ có thuộc tính như một nút DOM thực sự. Tuy nhiên, các thuộc tính của nút mới ở trạng thái mặc định hoặc trống, nên bạn cần thiết lập thêm các thuộc tính cần thiết

    Phương thức appendChild còn được sử dụng để tổ chức lại các nút DOM. Nếu như 1 nút DOM đang có 1 nút cha nhưng lại có quan hệ với 1 nút cha khác thông qua phương thức appendChild thì nó sẽ không còn quan hệ với nút cha ban đầu

    Loại bỏ DOM với removeChild

    Khi bạn loại bỏ một nút, nút đó sẽ vẫn tồn tại trong bộ nhớ đệm của máy tính. Bạn sẽ không thể truy cập đến nút đó được nữa, trừ khi bạn đã lưu tham chiếu đến nó ở 1 biết khác

    Khi loại bỏ DOM, nút cha sẽ sử dụng phương thức removeChild() để loại bỏ một hoặc nhiều nút con

    SỰ KIỆN DOM

    Sự kiện và hàm xử lý sự kiện DOM là một phần quan trọng của Javascript. Sự kiện sẽ xảy ra khi có sự tương tác từ người dùng (như sự kiện onClick(), di chuyển chuột,…) hoặc từ trang web chính (sự cố onload khi một phần tử DOM nào đó đã được tải xuống hoặc khi có

    Sử dụng các điều kiện và hàm xử lý sự kiện

    Cách 1. Chèn trực tiếp vào thẻ HTML

    Cách sử dụng này sẽ nhanh chóng và dễ dàng thực hiện với trình lập trình viên, nhưng sẽ làm cho mã hóa phức tạp, không thuận tiện khi xây dựng các ứng dụng lớn

    cách 2. Chèn vào các thuộc tính của DOM

    Cách 3. Use method addEventListener()

    Phương thức addEventListener() đang được sử dụng rộng rãi cho các trình duyệt hiện tại từ sau năm 2012. Nếu bạn quan tâm đến mã chất lượng hoặc muốn xây dựng ứng dụng theo mô hình hướng đối tượng thì hãy quan tâm đến cách này

    Support Tool

    Khi làm việc với DOM, bạn không cần thêm một công cụ hỗ trợ nào khác. Bất cứ khi nào bạn muốn sử dụng, bạn có thể nhấn nút F12, hoặc nhấp chuột phải chọn Kiểm tra phần tử trên màn hình trình duyệt của bạn,