CSS có phải là DOM không?

Ghi chú. Blog này có một video đi kèm có sẵn tại kênh YouTube của tôi tại đây. . Nếu bạn là người học bằng âm thanh và hình ảnh nhiều hơn hoặc nếu bạn chỉ muốn xem mã khi nó được viết, hãy xem tại đây. Cảm ơn

Mục đích chính của phát triển web giao diện người dùng là có thể tạo kiểu, kiểm soát và thao tác những gì chúng ta thấy trên màn hình thiết bị của mình. Nói cách khác, có thể thao tác Mô hình đối tượng tài liệu hoặc DOM. DOM đề cập đến giao diện lập trình cho tài liệu HTML và XML, biểu thị tài liệu dưới dạng các nút và đối tượng để ngôn ngữ lập trình có thể kết nối với trang

Có lẽ nói một cách đơn giản hơn, một trang Web là một tài liệu, vì vậy khi chúng ta đề cập đến Mô hình đối tượng tài liệu, chúng ta chỉ đề cập đến một giao diện cho phép chúng ta thao tác với tài liệu này bằng CSS, JavaScript hoặc bất kỳ ngôn ngữ kịch bản nào bạn chọn. Chúng ta sẽ sử dụng JavaScript để tương tác và thao tác với DOM bằng các phương thức được tích hợp sẵn như querySelector, getElementById và createElement. Nhưng trước khi bắt đầu thao tác với DOM, hãy thiết lập một trang Web cơ bản với HTML để chúng ta có thứ gì đó để làm việc với. Hôm nay chúng ta sẽ xây dựng một ứng dụng trang duy nhất tạo danh sách ToDo có thể chỉnh sửa chỉ bằng JavaScript, HTML và CSS

Cơ sở của bất kỳ trang web nào là bằng HTML hoặc ngôn ngữ đánh dấu siêu văn bản. Đây là những gì sẽ xây dựng cấu trúc trang web của chúng tôi, bao gồm các thành phần của nó, liên kết đến các ngôn ngữ và kiểu kịch bản, v.v. Hiểu các yếu tố khác nhau có trong tài liệu HTML là điều quan trọng đối với kiến ​​thức cơ bản về phát triển web, vì vậy hãy tạo trang HTML của chúng tôi và chia nhỏ nội dung của nó

Visual Studio có các tính năng được tích hợp sẵn giúp tạo tài liệu HTML dạng nồi hơi nhanh chóng và dễ dàng. Tạo một tệp mới có tên là chỉ mục. html và bên trong tệp trên dòng đầu tiên, nhập '. ’. Bạn sẽ thấy VS hiển thị danh sách thả xuống và nếu chúng tôi nhấn enter, nó sẽ chọn tùy chọn đầu tiên và tự động điền vào tệp HTML cho chúng tôi

Bộ xương của HTML

Tôi muốn thảo luận ngắn gọn về một số thẻ trong tài liệu HTML, ý nghĩa của chúng và mục đích sử dụng của chúng. Nếu bạn đã quen thuộc với những kiến ​​thức cơ bản về HTML, vui lòng bỏ qua phần này. Nếu không, tôi khuyên bạn nên đọc nó để có được một nền tảng kiến ​​thức vững chắc. Chúng tôi sẽ sử dụng HTML mẫu mặc định làm ví dụ

As we can guess, the first line indicates the type of document here will be an HTML, hence DOCTYPE. Then we have our actual tags. These enclose the entire HTML document. Next we have the head tag where we will keep any metadata, or data about the the HTML, it is not displayed. Notice the meta tags. The first sets the charset or set of characters to use. The next scales the viewport to equate to the device it is displaying on, then the title, which we can change later if we want.

Chúng tôi sẽ thực hiện một số điều chỉnh đối với HTML và thêm một số thẻ để đạt được mục tiêu mong muốn của chúng tôi, đó là tất nhiên để tạo ứng dụng ToDo. Chúng tôi sẽ thêm một tập lệnh, nhãn, đầu vào, nút, div và các thẻ danh sách không có thứ tự, như được thấy bên dưới

Lưu ý khi tải JavaScript

