Thao tác DOM Python

Trong bài viết này, tôi sẽ chỉ cho bạn cách bạn có thể truy cập JavaScript DOM trong ứng dụng Flask của mình. Đến cuối bài viết này, bạn sẽ tạo một ứng dụng Flask đơn giản, ứng dụng này cập nhật DOM và tăng một số mỗi khi nhấp vào một nút

Để truy cập JavaScript DOM, chúng tôi sẽ sử dụng gói Python có tên “JyServer. ” Bạn có thể chỉ cần cài đặt nó với pip như thế này

pip3 install jyserver

Tất nhiên, bạn cũng sẽ cần cài đặt Flask, bạn có thể cài đặt như thế này

pip3 install flask

Hãy bắt đầu bằng cách tạo tệp index.html của chúng tôi

Bạn sẽ nhận thấy, đây là một tệp HTML đơn giản có văn bản và một nút. Tôi đặt id của thẻ đoạn văn thành “count”, vì tôi sẽ đề cập đến nó sau trong mã Python. Bạn cũng sẽ nhận thấy rằng tôi đã đặt phương thức title của nút thành server.increment[], nhưng chúng ta chưa có đối tượng máy chủ hoặc phương thức gia tăng, vì vậy hãy thực hiện điều đó trong mã Python của chúng ta

Hãy bắt đầu bằng cách nhập những gì chúng ta cần trong ứng dụng Flask của mình

Bây giờ là lúc sử dụng JyServer cho ứng dụng của chúng tôi. Điều đầu tiên chúng ta sẽ làm là yêu cầu JyServer sử dụng “ứng dụng” của chúng ta, đó là đối tượng Flask của chúng ta. Bên dưới đó, chúng tôi sẽ tạo lớp “Ứng dụng” của riêng mình, lớp này sẽ đảm nhiệm việc xử lý JavaScript và DOM. Tất nhiên, chúng ta sẽ thêm một phương thức __init__ và phương thức gia tăng vào lớp “Ứng dụng” của chúng ta

Trong phương thức __init__, hãy tạo một biến tự gọi là "count", biến này sẽ được đặt bằng 0. Trong phương pháp gia tăng, "đếm" sẽ được tăng thêm 1. Ngoài ra, chúng tôi cũng sẽ cập nhật văn bản trên HTML thành “bộ đếm” mới của chúng tôi. ”

Trong dòng 14, bạn sẽ nhận thấy rằng self.js nắm quyền kiểm soát JavaScript DOM trong máy chủ của chúng tôi. Bây giờ, còn một việc nữa để chúng tôi làm, đó là yêu cầu “Ứng dụng” JyServer của chúng tôi hiển thị chỉ mục của chúng tôi. mẫu html, thay vì Flask làm việc đó. Bằng cách đó, JyServer sẽ chịu trách nhiệm cập nhật DOM trong trang web của chúng tôi

Bây giờ là lúc chạy ứng dụng Flask của chúng tôi và kiểm tra nó. Khi bạn nhấp vào nút tăng, văn bản có id “đếm” sẽ tự động cập nhật mà không cần tải lại toàn bộ trang

Và đó là nó. Bây giờ bạn đã biết cách cập nhật các phần tử trong DOM bằng Flask và JyServer. Tôi hy vọng kiến ​​​​thức này sẽ hữu ích cho bạn trong các dự án của bạn và Chúc may mắn

Mô hình Đối tượng Tài liệu [DOM] là một giao diện lập trình cho các tài liệu HTML và XML [Ngôn ngữ đánh dấu mở rộng]. Nó xác định cấu trúc logic của tài liệu và cách tài liệu được truy cập và thao tác

Phân tích cú pháp XML bằng API DOM trong python khá đơn giản. Với mục đích làm ví dụ, chúng tôi sẽ tạo một tài liệu XML mẫu [mẫu. xml] như bên dưới

DOM là viết tắt của Mô hình đối tượng tài liệu. Mô hình này là một biểu diễn phân cấp giống như cây của các cấu trúc phần tử HTML hoặc XML cung cấp cách truy cập từng phần tử trong tài liệu. Giao diện lập trình này là một đại diện của trang để bạn có thể viết các tập lệnh có thể thao tác và thay đổi kiểu dáng, nội dung và thậm chí cả cấu trúc của trang. Tài liệu được trình bày dưới dạng các đối tượng và nút giúp ngôn ngữ kịch bản kết nối với chúng dễ dàng hơn

Hãy giải thích về sinh vật thần thoại này được gọi là DOM…

