What is "DOM" in javascript?? ๐คจ
The DOM is an abstract model that defines the interface between HTML documents and application programs. An API
What I understand is that HTML properties can be used as values in Javascript. In this picture, we can see the "type" and "address" are the values in Javascript.
There is the picture like tree to represent the structure of DOM:
I can see the inheritance between properties. For example, "<meta>" and "<title>" are inherited to <head>.
So, the Document Object, the DOM document object, is the root JavaScript object representing the entire HTML document. It is globally accessible via document object reference.
- Properties
- var a = document.URL;
- Methods
- Selection methods
- Family manipulation methods
- Event methods
Here is the important concept to represents an HTML element. It is Element Node.
Here are the properties:
- classList
- className
- innerHTML
- style
So, what we want to do???๐
Select the node and change it!
There are the two methods I learned:
1. Selection Methods
- getElementById("id")
- getElementsByClassName("name")
- getElementsByTagName("name")
So, we can use the tag names and class names in javascript. We can pass the class name, tags, and ids.
Here is another method
2. Query Selection Methods
- querySelector()
- querySelectorAll()
The thing is that HTML and javascript is pretty connected each other. There are so many methods to handle HTML codes in Javascript.
I should care about which method I should use to select specific id, class or tag.
'Web Programming ๐ > Front-End ๐ฆธ๐ปโโ๏ธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| Javascript Event Object, Apr/10/2023 (0) | 2023.04.11 |
|---|---|
| Javascript Events, Apr/08/2023 (0) | 2023.04.09 |
| Javascript Event Handling, Apr/5/2023 (0) | 2023.04.06 |
| Position of Elements, DOM family in Javascript, Apr/5/2023 (0) | 2023.04.06 |
| Modify DOM in Javascript, Apr/4/2023 (0) | 2023.04.05 |
