DOM
Document Object Model (Document Object Model) is a standard programming interface recommended by W3C to deal with extensible markup language (HTML or XML)
Method of obtaining elements:
1. Get getElementById(‘id name ‘) by id name; Console. dir prints the returned element object, along with its properties and methods
2. Obtain the value based on the label name
The getElementsByTagName (” div “); Returns a collection of retrieved elements, stored as a pseudo-array
If the page has only one div, the pseudo-array is returned, and if the page does not have the element, the pseudo-array is returned
Gets all the children of the parent element with the specified tag name. The parent element must be a single object (the element object must be specified), excluding the parent element itself
HTML5 new for i9 + and mobile
GetElementsByClassName (‘l class name);
2. QuerySelector returns the first element object of the specified selector (querySelector). Class name or #id name, div); There must be symbols such as. Ah and # ah.
3. QuerySelectorAll () returns all collections of the specified selectors
Obtain special element (body, HTML) document. The body, the document. The documentElement / / returns the HTML element
Three elements of the event
1. Get the event source ->2. Register the event (bind event)->3.
Common mouse events
Disable the right mouse menu: ContextMenu
Disable mouse selection: selectStart
The difference between mouseEnter and mouseover:
Mouseover will fire over its own box, mouseOver its own child box will fire, because when the mouse moves over the child box, it bubbles up to get the parent box event, so it will fire, the mouseEnter will only fire over its own box, because it won’t bubble. Mouseleave also does not bubble when the mouse leaves the mouseEnter.
Operating elements
InnerText: Does not recognize HTML tags, removes whitespace and line breaks, nonstandard element.HTML: identifies HTML tags, keeps whitespace and line breaks, W3C standards these two attributes are readable and writable, and get the contents of the element
Custom property values
Node operation
ParentNode: Returns the nearest parent of a node, or null 2 if the specified node has no parent. Parentnode. childNodes-ul.childNodes; Ul. Children get all the children of ul. This is not standard but more commonly used. Ul.children [0]; ul.children[0]; Ul first child node, pseudo-array index starting from zero, ul.children[ul.children.length-1] last child node 3 of ul. NextElementSibling returns the nextSibling, containing the element node and the text node. NextElementSibling returns the nextSibling, containing the element node and the text node. PreviousElementSibling (); previousElementSibling Document.createelement (‘tagName’) Add a node node.appendChild(child) Node parent child adds the node to the end of the child list of the specified parent node. Var document.querySelector(‘ul’), ul.appendChild(li); Var lili = document.createElement(‘li’); var lili = document.createElement(‘li’); ul.insertBefore(lili,ul.children[0]) 5. Remove node node.removeChild(child), parent node 6. Copy node (cloneNode) node.clonenode () returns a copy of the node on which the method was called. Also known as clone node or copy node, the parenthesis is empty or false, shallow copy, only copies the tag but not the content inside; The parentheses are true, deep copy, copy the tag and the contents inside
1. Document.write () writes the content directly to the page content stream, but calls it again after the document stream has completed execution cause the page to be redrawn. 2. 3. Document.crarteelement () Creating multiple elements is slightly less efficient, but the structure is clearer
The event
1, traditional registration event: the use of on events such as onclick, has a unique, the same element and an event can only set one handler, AddEventListener (), which is a method above i9; I9 used to use attachEvent() to register multiple listeners for the same element and event. According to register event order eventTarget. AddEventListener (type, the listener, useCapturel []) type: the event type string, such as the click, mouseover, notice here is not to take on the listener: UseCapture: Optional argument, is a Boolean value false 2 by default. Delete events (unbind events) Tradition: Let the event =null method listen for registrations: EventTarget. RemoveEventListener (type, the listener, useCapture []) 3. DOM events flow capture phase: from the top down, Document — > HTML — > Body — >div Event bubble phase: from bottom up, div — >body — > HTML — > Document
1.e.target returns the object (element) that triggered the event. This returns the object (element) that bound the event.
Difference: e.target returns the element that clicked on it, this returns the element that tied to the click
5. Event delegation
Instead of setting event listeners individually for each child node, event listeners are set on its parent node and then influence each child node to be set using the bubbling principle
6. Mouse event object
7. Keyboard events
Keydown — >keypress — >keyup. If you use addEventListener, don’t add on
KeyCode decides to return the ASCII value of the key pressed
