Mô hình DOM trong javascript – là mô hình phân cấp thẻ trong tài liệu HTML. Nó mô tả cấu trúc phân tầng các thẻ được bố trí trong trang web

Giới thiệu về mô hình DOM

Khi trình duyệt đọc cấu trúc html của trang web, nó sẽ xây dựng một mô hình có thứ bậc phân cấp để diễn tả cấu trúc html trong trang, được gọi là mô hình DOM

Mô hình DOM là 1 trong các tiêu chuẩn của tổ chức W3C – tổ chức quy định các tiêu chuẩn cho web. DOM quy định cách thức mà trình duyệt xây dựng phân cấp cây. Thanks DOM, you used Javascript new could

• Chỉnh sửa nội dung các thẻ HTML
• Chỉnh sửa các thuộc tính của thẻ HTML
• Chỉnh sửa định dạng CSS của thẻ HTML
• Delete the tag and properties do not want
• Add the new tag HTML
• Tương tác với sự kiện của các thẻ

Nút trong DOM mô hình

Mỗi thành phần trong DOM được gọi là 1 nút. Mỗi nút có các thuộc tính và hàm riêng

    
        My Title
    
    
        My link
        
My header
    

• Nút đầu tiên trong DOM được gọi là gốc [gốc], đó là tài liệu nút
• Giữa các nút trong DOM có mối quan hệ cha, con và anh em [anh chị em]
• Tất cả các nút, ngoại trừ gốc chỉ có một cha
• Một nút có thể có nhiều con hoặc không có con nào
• Node lá [lá] no con
• Những nút anh em [anh chị em] với nhau có cùng một cha

Tóm tắt, mô hình DOM trong javascript giống như một cái cây có gốc và nhiều nhánh nhánh. Gốc cây là nút gốc và các nhánh là các nút con cháu

Các loại nút trong DOM

Có nhiều loại nút trong DOM, mời xem bảng sau

• nút tài liệu. is nodediễn giải toàn bộ tài liệu
• nút phần tử. là loại nút diễn ra các thẻ html đang được sử dụng trong trang web. Ví dụ br, img
• nút bình luận. là nút chứa các ghi chú trong tài liệu
• nút thuộc tính. là nút chứa thuộc tính của các thẻ
• nút văn bản. là nút chứa chữ trong các thẻ

Các thuộc tính và hàm trong một nút

Trong mô hình DOM, mỗi nút có nhiều thuộc tính và nhiều hàm

Các thuộc tính trong một nút

Thuộc tínhMô tả thuộc tínhMảng là các thuộc tính của nodechildElementCountĐếm các phần tử conchildNodesMảng các con của nút, bao gồm cả văn bản và chú thích nodechildrenMảng các phần tử con, không bao gồm văn bản và chú thích nodeclassListTrả về các lớp cssclassNameThuộc tính lớp cssclientHeightĐộ cao của nút, bao gồm cả paddingclientLeftTrả về độ lớn . nextElementSiblingLấy phần tử kế tiếp. nodeNameTrả về tên nodenodeTypeCho biết kiểu của node [element, text, attribute…]parentElementTrả về node chapreviousElementSiblingLấy phần tử node trước của node hiện tại styleTập hợp các thuộc tính css của nodetagNametag

Các hàm trong một nút

appendChild[]Add node c title[]Hàm chạy khi click chuột vào elementblur[]Hàm chạy khi phần tử mất focuscontains[]Hàm trả về true nếu nó chỉ chứa 1 nút ra, ngược lại trả về falsefocus[]Hàm chạy khi phần tử có

Chọn nút trong DOM bằng Javascript

Có thể chọn các nút trong DOM bằng các chức năng Javascript sau

• getElementById[id]. Trả về nút có thuộc tính id chỉ định
• getElementsByName[tên]. Trả về 1 mảng các nút có tên chỉ định
• getElementsByTagName[tên]. Trả về  1 mảng các nút có tên thẻ chỉ định
• getElementsByClassName[tên]. Trả về  1mảng các nút có lớp chỉ định

Ngoài ra có thể sử dụng mối quan hệ cha , con, láng giềng, trước sau giữa các nút để truy cập các nút

Việc đề cập đến MutationObservers của Gabriel Garcia đang đi đúng hướng, nhưng không hiệu quả với tôi. Tôi không chắc liệu đó có phải là do lỗi của trình duyệt hay do lỗi của tôi hay không, nhưng phiên bản cuối cùng hoạt động với tôi là phiên bản sau

document.addEventListener["DOMContentLoaded", function[event] {
    var observer = new MutationObserver[mutations=>{
        mutations.map[mutation=>{
            Array.from[mutation.addedNodes].map[node=>{
                if [node.tagName === "SCRIPT"] {
                    var s = document.createElement["script"];
                    s.text=node.text;
                    if [typeof[node.parentElement.added] === 'undefined']
                        node.parentElement.added = [];
                    node.parentElement.added[node.parentElement.added.length] = s;
                    node.parentElement.removeChild[node];
                    document.head.appendChild[s];
                }
            }]
        }]
    }]
    observer.observe[document.getElementById["element_to_watch"], {childList: true, subtree: true,attributes: false}];
};

Tất nhiên, bạn nên thay thế element_to_watch bằng tên của phần tử đang được sửa đổi

node.parentElement.added được sử dụng để lưu trữ các thẻ tập lệnh được thêm vào document.head. Trong chức năng được sử dụng để tải trang bên ngoài, bạn có thể sử dụng một cái gì đó như sau để xóa các thẻ tập lệnh không còn phù hợp