DOM document

1.DOM It's the document object model （Document Object Model, abbreviation DOM）, yes W3C Organization recommended standard programming interface for handling extensible markup language . On the web , Organize pages （ Or document ） Objects are organized in a tree structure , The standard model used to represent objects in a document is called DOM.

DOM Also known as the document tree model

file ： A web page can be called a document

node ： All content in a web page is a node

Elements ： Tags in web pages

attribute ： Attributes of the tag

2. Simulate document tree structure

 

3.DOM Frequent operations

Get elements

Creating elements dynamically

Operate on elements

event

4. Why get page elements

Columns such as ： We want to manipulate a part of the page , You need to get the corresponding element of this part first , To operate

according to id Get elements

Get the element from the tag name

according to name Get elements

Get elements by class name

Get elements from selector

5. summary

getElementById()

getElementsByTagName()

getElementsByName()

getElementsByClassName()

querySelector()

querySelectorAll()

6. event

event ： Trigger - Response mechanism

Event The interface is represented in DOM Any event that happens in , Some are user generated （ Such as mouse or keyboard events ）, And the rest of it is made up of API Generate .

Three elements of the event ：

Event source ： The element that triggered the event

Event type ： How events are triggered

Event handler ： The code to execute after the event is triggered

7. Attribute operation

Properties of non form elements

Href、title、id、src、ClassName

Form element properties

value Content retrieval for most form elements (option With the exception of )

type Can get input The type of label ( Input box or check box, etc )

disabled Disable properties

checked Check the box to select Properties

selected Select properties from the drop-down menu

getAttribute() Get in line properties of label

setAttribute() Set label in line properties

removeAttribute() Remove label inline attributes

And element. Attribute distinction : The above three methods are used to obtain any in line attribute .

8. There are three ways to create elements

Document.write()

InnerHTML

Document.createElement()

9. Properties and methods of event objects

event.type Get event type

clientX/clientY All browsers support it , window position

pageX/pageY IE8 I didn't support , Page location

event.target || event.srcElement The element used to get the trigger event

event.preventDefault() Cancel the default behavior

10. Common mouse and keyboard events

onmouseup Triggered when the mouse button is released

onmousedown Press the mouse button to trigger

onmousemove Mouse movement trigger

onkeyup Keyboard key press trigger

onkeydown The keyboard key is lifted to trigger