# Selected Element way
1、getElementById()
2, getElementsByClassName ()
3、getElementsByTagName()
4, querySelector () // Returns the first selector element
5, querySelectorAll () // Returns all selector elements
# Element attribute values
1, the property value acquisition element
element. property
element.getAttribute()
2, element attribute values set
element. attribute = 'value'
element.setAttribute ( 'attribute', 'value')
3, remove the element attribute values
element.removeAttribute ( 'attributes')
# Custom property value
element.setAttribute('data-index'，'值')
element.getAttribute('data-index'，'值')
# Node operation
1, the parent node
node.parentNode
2, the child node
node.childNodes // all child nodes, including element nodes, text nodes, etc.
parentNode.children // get sub-elements common
node.firstElementChild
node.lastElementChild
3, sibling
node.nextSibling
node.previousSibling
node.nextElementSibling
node.previousElementSibling
# Create, add, delete, clone node
document.createElement('tagName')
node.appendChild (child) // added to the end of the list of child nodes of the parent element, after pseudo class corresponding to
node.insertBefore (child, specified element) added to the front // list of child nodes of the parent element, classes corresponding to the dummy before
node.removeChild(child)
node.cloneNode ()
# Registration, delete events
1, the conventional registration mode (with 'on')
element.onclick=function(){}
2. The method of listening registration mode (recommended)
eventTarget.addEventListener('click',function(){});
3, delete the traditional way (there are 'on')
eventTarget.onclick=null;
4. The method of listening deletion method (recommended)
eventTarget.removeEventListener('click',function(){});
# Flow of events
1, the capture phase: doc-> html-> body-> father-> son (top to bottom)
Bubbling phase: son-> father-> body-> html-> doc (bottom-up)
2、e.target和this
e.target return is the object ** ** trigger event
this returns ** ** binding event object
3, to prevent the default behavior
// link does not make the jump
var a=document.querySelector('a');
a.addEventListener('click',function(e){
e.preventDefalut ();
})
4, stop the event bubbling
e.stopPropagation();
5, event delegates
Principle: The event listener then set on its parent node, and then use the bubbling principle affect the settings on each child node.
var = document.querySelector site ( "site");
ul.addEventListener('click',function(e){
e.target.style.background='red';
})
6, select the text and ban ban right-click menu
document.addEventListener('selectstart',function(e){
e.preventDefalut ();
})
document.addEventListener('contextmenu',function(e){
e.preventDefalut ();
})