- How to work a Window
- What is dom
- What is dom rendering
- Global scope vs local scope
- This vs self
- What is prototype
- Chrome developer tools
- Async io and nonblocking io
- Single thread
- Function and object
- Design pattern
- jQuery best practice or jQuery best performance
- Package npm, yarn
- Task runner gulp, grant
- Modularizing tools browserify, webpack
- Todo MVC
Then you can decide angular or react
What is dom?
The Document Object Model (DOM) is a programming API for HTML and XML documents that represent a web page. A web page is made of elements, or nodes, such as the html element, the body element, and paragraph elements. The DOM builds a tree-like structure of these nodes in a hierarchy where some nodes are parents, and other nodes are children, like this:
<html> (root node) <head> (child of the root node) <title></title> (child of the head) </head> <body> </body> </html>
The DOM provides an API for querying the tree and accessing objects based on their tag names, id, class names, or their relationship to other nodes in the tree. It also provides methods for adding and removing nodes, moving them to different locations in the tree, or modifying their contents.
The document is just the web page
Objects are elements
Every HTML element in the document is an object
<head></head> is an object <body></body> is an object <ul></ul> is an object <p></p> is an object
When it is created?
When a web page is loaded, the browser creates a DOM structure, that is nothing but object tree structure.
How you can use the document object?
-> Finding HTML Elements document.getElementById(id) -> Changing HTML Elements element.innerHTML = new html content -> Adding and Deleting Elements document.createElement(element) document.removeChild(element)
1.numbers 4, 9.3, -10 2.Strings "Hello world", "45" 3.Booleans true or false 4.null 5.undefined