JS Learning Road Series summed up the five elements (this article is like the martial arts in the easy, is you gallop the IT World Martial arts heart, learn JS five big Zhenfa learned JS, Bo Master suggested to learn three before the first array)

Five Elements Zhenfa: content, attributes, styles, nodes, events "" In order to facilitate memory, reduce the use of brain memory, I named JS Heart for: Tao Zhenfa, two instruments ZHENFA, three just ZHENFA, four like ZHENFA, five elements zhenfa, just remember ZHENFA keyword, you can search the brain of the corresponding content, learn JS five Zhenfa can learn JS "

Content:

InnerHTML "Support HTML Tag"

InnerText "HTML tag not supported, index will show H1"

Value "setting and getting the contents of input"

Length "Array/string Lengths"

Property:

GetAttribute ("Attrname")

SetAttribute ("Attrname", "AttrValue")

Style:

Style "can only get inline style, set style"

function CSS (obj) {

if () {

return obj.currentstyle["StyleName"]; "//IE8 below"

}else{

Return getComputedStyle (Obj,null) ["StyleName"];

}

}

Node:

Element.nodename "can return element nodes, text nodes, etc."
Element.tagname "can only return element nodes, text nodes return undefined"
Element.nodevalue "property setting or returns the text content of the specified node"
Element.textcontent "property setting or returns the text content of the specified node"

Element.nodetype

There are three main types of nodes: element node, attribute node, text node
Node type NodeName nodeType nodevalue
element element name 1 null
Property Property Name 2 property value
Text #text 3 text content (not including HTML tags)

<div>
<p>123</p>
<p>456</p>
</div>
<script>
var div=document.queryselector ("div");
var p=document.queryselector ("P");
alert (p.nextelementsibling.innerhtml);
alert (p.nextsibling.innerhtml);//return undefined "<p>123</p><p>456</p> return <p>456 </p> "
Console.log (p.parentnode);
Console.log (p.parentelement);
Console.log (div.childnodes);//returns length=4+ element node [two P tag]+ text node [a space is a text node] "standard"
Console.log (Div.children);//return length=2= element node [two P tag] "recommended" "Wild Child"
Console.log (div.firstchild);//Return to #text
Console.log (div.firstelementchild);//Return <p>123</p>
Console.log (Div.childnodes[0].nodetype);//return 3[text node nodetype==3]
Console.log (Div.children[0].nodetype);//return 1[element node Nodetype==1]

"In order to be compatible ie8,div.firstchild.innerhtml must first be put in front"
Alert (Div.firstChild.innerHTML | | div.firstElementChild.innerHTML)

"The Firstelementchild method is compatible in modern browsers, but there is no such method in IE678

The tested children method is compatible in all major browsers, including IE678, and it also implements Firstelementchild functionality "

Parentelement/children/firstelementchild/lastelementchild/nextelementsibling/previouselementsibling "Recommended" Wild children adapt to the ability to be strong

"childnodes[even]firstchild/lastchild/nextsibling/previoussibling are whitespace text nodes" "Standard" "ie8+"

Parentnode/childnodes/firstchild/lastchild "father-son relationship" nextsibling/previoussibling "brotherhood" "for ease of memory, referred to as father and son brothers"

Event:

Mouse events

OnMouseDown events and OnMouseUp events constitute the OnClick event

OnClick when the user clicks the left mouse button
OnDblClick when the user double-clicks the left mouse button
OnContextMenu triggers when the user clicks the right mouse button to open the context menu
OnMouseDown the mouse button is pressed.
OnMouseUp mouse button is released.
onmouseover mouse moves over an element.
onMouseOut the mouse to move away from an element.
Onmouseenter fires when the mouse pointer moves over an element.
OnMouseLeave triggers when the mouse pointer moves out of the element
OnMouseMove Mouse is moved.

MouseOver and MouseEnter
The MouseOver event is triggered regardless of whether the mouse pointer passes through the selected element or its child elements.
The MouseEnter event is triggered only when the mouse pointer passes through the selected element.
Mouseout and MouseLeave
The Mouseout event is triggered regardless of whether the mouse pointer leaves the selected element or any child elements.
The MouseLeave event is triggered only when the mouse pointer leaves the selected element.

Keyboard events
OnKeyDown A keyboard key is pressed
OnKeyUp a keyboard key is released
onkeypress a keyboard key press and release

The

onresize event occurs when a window or frame is resized. The
onscroll event is triggered when the element scroll bar scrolls.
tip: Use CSS overflow style properties to create scroll bars for elements.

Form Events
Onfocus Trigger event when getting focus
Trigger event when Onblur loses focus
triggered when the Onfocusin element is about to get focus
triggered when the onfocusout element is about to lose focus
onchange triggers when content changes (<INPUT>, <keygen>, <select>, and <textarea>)
The Oninput event is triggered when the user enters.
The OnReset event is triggered after the form is reset.
The Onselect event occurs when the text in the text box is selected.
The onsubmit event is triggered when a form is submitted. Supported HTML tags <form>, <keygen>

The Oncopy event is triggered when the user copies the contents of an element.
The Oncut event is triggered when the user cuts the contents of an element.
The Onpaste event is triggered when the user pastes text into an element.

Mouse/Keyboard Event object
Property
Clientx returns the horizontal coordinates of the mouse pointer relative to the browser page when the event is triggered.
Clienty returns the vertical coordinates of the mouse pointer relative to the browser page when the event is triggered.
Screenx returns the horizontal coordinates of the mouse pointer when an event is triggered.
Screeny returns the vertical coordinates of the mouse pointer when an event is triggered.

ctrlkey returns whether the "CTRL" key is pressed when the event is triggered.
altkey returns whether "ALT" is pressed when the event is triggered.
shiftkey returns whether the "SHIFT" key is pressed when the event is triggered.
button returns which mouse button was clicked when the event was triggered.

Location returns the position of the button on the device
CharCode returns the letter code for the onkeypress Event trigger key value.
Key returns the key identifier when the key is pressed.
KeyCode returns the code for the character code of the value of the onkeypress event-triggered key, or the key for the onkeydown or onkeyup event.
Which returns the code for the character code of the value of the onkeypress event-triggered key, or the key for the onkeydown or onkeyup event.
Metakey returns whether the "meta" key is pressed when the event is triggered.
Relatedtarget returns the node associated with the target node of the event.

JS Learning Road Series summed up the five elements (this article is like the martial arts in the easy, is you gallop the IT World Martial arts heart, learn JS five big Zhenfa learned JS, Bo Master suggested to learn three before the first array)