Làm web (js06) - JS: DOM

Bài trước: Làm web (js05) - JS: Objects
----------

6 DOM


The Document Object Model (DOM) allows you to access elements of a web page and enable interaction with the page by adding and removing elements, changing the order, content and attributes of elements, and even altering how they are styled.
In this chapter, we’ll cover the following topics:

– Introduction to the DOM

– Getting elements: getElementById, getElementsByClassName, getElementsByTagName, querySelector and querySelectorAll

– Navigating the DOM

– Getting and settings an element’s attributes

– Updating the DOM by creating dynamic markup

– Changing the CSS of an element

– Our project: we’ll dynamically insert each question into the HTML

6.1 The Document Object Model


What is DOM?

The Document Object Model, or DOM for short, represents an HTML document as a network of connected nodes that form a tree-like structure.

The DOM treats everything on a web page as a node. HTML tags, the text inside these tags, even the attributes of a tag are all nodes. The HTML tag is the root node, and every other part of the document is a child node of this.

History of the DOM (p218)

6.2 Getting elements (p221)


6.3 Setting an element’s attributes (p233)


6.4 Creating dynamic markup (p237)


-----
Cập nhật: 15/12/2019
-----
Xem thêm: Làm web (js07) - JS: Event
Xem thêm: Danh sách bài học

Học làm web (58_1) - Mini project HTML CSS

Tiếp theo của: Học làm web (58) - CSS căn bản (34)
----
Mini project (hosting, domain, git, HTML, CSS)

1) Tạo tài khoản trên hệ thống remote git bất kì (github, gitlab)

2) Tạo mỗi kho chứa cho mỗi dự án nhỏ, làm được dự án nào thì push code lên remote git

3) Tạo một hosting trên internet, tạo một trang index.html, trên đó có chứa link tới từng dự án của cá nhân

4) Mini project 1. Làm theo clip để tạo ra một số website hoàn chỉnh, học thêm về bố cục (layout) của một trang web.


5) Mini project 2. Làm theo clip để tạo một website hoàn chỉnh, đơn giản


6) Xem một số nguyên tắc khi viết mã HTML, CSS


7) Sử dụng Sublime Text hiệu quả


8) Sử dụng VS Code hiệu quả


9) Mini project 3. CSS3, Layout, Flex, Responsive, Mobile First

Xem và làm theo.

https://www.youtube.com/watch?v=8gNrZ4lAnAw

Hình ảnh và mã nguồn tham khảo: https://drive.google.com/open?id=17h5l4sLiKciOQr3afqr-Fn5rBfTULBuk

Một số ý lượm được từ clip trên:

– Để làm Front-end cần học HTML, CSS, JavaScript.

– Hai code editor được nhiều người đang sử dụng là VC code và Sublime Text.

– Khai báo class và id trong HTML để CSS và JavaScript sử dụng sau này

– HTML validation

– w3schools.com là một trong những website tin cậy để tham chiếu

– Đơn vị đo tương đối (relative) và tuyệt đối (absolute) trong CSS

– CSS functions, ví dụ: background-color: rgba(0,0,0,0.4)

– CSS media queries giúp thực hiện responsive giao diện

– Học một số lệnh cd, mkdir

– Sử dụng Live server trong VS code để tự động cập nhật kết quả trên trang web khi lập trình HTML, CSS

– Cách tổ chức bố cục (layout) của một trang web

– Để ý tính ngữ nghĩa khi dùng các phần tử HTML

– Mobile first trong HTML và CSS

– Sử dụng flex

– Tạo đường xiên của một hình bằng transform: skewY()

– Cách tạo góc nhọn của một hình bằng phần tử pseudo, ví dụ: container:before

– Responsive

10) Mini project 4. Tự làm theo mẫu có sẵn:



Hướng dẫn, gợi ý:

– Xem bố cục trang web gồm mấy vùng, tên mỗi vùng, cấu trúc cha-con

Đăt outline cho phần tử body để thấy được bố cục trên trang mẫu, thấy được quan hệ phân cấp của các phần tử

– Viết HTML, và CSS cho từng vùng

Do tính chất kế thừa của CSS, nên sẽ thực hiện CSS cho các phần tử cha trước sau đó đến các phần tử con.

Một bố cục tham khảo:

<body>
    <section id="page">
        <div id="main">
            <header id="header">
                <div class="header_top"></div>
                <div class="header_mid"></div>
                <div class="header_bot"></div>
            </header>
            <section id="middle"></section>
        </div>
        <footer id="footer"></footer>
    </section>
</body>

– fontello:


-----------
Cập nhật [09/12/2019]
-----------
Xem thêm: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (59) - JS căn bản (1)