[DOM] first knowledge of DOM

I've been studying recently JavaScript, I found that a lot of knowledge is learned and forgotten , This makes me feel a great frustration , therefore , I want to change my learning style , First take blogging as a record , To consolidate their own learning , Consider the past you shall know the future , Can go farther and farther . Blunt duck ~

Catalog :
1. What is? DOM?
2. Get elements
3. The basis of the event
4. Event advanced
5. Operational elements
6. Node operation
summary

One 、 What is? DOM？

Document object model （Document Object Model, abbreviation DOM）, yes W3C The Organization recommends dealing with extensible markup languages （HTML perhaps XML） Standard programming interface .

1.dom Trees

• file ： A page is a document ,DOM Use in document Express
• Elements ： All tags in the page are elements ,DOM Use in element Express
• node ： Everything in a web page is a node ,DOM Use in node Express

DOM Think of all the above as objects

Two 、 Get elements

2.1. Get page elements

3、 ... and 、 The basis of the event

3.1. Three elements of the event

• Event source —— The event is triggered by
• Event type —— How to trigger
• Event handler —— Through an anonymous function assignment

3.2. Perform the three steps of the event

1. Get the event source
2. Registration events , The binding event
3. Add event handler （ Take the form of function assignment ）

1. Registration events
1> Traditional way of registration

onclick = function() {
    }

2> Methods listen to the registration method

addEventListener(' Event type ',{
    } [ Capture ])

The third parameter defaults to or false For bubbling , If yes true Then capture

3.3. Delete event

onclick = null // Traditional way of registration 
removeEventListener(' Event type ',fn) // Commonly used 

3.4. Common mouse events

3.5. Keyboard events

notes ：keydown/keyup Case insensitive , Identify function keys
keypress Case sensitive , Can't recognize function keys

Four 、 Event advanced

4.1.DOM Flow of events

The event flow describes the order in which events are received from the page .
Events are propagated between element nodes in a specific order when they occur , This communication process is DOM Flow of events .

Three stages ：

• Capture phase
• Current target stage
• bubbling phase

4.2.DOM Flow of events 2

• Event Bubbling ：IE Put forward at the earliest , The event is received by the most specific element at the beginning , And then it goes up to DOM The process of the topmost node .
• Event capture ： Netscape first proposed , from DOM Start at the top , Then it spreads down to the receiving process of the most specific elements step by step .
• Event delegation ： principle ： Not every child node sets up an event listener alone , Instead, the event listener is set on its parent node , Then the bubble principle is used to affect the setting at each child node .

4.3. Event object

1. What is an event object ？