Về mặt kỹ thuật, một trang HTML hoặc XML có thể được hiển thị dưới dạng trang thực hoặc dưới dạng nguồn trong cửa sổ trình duyệt. Để xem một trang dưới dạng một trang, chỉ cần yêu cầu tài liệu và trình duyệt sẽ phân tích cú pháp cho bạn. Để xem dưới dạng nguồn, hãy sử dụng lệnh Ctrl + U hoặc nhấp chuột phải khi đang ở trong tab trình duyệt và chọn xem nguồn trang

Có một số tiêu chuẩn được chỉ định bởi W3C DOM và WHATWG DOM được triển khai bởi các trình duyệt web hiện đại. Ví dụ: getElementsByTagName trả về danh sách tất cả các phần tử khớp với tiêu chí cụ thể

var inputs = document.getElementsByTagName["input"];
//inputs variable will now have an array of all input elementsconsole.log[inputs[0].nodeName];
//This will log out the name of the first input element
//NOTE: Arrays are 0 based so 0 is the first element.

Các thuộc tính, sự kiện và phương thức gắn liền với một phần tử được tổ chức thành các đối tượng giúp dễ dàng tham chiếu chúng hơn bằng cách sử dụng hệ thống tham chiếu Object-by-Object được triển khai bởi các trình duyệt cơ sở Gecko hiện đại như Mozilla và Chrome

Ở thời điểm bắt đầu…

JavaScript và DOM gắn bó chặt chẽ với nhau nhưng dần dần phát triển thành hai thực thể riêng biệt theo thời gian. Nội dung trang thường được lưu trữ trong DOM và điều này giúp JavaScript có thể truy cập được để thao tác. DOM không phải là một ngôn ngữ lập trình, mà là một giao diện lập trình, do đó nó không bị giới hạn chỉ được sử dụng bởi JavaScript và HTML. Đây là tập lệnh python được sử dụng để thao tác DOM của tài liệu XML

import xml.dom.minidom as m
document = m.parse["C://code/xml_data.xml"];
document.nodeName #DOM property of the document objecttable_list = document.getElementsByTagName["table"];

Như bạn có thể thấy, DOM được thiết kế để độc lập với nền tảng, khiến cho biểu diễn cấu trúc của nó có thể truy cập được trên tất cả các nền tảng. Mặc dù các trường hợp thao túng DOM phổ biến nhất là sử dụng JavaScript và HTML, nhưng các ngôn ngữ đánh dấu và viết kịch bản khác cũng có thể được sử dụng. Các phương thức được sử dụng là phổ biến và tương thích chéo như bạn có thể thấy ở đây Python sử dụng phương thức getElementsByTagName

Cách truy cập DOM

Theo mặc định, DOM có thể tự truy cập mặc dù các trình duyệt khác nhau triển khai các biến thể khác nhau của DOM. Tuy nhiên, các biến thể này tuân theo một tiêu chuẩn cụ thể thống nhất trên tất cả các trình duyệt

Một điều cần phải rất rõ ràng là

Bạn chỉ có thể truy cập DOM sau khi tải xong tài liệu

Điều này có nghĩa là vì lý do an toàn, bạn nên bọc mã truy cập DOM của mình trong một cửa sổ. chức năng tải

Khi trang được tải, bạn có thể ngay lập tức bắt đầu sử dụng API cho các phần tử cửa sổ và tài liệu không tồn tại trong mã html. Tài liệu đại diện cho văn bản đánh dấu html trong khi cửa sổ đại diện cho cửa sổ trình duyệt hiển thị văn bản đánh dấu html. Phần tử con của hai phần tử này là tất cả các phần tử có trong trang web

Hãy xem ví dụ này tạo phần tử h1 mới, thêm một số nội dung vào phần tử và thêm phần tử vào cây tài liệu [DOM]

window.onload = function[] {
 var heading = document.createElement["h1"];
 var headingContent = document.createTextNode["Onejohi"];
 heading.appendChild[headingContent];
 document.body.appendChild[heading];
}

Giao diện và đối tượng

DOM có thể hơi khó hiểu. Lấy ví dụ phần tử biểu mẫu lấy thuộc tính name từ giao diện HTMLFormElement nhưng thuộc tính className được kế thừa từ giao diện HTMLElement

Nhiều đối tượng kế thừa từ các giao diện khác nhau. Trong một ví dụ để chứng minh điều này, chúng ta sẽ sử dụng hoán đổi cho nhau các phương thức từ Phần tử bảng và đó là Nút giao diện cha mẹ mà Phần tử được lấy từ đó