Thẻ script được sử dụng để tham chiếu JavaScript. JavaScript có thể được viết trực tiếp trong thẻ script, nhưng ở đây chúng tôi đang liên kết một tệp script bên ngoài. Ở đây, từ khóa 'async' cho phép JavaScript tải không đồng bộ hoặc nói cách khác trong khi HTML đang tải. Điều này có nghĩa là trang HTML sẽ tự hiển thị trước khi JavaScript thực thi xong. Trong SPA này, chúng tôi chắc chắn muốn điều này để chúng tôi có thể hiển thị đường viền trang của mình cho dù tập lệnh đã được tải hay chưa (trong một ứng dụng nhỏ như thế này, gần như chắc chắn sẽ không có sự khác biệt, nhưng cách tốt nhất là thêm async). Tìm hiểu thêm về từ khóa async tại đây

Lưu ý rằng danh sách những việc cần làm không có thứ tự hiện đang trống, đó là vì chúng ta sẽ sử dụng thao tác DOM để thêm các mục việc cần làm của mình. Nếu chúng ta muốn xem ứng dụng của mình trông như thế nào cho đến nay, chúng ta có thể vào terminal và gõ

open index.html

Trang HTML của bạn sẽ được hiển thị trong trình duyệt mặc định của bạn, nhưng để thực hiện hướng dẫn này, bạn nên sử dụng Google Chrome. Cho đến nay, đây là ứng dụng của chúng tôi trông như thế nào

Tiếp theo, chúng tôi sẽ tạo logic điều khiển DOM và cung cấp chức năng cho ứng dụng của chúng tôi. Tạo một tệp có tên là chỉ mục. js. Bên trong tệp này, chúng tôi sẽ bắt đầu bằng cách viết một số mã cho phép chúng tôi tương tác với HTML của mình. CHÚNG TÔI có thể sử dụng một phương thức tích hợp có tên querySelector để tham chiếu các phần tử HTML và gán cho chúng các giá trị trong tệp JavaScript của chúng tôi. Chúng tôi gọi điều này trên đối tượng tài liệu và chuyển một đối số của một lớp hoặc id chọn, được xác định bởi một '. ’ hoặc ‘#’ tương ứng. Ví dụ

Nếu chúng tôi quay lại trình duyệt nơi HTML được hiển thị, hãy nhấp chuột phải vào trang và chọn 'kiểm tra'. Bạn sẽ thấy một bảng điều khiển bên cạnh bật lên với tab Thành phần được chọn. Đây là Công cụ dành cho nhà phát triển của Chrome và đây là một công cụ rất hữu ích mà bạn có thể sẽ sử dụng trong phần còn lại của sự nghiệp phát triển của mình. Hiện tại, chúng tôi sẽ tập trung vào bảng điều khiển, vì vậy hãy chuyển các tab từ Phần tử sang Bảng điều khiển. Nhấp vào nút 'Thêm' và lưu ý thông báo trong bảng điều khiển

Điều này xác nhận rằng nút của chúng tôi mà chúng tôi xác định trong HTML được liên kết trực tiếp với nút biến JavaScript. Xin chúc mừng, chúng tôi đã kết nối với DOM. Đây là một khởi đầu tuyệt vời, nhưng bây giờ chúng ta sẽ thực sự làm điều gì đó với trình lắng nghe sự kiện này, cũng như tạo một danh sách các mục việc cần làm. Đầu tiên, chúng ta có thể tạo danh sách các mục việc cần làm để bắt đầu bằng cách tạo một chuỗi các chuỗi. Sau đó, chúng tôi sẽ lặp lại hoặc 'ánh xạ' qua mảng đó với JavaScript được tích hợp sẵn. map() để hiển thị từng cái trong thẻ danh sách không có thứ tự của chúng tôi từ trước. Trong thực tế, chỉ số. tệp js sẽ trông như thế này

Làm mới trang trình duyệt của bạn bây giờ sẽ hiển thị danh sách chúng tôi đã tạo

Xử lý đầu vào

Bây giờ để kích hoạt đầu vào của chúng tôi, chúng tôi sẽ đặt một biến bằng với thẻ đầu vào đã chọn, giống như với các phần tử khác. Chúng tôi cũng sẽ sử dụng logic tương tự như vậy trong Things To Do của chúng tôi. map() bằng cách tạo một phần tử mới, thiết lập InternalText và nối thêm vào phần tử danh sách

