From the large JavaScript can be divided into three parts for:
- ECMAScript standard. Here it is mainly the basic syntax of JS
- DOM. Document Object Model, is the document object model for part of the operating elements of the page
- BOM. Browser Object Model, refers to the browser object model for operating the browser section
Custom Attributes
Set custom properties: setAttribute("属性的名字","属性的值")
Gets the value of the custom property: getAttribute("属性的名字")
remove custom properties:removeAttribute("属性的名字")
Attribute node
Node: page content is all nodes ( tags, attributes, text characters, spaces, line breaks )
elements: page all labels
nodeType node types:
1 represents a tag type; attribute represents 2; 3, text
nodeName node name
tag node is uppercase tag names; attribute node is an attribute name in lower case; text node is #text
value node nodeValue
value tag node is null; attribute value of node attribute values; text node value is text
An element binding events (DOM)
1 对象.addEventListener("事件类型",事件处理函数,false)Google support Firefox, IE8 does not support
2 对象.attachEvent("有on的事件类型",事件处理函数)Google does not support Firefox, IE8 support
Unbundling event
What means should be used to bind unbundling event on what way unbundling
- Binding way:
Binding: .on Event Object Name = function () {}
unbundling: name = null event objects .on - Binding way:
Binding: Object .addEventListener ( "not on the type of event," named function, false)
unbundling: Object .removeEventListener ( "not on the event type", the function name, false) - Binding Three ways:
Binding: Object .attachEvent ( "on the type of event," named function); - bind events
unbundling: Object .detachEvent ( "on the event type" function name);
Event bubbling
Multiple levels of nested elements, these elements are registered in the same event , if the event which triggered the element, the element of the event will follow the outside trigger.
window.event is an object, IE is the standard, the parameter e is the event object is a standard Firefox, in the event parameter e IE8 browser is not present, to be compatible with it instead window.event
IE prevent the event from bubbling: window.event.cancelBubble=true
Google and Firefox stop event bubbling:e.stopPropagation()
There are three phases of the event:
1. event capture stages: from the outside
2. Event target phase: the beginning of the selection
3. event bubbling phases: from the inside out
addEventListener third parameter is the control phase of the event, by e.eventPhase this property can know the current events is what stage, if the value of this property is:
1 represents the capture phase
2 represents the target phase
3 shows the bubbling phase
The location object
On the address bar and get behind the content #: window.location.hash
obtain the host name and port number: window.location.host
get hostname: window.location.hostname
get the file path (relative path): window.location.pathname
Gets the port number: window.location.port
acquisition protocols: window.location.protocol
Get the search of content: window.location.search
set the address of the page jump:
1, location.href="http://www.baidu.com"
2, location.assign("http://www.baidu.com")
3, location.reload();//重新加载--刷新
4,location.replace("http://www.baidu.com");//没有历史记录
Forward: window.history.forward()
Back:window.history.back()
offset series:
Get element width, height, left, Top
the offsetLeft: the value of the distance left position
offsetTop: value of the distance above the location
offsetWidth: element width (with border)
the offsetHeight: High elements (with border)
scroll series
scrollWidth: the actual width of the element content (no border), if no content is broad elements
scrollHeight: actual high element content (no border), if no content is highly element
scrollLeft: left curly out distance
scrollTop: curl up out of the distance
Gets the distance from the top of the visible area of the page:
scrollTop=document.documentElement.scrollTop||document.body.scrollTop
client Series: viewing area
clientWidth: width (no border), the width of the visible area frame inside
height of the high visible area (no frame), the inner border: the clientHeight
clientLeft: left border width
the width of the upper border: clientTop
