PHP DOMDocument nối thêm HTML
ví dụTạo một Show
phần tử và nối nó vào tài liệu const para = tài liệu. createElement("p"); Tạo một phần tử và nối nó với một phần tử const para = tài liệu. createElement("p"); Thêm ví dụ bên dưới Định nghĩa và cách sử dụngPhương thức 06 tạo một nút phần tửcú pháptài liệu. tạo phần tử (loại) Thông sốKiểu mô tả tham sốBắt buộc.Loại phần tử cần tạo. Giá trị trả vềTypeDescriptionNodeNút phần tử được tạoThêm ví dụTạo một nút const btn = tài liệu. createElement("button"); Hỗ trợ trình duyệt 07 là tính năng DOM Cấp 1 (1998)Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt ChromeIEEdgeFirefoxSafariOperaCó9-11CóCóCóCóví dụ
const newNode = tài liệu. createElement("li"); const list = tài liệu. getElementById("myList"); Di chuyển phần tử cuối cùng từ danh sách này sang đầu danh sách khác const nút = tài liệu. getElementById("myList2"). lastElementChild; Di chuyển phần tử cuối cùng từ danh sách này đến cuối danh sách khác const nút = tài liệu. getElementById("myList2"). lastElementChild; Định nghĩa và cách sử dụngPhương thức 08 chèn một nút con trước một nút con hiện cócú phápyếu tố. insertB Before (mới, hiện có) hoặcnút. insertB Before (mới, hiện có) Thông sốTham sốMô tả mớiBắt buộc.Nút (phần tử) cần chèn. hiện cóBắt buộc. Nút (phần tử) cần chèn trước. Nếu 09, nó sẽ được chèn vào cuối. Giá trị trả vềTypeDescriptionNodeNút được chènHỗ trợ trình duyệt 10 là tính năng DOM Cấp 1 (1998)Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt ChromeIEEdgeFirefoxSafariOperaCó9-11CóCóCóCóTạo khuôn mẫu làm cho trang web hoạt động. Tổng hợp dữ liệu và cấu trúc thành nội dung. Đó là siêu năng lực thú vị nhất của chúng tôi với tư cách là nhà phát triển — lấy một số dữ liệu, sau đó làm cho dữ liệu đó hoạt động cho chúng tôi, trong bất kỳ bản trình bày nào chúng tôi cần. Mảng đối tượng có thể trở thành bảng, danh sách thẻ, biểu đồ hoặc bất kỳ thứ gì chúng tôi cho là hữu ích nhất cho người dùng. Cho dù dữ liệu là các bài đăng trên blog của riêng chúng tôi trong các tệp Markdown hay tỷ giá hối đoái toàn cầu theo phút, đánh dấu và kết quả UX tùy thuộc vào chúng tôi với tư cách là nhà phát triển giao diện người dùng PHP là một ngôn ngữ tuyệt vời để tạo khuôn mẫu, cung cấp nhiều cách để hợp nhất dữ liệu với đánh dấu. Hãy đi vào một ví dụ về việc sử dụng dữ liệu để tạo biểu mẫu HTML trong bài đăng này Bạn muốn bẩn tay ngay lập tức? Trong PHP, chúng ta có thể biến nội tuyến thành chuỗi ký tự sử dụng dấu ngoặc kép, vì vậy nếu chúng ta có biến 0, chúng ta có thể viết 1 và nó sẽ in ra kết quả mong muốn là 2. Để tạo khuôn mẫu phức tạp hơn, chúng ta luôn có thể nối các chuỗi, như. 3Đối với những học sinh cũ, có 4. Đối với các chuỗi nhiều dòng, bạn có thể sử dụng Heredoc (cái bắt đầu như 5). Và, cuối cùng nhưng chắc chắn không kém phần quan trọng, chúng ta có thể rắc các biến PHP bên trong HTML, như 6Tất cả các tùy chọn này đều tuyệt vời, nhưng mọi thứ có thể trở nên lộn xộn khi cần nhiều logic nội tuyến. Nếu chúng ta cần xây dựng các chuỗi HTML phức hợp, chẳng hạn như một biểu mẫu hoặc điều hướng, độ phức tạp có thể là vô hạn, vì các phần tử HTML có thể lồng vào nhau Những gì chúng tôi đang cố gắng tránhTrước khi tiếp tục và làm điều mình muốn, bạn nên dành một phút để xem xét điều mình không muốn làm. Hãy xem xét đoạn văn rút gọn sau đây từ thánh thư của WordPress Core, 7, câu 170-270________số 8Để xây dựng một điều hướng 8 trong chức năng này, chúng tôi sử dụng một biến, 9, là một chuỗi rất dài mà chúng tôi tiếp tục thêm nội dung vào đó. Loại mã này có thứ tự hoạt động rất cụ thể và giới hạn. Nếu chúng tôi muốn thêm một thuộc tính vào 10, chúng tôi phải có quyền truy cập vào 11 trước khi điều này chạy. Và nếu chúng tôi muốn tùy ý lồng một 12 hoặc một 13 bên trong 10, chúng tôi cần tạo một khối mã hoàn toàn mới sẽ thay thế phần giữa của dòng 7 bằng khoảng 4-10 dòng mới, tùy thuộc vào chính xác những gì chúng tôi muốn . Bây giờ, hãy tưởng tượng bạn cần tùy ý thêm 12 , sau đó tùy ý thêm 13, bên trong hoặc sau 12. Điều đó một mình là ba câu lệnh 18, làm cho mã thậm chí còn khó đọc hơnRất dễ để kết thúc với mì spaghetti dạng chuỗi khi nối như thế này, điều này thật thú vị khi nói rằng thật khó để duy trì Bản chất của vấn đề là khi chúng ta cố gắng suy luận về các phần tử HTML, chúng ta không nghĩ về các chuỗi. Nó chỉ xảy ra rằng các chuỗi là những gì trình duyệt sử dụng và các kết quả đầu ra của PHP. Nhưng mô hình tinh thần của chúng ta giống DOM hơn - các phần tử được sắp xếp thành một cây và mỗi nút có nhiều thuộc tính, thuộc tính và con tiềm năng Sẽ không tuyệt sao nếu có một cách có cấu trúc, biểu cảm để xây dựng cái cây của chúng ta? Đi vào… Lớp học $p = $dom->createElement('p');19PHP 5 đã thêm mô-đun 10 vào danh sách các loại Không được nhập quá nghiêm ngặt™. Điểm vào chính của nó là lớp 19, tương tự như lớp JavaScript của API Web API 10. Nếu bạn đã từng sử dụng 13 hoặc, đối với những người trong chúng ta ở một độ tuổi nhất định, cú pháp 14 của jQuery, thì điều này có thể sẽ cảm thấy khá quen thuộcChúng tôi bắt đầu bằng cách khởi tạo một 19 mới 7Bây giờ chúng ta có thể thêm một 16 vào nó
Chuỗi 17 đại diện cho loại phần tử chúng tôi muốn, vì vậy các chuỗi hợp lệ khác sẽ là ________ 218, ________ 219, v.v.Khi chúng ta có một phần tử, chúng ta có thể đặt các thuộc tính của nó 1Chúng ta có thể thêm trẻ em vào nó 1Và cuối cùng, lấy chuỗi HTML hoàn chỉnh trong một lần 5Lưu ý cách mã hóa kiểu này giữ cho mã của chúng tôi được sắp xếp theo mô hình tinh thần của chúng tôi - một tài liệu có các phần tử; . Toàn bộ phần “HTML chỉ là một chuỗi” xuất hiện ở cuối, khi cấu trúc của chúng tôi đã sẵn sàng “Tài liệu” ở đây hơi khác so với DOM thực tế, ở chỗ nó không cần đại diện cho toàn bộ tài liệu mà chỉ là một khối HTML. Trên thực tế, nếu bạn cần tạo hai phần tử giống nhau, bạn có thể lưu một chuỗi HTML bằng cách sử dụng 50, sửa đổi “tài liệu” DOM thêm một chút, sau đó lưu một chuỗi HTML mới bằng cách gọi lại 50Lấy dữ liệu và thiết lập cấu trúcGiả sử chúng ta cần tạo một biểu mẫu trên máy chủ bằng cách sử dụng dữ liệu từ nhà cung cấp CRM và đánh dấu của riêng chúng ta. Phản hồi API từ CRM trông như thế này 8Ví dụ này không sử dụng cấu trúc dữ liệu chính xác của bất kỳ CRM cụ thể nào, nhưng nó khá tiêu biểu Và giả sử chúng ta muốn đánh dấu của mình trông như thế này 9 52 đó là gì? . Miễn là đầu vào trống, nó khớp với 53, nhưng người dùng không thấy bất kỳ văn bản giữ chỗ hiển thị nào. Chỉ là loại điều bạn có thể làm khi chúng tôi kiểm soát đánh dấuBây giờ chúng ta đã biết kết quả mong muốn của mình là gì, đây là kế hoạch trò chơi
Vì vậy, hãy bỏ qua quy trình của chúng tôi và tìm hiểu một số kỹ thuật 3Cho đến nay, chúng tôi đã nhận được dữ liệu và phân tích cú pháp, khởi tạo 19 của chúng tôi và lặp lại đầu ra của nó. Chúng ta muốn làm gì cho từng lĩnh vực? 7Vì chúng tôi đang ở trong một vòng lặp và PHP không có các biến phạm vi trong các vòng lặp, chúng tôi đặt lại phần tử 58 trên mỗi lần lặp. Sau đó, nếu trường có nhãn, chúng tôi xây dựng phần tử. Cuối cùng, chúng tôi nối nó vào phần tử vùng chứaLưu ý rằng chúng ta thiết lập các lớp bằng phương thức 59. Không giống như API Web, rất tiếc là không có sự chuyển giao danh sách lớp đặc biệt nào. Chúng chỉ là một thuộc tính khác. Nếu chúng ta có một số logic lớp thực sự phức tạp, vì It’s Just PHP™, chúng ta có thể tạo một mảng và sau đó ẩn nó. ______380. Đầu vào đơnVì chúng tôi biết rằng API sẽ chỉ trả về các loại trường cụ thể, nên chúng tôi có thể chuyển đổi loại và viết mã cụ thể cho từng loại 70Bây giờ, hãy xử lý các vùng văn bản, các hộp kiểm đơn lẻ và các trường ẩn 71Bạn có nhận thấy điều gì đó mới mà chúng tôi đang thực hiện đối với hộp kiểm và các trường hợp ẩn không? . Đối với một trường hộp kiểm duy nhất, chúng tôi muốn sửa đổi lớp của vùng chứa, vì vậy chúng tôi có thể căn chỉnh hộp kiểm và nhãn theo chiều ngang; Bây giờ nếu chúng ta chỉ đơn thuần nối các chuỗi, thì sẽ không thể thay đổi vào thời điểm này. Chúng tôi sẽ phải thêm một loạt các câu lệnh 18 liên quan đến loại phần tử và siêu dữ liệu của nó ở đầu khối. Hoặc, có thể tệ hơn, chúng tôi bắt đầu cách 85 sớm hơn, sau đó sao chép-dán rất nhiều mã chung giữa mỗi nhánhVà đây là vẻ đẹp thực sự của việc sử dụng một công cụ xây dựng như 19 — cho đến khi chúng tôi đạt được 50 đó, mọi thứ vẫn có thể chỉnh sửa được và mọi thứ vẫn có cấu trúcCác phần tử vòng lặp lồng nhauHãy thêm logic cho các phần tử 88 72OK, có rất nhiều thứ đang diễn ra ở đây, nhưng logic cơ bản là giống nhau. Sau khi thiết lập 88 bên ngoài, chúng tôi tạo một mảng gồm các 90 để nối bên trong nóChúng tôi cũng đang thực hiện một số mánh khóe dành riêng cho 88 tại đây. Nếu không có tùy chọn được chọn trước, chúng tôi sẽ thêm một tùy chọn giữ chỗ trống đã được chọn nhưng người dùng không thể chọn. Mục tiêu là đặt 92 của chúng ta làm “placeholder” bằng cách sử dụng CSS, nhưng kỹ thuật này có thể hữu ích cho tất cả các loại thiết kế. Bằng cách thêm nó vào 93 trước khi thêm các tùy chọn khác, chúng tôi đảm bảo rằng đó là tùy chọn đầu tiên trong đánh dấuBây giờ, hãy xử lý 94 nút radio và hộp kiểm 73Vì vậy, trước tiên, chúng tôi xác định xem bộ trường có dành cho hộp kiểm hoặc nút radio hay không. Sau đó, chúng tôi đặt lớp vùng chứa phù hợp và xây dựng 94. Sau đó, chúng tôi lặp lại các lựa chọn có sẵn và xây dựng một 96 cho mỗi một với một 81 và một 56Lưu ý rằng chúng tôi sử dụng phép nội suy chuỗi PHP thông thường để đặt lớp vùng chứa trên dòng 21 và để tạo một ID duy nhất cho mỗi lựa chọn trên dòng 30 mảnh vỡMột loại cuối cùng mà chúng tôi phải thêm vào hơi phức tạp hơn vẻ ngoài của nó. Nhiều biểu mẫu bao gồm các trường hướng dẫn, không phải là đầu vào mà chỉ là một số HTML mà chúng tôi cần in giữa các trường khác Chúng ta sẽ cần tiếp cận một phương pháp 19 khác, 30. Điều này cho phép chúng tôi thêm HTML tùy ý mà không cần sử dụng cấu trúc DOM 74Tại thời điểm này, bạn có thể tự hỏi làm thế nào chúng tôi tìm thấy chính mình với một đối tượng được gọi là 93, thực sự đại diện cho một phần tử tĩnh 32. Mục tiêu là sử dụng một tên biến chung cho mỗi lần lặp lại vòng lặp trường, vì vậy, cuối cùng, chúng ta luôn có thể thêm nó bằng cách sử dụng 33 bất kể loại trường thực tế là gì. Vì vậy, yeah, đặt tên cho mọi thứ là khó khănThẩm địnhAPI chúng tôi đang sử dụng vui lòng cung cấp thông báo xác thực riêng cho từng trường bắt buộc. Nếu có lỗi gửi, chúng tôi có thể hiển thị lỗi nội tuyến cùng với các trường, thay vì thông báo chung chung "rất tiếc, lỗi của bạn" ở dưới cùng Hãy thêm văn bản xác thực vào từng phần tử 75Đó là tất cả những gì nó cần. Không cần phải loay hoay với logic loại trường — chỉ cần xây dựng một phần tử có điều kiện cho mỗi trường Mang tất cả lại với nhauVậy điều gì sẽ xảy ra sau khi chúng ta xây dựng tất cả các thành phần trường? . Chúng tôi cũng có thể sử dụng cơ hội để thêm các thuộc tính phổ biến, như 37. Sau đó, chúng tôi sẽ thêm nút gửi, nút này tách biệt với các trường trong API này 76Tại sao chúng tôi kiểm tra xem 93 có đúng sự thật không? Xin chào, một biểu mẫu HTML tùy chỉnh Điểm thưởng. hàng và cộtNhư bạn có thể biết, nhiều trình tạo biểu mẫu cho phép tác giả đặt hàng và cột cho các trường. Ví dụ: một hàng có thể chứa cả trường tên và họ, mỗi trường trong một cột có chiều rộng 50%. Vì vậy, làm thế nào chúng ta sẽ thực hiện điều này, bạn yêu cầu? Phản hồi API của chúng tôi bao gồm dữ liệu lưới như thế này 77Chúng tôi giả định rằng việc thêm thuộc tính 71 là đủ để tạo kiểu cho chiều rộng, nhưng mỗi hàng cần phải là phần tử riêng của nó (i. e. không có lưới CSS)Trước khi chúng tôi đi sâu vào, hãy nghĩ về những gì chúng tôi cần để thêm hàng. Logic cơ bản diễn ra như thế này
Bây giờ, chúng ta sẽ làm điều này như thế nào nếu chúng ta nối các chuỗi? . Loại “chuỗi HTML đảo ngược” này luôn khiến tôi rất khó hiểu, vì vậy tôi chỉ có thể tưởng tượng IDE của mình cảm thấy thế nào. Và điều tuyệt vời nhất là nhờ có các thẻ mở tự động đóng của trình duyệt, một lỗi đánh máy duy nhất sẽ dẫn đến hàng triệu 96 lồng nhau. Cũng giống như niềm vui, nhưng ngược lạiVậy cách có cấu trúc để xử lý việc này là gì? . Trước tiên, hãy thêm theo dõi hàng trước vòng lặp của chúng ta và xây dựng một phần tử vùng chứa hàng bổ sung. Sau đó, chúng tôi sẽ đảm bảo nối từng vùng chứa 74 vào 75 của nó thay vì trực tiếp vào 76 78Cho đến nay, chúng tôi vừa thêm một 96 khác xung quanh các trường. Hãy xây dựng một phần tử hàng mới cho mỗi hàng bên trong vòng lặp 79Tất cả những gì chúng ta cần làm là ghi đè đối tượng 75 dưới dạng một phần tử DOM mới và PHP coi nó như một đối tượng duy nhất mới. Vì vậy, ở cuối mỗi vòng lặp, chúng tôi chỉ thêm bất kỳ giá trị nào của 75 hiện tại - nếu nó vẫn giống như trong lần lặp trước, thì biểu mẫu được cập nhật; Chúng ta sẽ đi đâu từ đây?Các biểu mẫu là một trường hợp sử dụng tuyệt vời cho việc tạo khuôn mẫu hướng đối tượng. Và khi nghĩ về đoạn mã đó từ WordPress Core, một lập luận có thể được đưa ra rằng các menu lồng nhau cũng là một trường hợp sử dụng tốt. Bất kỳ tác vụ nào mà việc đánh dấu tuân theo logic phức tạp đều là ứng cử viên sáng giá cho phương pháp này. 19 có thể xuất bất kỳ XML nào, vì vậy bạn cũng có thể sử dụng nó để tạo nguồn cấp RSS từ dữ liệu bài đăngĐây là toàn bộ đoạn mã cho biểu mẫu của chúng tôi. Vui lòng điều chỉnh nó với bất kỳ API biểu mẫu nào mà bạn thấy mình đang xử lý. Đây là tài liệu chính thức, rất hữu ích để hiểu về API có sẵn Chúng tôi thậm chí còn chưa đề cập đến việc 19 có thể phân tích cú pháp HTML và XML hiện có. Sau đó, bạn có thể tra cứu các phần tử bằng API XPath, tương tự như 702 hoặc 703 trên Node. js. Có một chút đường cong học tập, nhưng đó là một API siêu mạnh để xử lý nội dung bên ngoàiSự thật thú vị. Các tệp Microsoft Office kết thúc bằng 704 (e. g. 705) là các tệp XML. Đừng nói với bộ phận tiếp thị, nhưng có thể phân tích tài liệu Word và xuất HTML trên máy chủĐiều quan trọng nhất là hãy nhớ rằng tạo khuôn mẫu là một siêu năng lực. Có thể xây dựng đánh dấu phù hợp cho tình huống phù hợp có thể là chìa khóa cho một UX tuyệt vời |