Logic trên cho phép chúng ta lấy giá trị từ ô nhập liệu và thêm nó vào danh sách các mục cần làm. Lưu ý rằng vì chúng tôi chỉ thêm các mục này vào 'danh sách' phần tử DOM và không thêm vào mảng 'thingsToDo' của chúng tôi, nên các mục Công việc mới sẽ biến mất khi chúng tôi làm mới trang. Vì JavaScript được tải mỗi khi chúng tôi làm mới trang, mảng 'thingsToDo' sẽ luôn tự đặt lại vào danh sách được mã hóa cứng. Trong các blog trong tương lai, tôi sẽ thảo luận về dữ liệu bền vững, nhưng điều đó nằm ngoài phạm vi của blog và ứng dụng này

Đang xóa

Có một chức năng chính nữa mà chúng ta có thể đưa vào ứng dụng của mình, đó là xóa một mục Công việc sau khi nó đã hoàn thành. Đây sẽ là hành động phức tạp nhất mà chúng tôi sẽ thực hiện trong dự án này, vì vậy tôi sẽ đề cập sâu và rõ ràng nhất có thể

Trước khi chúng tôi viết bất kỳ mã nào, hãy suy nghĩ logic về cách chúng tôi có thể hoàn thành mã này. Chúng tôi cần một cách để chọn và từng mục riêng lẻ và chọn xóa mục đó và cách dễ nhất để thực hiện việc này là thêm nút 'xóa' vào từng mục Công việc. Cũng giống như cách chúng tôi tạo phần tử li hoặc 'mục danh sách' của mình, chúng tôi có thể tạo phần tử 'nút' và nối phần tử đó vào trang cho từng chỉ mục trong danh sách ThingsToDo của chúng tôi. Bằng cách thêm phần tử 'nút' mới mà chúng tôi tạo vào phần tử 'mục danh sách', chúng ta sẽ có một nút tương ứng với từng mục Công việc

Thêm chức năng vào nút là phần khó khăn. Chúng tôi sẽ thêm một eventListener vào nút xóa để lắng nghe sự kiện 'nhấp chuột' và khi được nhấp vào, nó sẽ gọi phương thức remove() tích hợp trong JavaScript trên mục Việc cần làm mới. Phương thức xóa chỉ đơn giản là xóa đối tượng khỏi DOM, cho phép chúng tôi xóa Mục Công việc không mong muốn của mình. Tất cả mã của chúng tôi sẽ trông như thế này

Nhưng một cái gì đó không hoàn toàn đúng với chức năng? . Chúng tôi có thể khắc phục điều này bằng cách lặp lại logic giống như chúng tôi đã làm bên trong ThingsToDo. map(), nhưng điều đó sẽ không KHÔ lắm. Một trong những khái niệm chính của lập trình là đảm bảo bạn DRY, hoặc Don't Repeat Yourself. Ngoài ra, một trong những khái niệm chính của Lập trình hướng đối tượng là Trừu tượng, một ví dụ về việc tạo một hàm cho một số logic lặp lại chính nó. Để biết thêm thông tin về OOP, hãy xem một trong những blog trước đây của tôi về Khái niệm cơ bản về lập trình hướng đối tượng

Vì vậy, để đạt được mã DRY này, chúng tôi sẽ sử dụng càng nhiều logic càng tốt mà chúng tôi sẽ cần phải lặp lại và tạo một chức năng riêng cho nó. Suy nghĩ về mã của chúng tôi một cách logic, chúng tôi có thể nói rằng trong cả việc thêm mục Công việc và tạo danh sách ban đầu, chúng tôi thực hiện rất nhiều logic giống nhau. Điều này bao gồm, tạo một phần tử, đặt văn bản của phần tử đó và thêm nút xóa có chức năng. Điều gì sẽ xảy ra nếu chúng ta trừu tượng hóa tất cả logic đó thành chức năng riêng của nó? . Bằng cách viết một hàm nhận chuỗi mới đó, chúng ta có thể triển khai hàm đó cả khi tải ứng dụng và khi chúng ta muốn thêm một mục Công việc mới và chỉ phải viết logic một lần

Bây giờ chúng tôi có một danh sách Công việc đầy đủ chức năng, nơi chúng tôi có thể thêm và xóa các mục. Mặc dù nó hoạt động tốt, nhưng nó không đẹp lắm. Trong blog tiếp theo của mình, tôi sẽ thảo luận về việc thêm một số CSS đơn giản để cải thiện đáng kể Giao diện người dùng hoặc giao diện người dùng của ứng dụng này và thực sự làm cho nó trở nên sống động

DOM nghĩa là gì trong CSS?

DOM và HTML có giống nhau không?

CSS có giống với JavaScript không?