let table = document.getElementById["table_1"];
var tableAttributes = table.attributes;tableAttributes.forEach[ [attribute] => { if[attribute.nodeName.toLowerCase[] == "border"]
  table.border = "1";}table.summary = "Increased border";

Như bạn có thể thấy từ ví dụ trên, chúng tôi đang sử dụng thuộc tính nodeName có nguồn gốc từ giao diện Phần tử, đồng thời sử dụng các thuộc tính dành riêng cho bảng để thay đổi đường viền bảng bằng cách lặp qua tất cả các thuộc tính và tìm một thuộc tính khớp với “đường viền

Có những giao diện thường được sử dụng mà bạn có thể thấy được sử dụng liên tục. Các giao diện này là những giao diện bạn sẽ thường xuyên xử lý nhất với tư cách là một lập trình viên

Tài liệu và Cửa sổ là các đối tượng có giao diện được sử dụng nhiều nhất khi thao tác với DOM vì như tôi đã nói trước đó, tài liệu đại diện cho gốc của cây tài liệu trong khi cửa sổ đại diện cho cửa sổ trình duyệt đang hoạt động

Dưới đây là danh sách ngắn gọn về API phổ biến trong tập lệnh trang web và XML bằng DOM

1. tài liệu. getElementById[id]
2. tài liệu. getElementsByTagName[tên]
3. tài liệu. createElement[element_name]
4. cha mẹNode. appendChild[nút]
5. yếu tố. bên trongHTML
6. yếu tố. Phong cách
7. yếu tố. setAttribute[thuộc tính, giá trị]
8. yếu tố. getAttribute[tên thuộc tính]
9. yếu tố. addEventListener[xử lý[]]
10. cửa sổ. Nội dung
11. cửa sổ. đang tải
12. cửa sổ. bãi rác[]
13. cửa sổ. scrollTo[]

Một số kiểu dữ liệu DOM

Một số loại dữ liệu đang được chuyển qua DOM nếu bạn không nhận thấy. Hãy để tôi làm mới bộ não của bạn một chút, hãy nhớ khi chúng ta làm một bảng Thuộc tính. forEach[] để lặp qua các thuộc tính bảng? . Điều này có nghĩa là các thuộc tính của một bảng được truyền vào dưới dạng một mảng các thuộc tính. Hãy để chúng tôi mô tả ngắn gọn một số loại dữ liệu

tài liệu. Đây là một đối tượng, đó là tài liệu gốc của chính nó

yếu tố. Đây là một nút thuộc loại phần tử được trả về bởi một thành viên của API DOM

nútList. Chúng tồn tại dưới dạng một mảng các phần tử hầu hết được trả về bởi các phương thức DOM trả về nhiều kết quả như tài liệu. getElementsByTagName[] hoặc tài liệu. getElementsByClassName[]. Các mục này có thể được lặp lại và truy cập bởi một chỉ mục

thuộc tính. các thuộc tính là các nút tương tự và được xử lý giống như các phần tử, mặc dù chúng cung cấp cho các phần tử cụ thể các thuộc tính như lớp, id, tên, loại…

tênNodeMap. Điều này tương tự như một mảng, nhưng tên có thể được truy cập theo tên hoặc chỉ mục, trước đây là không thể trong JS nhưng hoạt động tốt với danh sách Python. Một tênNodeMap cũng có một phương thức item[] để thêm và xóa các mục khỏi danh sách của nó vì việc truy cập các mục bằng cách sử dụng chỉ mục chỉ được thêm vào để thuận tiện cho việc liệt kê

Sự kết luận

Để bạn hiểu cách thao tác các mục trên trang web của mình, bạn cần hiểu DOM. Nó gần giống như giao diện kết nối máy khách với phụ trợ, JSON. Mặc dù JSON là một loại ngôn ngữ cấu trúc dữ liệu trong các đối tượng Javascript, do đó có tên Ký hiệu đối tượng JavaScript. DOM KHÔNG phải là ngôn ngữ lập trình, nó chỉ là một giao diện kết nối các tập lệnh của bạn với cây tài liệu của bạn. Bằng cách này, bạn có thể thay đổi các thuộc tính dựa trên các biểu thức trong mã của mình, cho dù đó là đính kèm trình xử lý sự kiện vào đầu vào tìm kiếm để làm cho nó phát triển khi người dùng tập trung vào nó hay thay đổi màu của nút sau khi người dùng nhấn vào đó “n” lần

DOM là một giao diện quan trọng. Các DOM ảo bắt chước DOM thực tế cũng có thể đạt được như trong trường hợp React khi React điều khiển một DOM ảo, từ đó ánh xạ chính nó ra DOM ban đầu. Gần giống như dịch chuyển tức thời lượng tử thông tin giữa hai DOM, một ảo và một nguyên bản

Bạn có thể thao tác DOM bằng Python không?

Thao tác DOM là gì?

DOM trong Python là gì?

Python có DOM không?