DOM day_ 01 (7.7) introduction and core operation of DOM

DOM: Document Object Model  Document object model

HTML CSS: The essence is JS The grammar sugar of

There are two functions of browser :

1. hold HTML and CSS This grammatical sugar writing , convert to JS The object of

2. hold JS object Render to page

One 、DOM Trees

hold HTML Code , Display in the form of diagram . It looks like a tree

• node : node. html Each element in is called a node . Because of different functions Yes Different node classification names

First time to know dom

Whole HTML, It will be parsed into document object , The content finally displayed on the browser , The essence is a JS object ,  and HTML As a grammar sugar , Only simple page configuration , Study DOM Purpose : Put aside grammar sugar , Directly operate the page itself Essential code . You can operate the page more flexibly .

DOM effect

 DOM The key role of : make up HTML Ability not possessed -- dynamic

  Purpose : Put time in id=time Print in the element of

Two 、 Element reading

1. Fixed element read

 DOM The core operation of is just two things :
     1. Find the element to manipulate -- There are many official solutions
     2. Properties of the operation element

 2.css Selector reads elements

utilize css Selectors   yes Universal solution for finding elements  

querySelectorAll: Find all the elements that meet the conditions through the selector
    // The prototype of the return value is NodeList, Is an array of classes / Pseudo array
    // however : Among them is forEach Method can be used to traverse

3、 ... and 、class operation

In actual development , There are two styles style( Use less ) and class( Use more )

By modifying the className, Change the style after the click event

classList

 classList: hold class Object after attribute encapsulation
  Its prototype has various methods , It can be operated conveniently class

1.add: increase / add to new class value

  advantage : Compared with self modification className, The use method is more safe and reliable

2.remove: Delete

3. toggle: Switch

practice

First determine the style

write in DOM,DOM The core operation of : First find the element you want to operate , Operate him

3、 ... and 、DOM Some applications of

1. Expand and hide the menu

practice

 

2. Page number indication point

summary

DOM: Document object model

HTML The essence is JS The grammar sugar of , The browser will convert it into document object ,HTML Can only bear the display of static pages ,DOM  Direct manipulation JS object , Can be made up to complete dynamic The content display of （ make up HTML The impossible ）

Its core operation is two steps :

1. Found element

（1） Find fixed elements : headbodydocumentElement-html

（2） Find by relationship

• children: All sub elements
• parentElement: Parent element
• nextElementSibling: Next brother element

（3） Search by characteristics

• id: getElementById
• Tag name : getElementsByTagName

（4） utilize css Selector search （ universal ）

• querySelector: The return value is the element
• querySelectorAll: The return value is an array of classes , Need to traverse

2. Properties of the operation element

（1）style: inline style

（2）class:

• className: Namely class Attribute Ontology
• classList: Yes class Encapsulated objects , There are many operations class Methods

（3） event : All are on The properties of the beginning

• onclick : Click event