Official explanation ：event Object represents the state of the event , For example, the state of keyboard keys 、 Mouse position 、 Mouse button status .
Simple understanding ： After the event , A collection of information data related to an event is put into this object , This object is the event object event, It has many properties and methods .

  eventTarget.onclick = function(event) {
    } 
  eventTarget.addEventListener('click', function(event) {
    }）
  //  This  event  It's the object of the event , We also like to write  e  perhaps  evt 

1. Common event objects
   
   e.target and this The difference between ：
   this It's an event bound element , The caller of this function （ The element that binds this event ）
   e.target Is the element triggered by the event
2. Common mouse events

4. Mouse event object

3. Common keyboard events

4.4

5、 ... and 、 Operational elements

5.1. obtain 、 Modify element content

element.innerText

element.innerHTML

Difference one ： Yes HTML Identification of labels
‘ It's today ：’
innerText Don't recognize html label , Nonstandard
innerHTML distinguish html label ,W3C recommend
Difference two ： Processing of spaces and line breaks
innerText The content obtained does not contain spaces
innerHTML The obtained content contains spaces

5.2. obtain 、 Modify element styles

 element.style. Style name ( hump ) = ''

 element.className = ''

Exclusive algorithm ： If you have a set of elements , Want an element to achieve something
type , Need to use the exclusive algorithm of the loop , That is to exclude others first , then
Then set your own style .

 for(var i=0;i<a.length;i++){
    
 a[i].style.XXX = ''
 }

5.3. obtain 、 Modify element properties

element. Property name  = ''

5.4. form properties

input.value
// Ban 
input.disabled
input.type

5.5. Custom properties

element.setAttribute(' Property name ',value)
element.getAttribute(' Property name ')
// Remove properties 
element.removeAttribute(' Property name ')

5.6.[h5 newly added ][ie10 above ] data- The properties of the beginning ：

 element.dataset
 element.dataset. Property name 
 element.dataset[' Property name ']

6、 ... and 、 Node operation

6.1. Node Overview

In a general way , Nodes have at least nodeType（ Node type ）、nodeName（ The name of the node ） and nodeValue（ Node values ） These three basic attributes .

• Element nodes nodeType by 1
• Attribute node nodeType by 2
• Text node nodeType by 3 （ The text node contains text 、 Space 、 Line break, etc ）
  We're actually developing it , Node operations mainly operate on element nodes

6.2. Node level

1. Parent node

 node.parentNode 

2. Child node

 parentNode.childNodes（ standard ）
 // a key 
 parentNode.children（ Nonstandard ）
 // The following are incompatible 
 // Return to the first node 
 node.firstElementChild
 // The last node 
 node.lastElementChild
 // Returns the next sibling node of the current element  
 node.nextElementSibling
 // Returns the previous sibling element node of the current element 
 node.previousElementSibling

6.3. Operation node

document.createElement(' Tag name ') // Create element nodes dynamically 
 Parent node .appendChild( New node ) // Append child node 
 Parent node .insertBefore( New node , Some child node ) // Insert before the specified child node   Such as ul.children[0]( Append... Forward ）
 Parent node .removeChild( Child node ) // Delete child nodes   Such as ul.children[0]（ Delete the first ）
node.cloneNode( Deep copy or not ) // Clone the current node  true  Deep copy  （ label + Content ）false Or empty is a shallow copy  （ Only copy labels ）

Three kinds of dynamic creation nodes

• document.write()
• element.innerHTML
• document.createElement()
  difference ：
  **1. document.write It's a content stream that writes content directly to the page , But the document flow is finished , It causes the page to be redrawn completely

2. innerHTML It's writing content into something DOM node , It doesn't cause the page to redraw completely
3. innerHTML It's more efficient to create multiple elements （ Don't splice strings , Take the form of array splicing ）, The structure is a little more complicated
4. createElement() Creating multiple elements is a little less efficient , But the structure is clearer
   summary ： Different browsers ,innerHTML More efficient than creatElement high **

summary

About dom operation , We mainly focus on the operation of elements . It's mainly about creating 、 increase 、 Delete 、 Change 、 check 、 Attribute operation 、 Event operations .

establish

• document.write
• innerHTML
• createElement

increase

1. appendChild
2. insertBefore

Delete

1. removeChild

Change

Major changes dom Element properties of ,dom Content of element 、 attribute , Form values, etc

• Modify element properties ： src、href、title etc.
• Modify the content of common elements ： innerHTML 、innerText
• Modify form elements ： value、type、disabled etc.
• Modify element styles ： style、className

check

• DOM Provided API Method ： getElementById、getElementsByTagName Old usage Not recommended
• H5 New methods provided ： querySelector、querySelectorAll promote
• Use node operations to get elements ： Father (parentNode)、 Son (children)、 Brother (previousElementSibling、nextElementSibling) promote

Attribute operation

1. setAttribute： Set up dom The attribute value
2. getAttribute： obtain dom The attribute value
3. removeAttribute Remove properties

Event operations

Register events for elements , take Event source . Event type = Event handler

The road to learning is long , come on. ！

Picking up flowers and birds is one of the interests , According to the long road of the moon wind .—— Wan ye