- The Document Object Model (DOM Model) is the standard object model and API for HTML.
- An object model for HTML defines elements as objects in an object hierarchy, properties for all HTML elements, methods for all HTML elements, and events for all HTML elemnts.
- An API for JS can add/change/remove HTML elements/attributes/events and CSS styles.
- When a web page is loaded, a browser creates a Document Object Model of the page.
- document Object has the methods listed above to access to HTML elements.
- In other words, there exists various ways to access to a specific HTML element.
- The three properties above('innerText', 'innerHTML', 'textContent') are ways to access to inner content of the HTML element.
- Besides innerText, innerHTML, textContent, we can also access to attributes such as 'src', 'style', etc.
- In the case of CSS, we can change the CSS style properties in the same way as HTML.
- Please note that since we are changing the style in JS <script>, the syntax should be written like JS, not CSS.
- We can also remove or add classes of an element, and even add or delete an element itself.
- We could use setAttribute or .class to modify or add the class of an element, but one could also use classList.add().
- We would create an element in advance, and then append that Element into a node as a child.
- There exist functions for dynamic styles to create animated effects.
- setInterval method repeatedly executes a timer function on a certain interval.
- clearInterval stops the repetitive calls of setInterval and should be passed the returned value from setInterval as the argument.
- setTimeout delays the execution of a timer function and is only executed once.
- clearTimeout prevents the function setTimeout from running.
- JavaScript Events allow scripts to respond to user interactions and modify a page accordingly.
- There exists three ways of registering Event Handlers.
- Inline model treats events as attributes of HTML elements.
- It is written inside the element itself in the <body> tag.
- Traditional model assigns the anme of the function to the event property of a DOM node.
- It is written inside the <script> tag.
- addEventListener() method is using the addEventListener() method.
- It is written inside the <script> tag.
- We should mind that the the first argument, which is the event, does not use the 'on' prefix.
- The second argument is the callback function to run.
- There exists a third argument which is the 'useCapture'.
- useCapture decides whether the event should be executed in the capturing or in the bubbling phase.
- The default value is false, which the event handler is executed in the bubbling phase.
- While the bubbling phase is the process whereby events fired on child elements bubble up to parent elements, capturing phase is the exact opposite.
- It's also possible to remove an event listener by calling the removeEventListener() with the same arguments that was passed to the addEventListener().
- The Event Object is the base class to MouseEvent and KeyboardEvent object.
- The MouseEvent object occurs when the mouse interacts with the HTML document.
- The KeyboardEvent object occurs when user presses a key on the keyboard.
- There are various types of mouse events and keyboard events.
- The order of events related to the onmousedown event is onmousedown -> onmouseup -> onclick.
- The order of events related to the onkeypress event is onkeydown -> onkeypress -> onkeyup.
- Since onkeypress is not fired for ALT, CTRL, SHIFT, ESC, it is better to use the onkeydown event instead.
- The load event handler creates an interval timer that updates a span with the number of seconds that ahve elapsed since the document was loaded.
- Like mentioned above, when using the Inline model or Traditional model, you should use "onload" and when using addEventListener() function, you should use "load".
- There exists some from related events.
- By using these events, we can add events to elements when a change occurs to them.
- Using the scroll related attributes of the window object, we can get information about height.
- window.scrollY represents how many pixels far down have the use scrolled.
- document.body.ofsetHeight represents the entire height of the page.
- To check if we have reached the bottom, we can use the code above.
'Web Programming' 카테고리의 다른 글
| AJAX & Promise & Fetch API (0) | 2021.05.06 |
|---|---|
| JavaScript Syntax(2) (0) | 2021.03.30 |
| JavaScript Syntax(1) (0) | 2021.03.28 |
| CSS Syntax(2) (0) | 2021.03.21 |
| CSS Syntax(1) (0) | 2021.03.20 |
