HTML5 Other Supplemental content---third day

Iv. DOM Extensions
1. Get elements
①document.getelementsbyclassname (' class ') gets the element through the class name, in the form of a pseudo-array.
②document.queryselector (' selector ') gets the element through the CSS selector, conforming to the 1th element of the match condition.
③document.queryselectorall (' selector ') obtains elements from a CSS selector, in the form of a pseudo-array.
2. Class name operation
①node.classlist.add (' class ') Add Class
②node.classlist.remove (' class ') to remove class
③node.classlist.toggle (' class ') switch class, have remove, none add
④node.classlist.contains (' class ') detects if there is a class
Node refers to a valid DOM node, which is a generic term.
3. Custom Attributes
In HTML5 we can customize the properties, which are in the following format data-*= "", for example
data-info= "I am a custom attribute", we can get the custom property value by node.dataset[' info '.
Node.dataset exists as an object, and when we specify multiple custom attributes for the same DOM node, Node.dataset stores the values of all custom attributes.
Suppose an element <div id= "Demo" data-name= "Itcast" data-age= "ten" >
var demo = document.queryselector (' #demo ');
1. Read the custom attribute Demo.dataset (all attributes and attribute values) or demo.dataset[' age ' (the value of the Age property)
2. Set demo.dataset[' name '] = ' web Developer '
Five, new API
1. Network Status
Window.online is called when a user is connected to a network
Window.offline called when the user network is disconnected
2. Full Screen
Node.requestfullscreen () Turn on full screen display
Document.cancelfullscreen () Turns off full-screen display and can only be closed by document
Document.fullscreen detection is currently in full screen
Full screen pseudo class selector
: Full-screen. Box {},:-webkit-full-screen {},: Moz-full-screen {}
3. File read
With the FileReader object we can read locally stored files, using the? File object to specify the files or data that you want to read. Where the file object can be from the user on a? <input>? element, the returned FileList object after selecting a file, or from a drag-and-drop operation?? DataTransfer.
Instantiate a reader: var reader = new FileReader ();
Read file Reader.readasdateurl ();
Reader.readasbinarystring ();
Reader.readastext ();
Event listener OnLoad Called when the text read is complete
Property result file Read results
4. Dragging and dragging
① drag elements: The draggable= "true" attribute is set on the page, where , <a> tags are dragged by default
② target element: Any element in the page
③ Event Monitoring: Different event listeners need to be set depending on the element type
A drag element
Ondrag is applied to the drag element, the entire drag process is called
Ondragstart is applied to the drag element, which is invoked when the drag is started, only once
The OnDragLeave is applied to the drag element, which is called when the mouse leaves the dragged element.
The ondragend is applied to the drag element, which is called when the drag is finished.
B Target Element
The ondragenter is applied to the target element and is called when the drag element enters
The ondragover is applied to the target element and is called when it is stuck on the target element.
The OnDrop is applied to the target element and is invoked when the mouse is released on the target element.
The OnDragLeave is applied to the target element and is called when the mouse leaves the target element

5. Geo-positioning
① Get current Geographic information (get once)
Navigator. Geolocation.getcurrentposition (Successcallback, Errorcallback, Options)
② duplicate access to current geographic information (multiple times)
Navigator. Geolocation.watchposition (Successcallback, Errorcallback, Options)
When the geographic information is successfully obtained, Succsscallback is called and an object position that contains the location information is returned.
Position.coords.latitude Latitude
Position.coords.longitude Longitude
Position.coords.accuracy Accuracy
Position.coords.altitude altitude
When the geographic information fails, the errorcallback is called and an error message is returned.
Optional Parameters Options object to adjust location information data collection methods
A) Enablehighaccuracy high accuracy mode true, False
b) Timeout time-out setting in MS
c) Maximumage indicates the time interval for the browser to regain location information in MS

6. Historical management
Provide Window.history, objects we can manage the history, can be used for single page application, a application, can change the page content without refresh.
①pushstate (data, title, URL) append a history record
Data object, used to store custom data, usually set to null
Title page header, basically not supported, generally set to empty
URL adds a history based on the current domain and cannot be set across domains
②replacestate (data, title, URL) is basically the same as pushstate () except that replacestate () replaces the current URL and does not increase/decrease the history.
③ Event Monitoring
The Onpopstate event, which is triggered when the current is in or out, can be read to the stored data through the event object ev.state.
7. Web Storage (Local storage)
①a, easy to set up and read
b, large capacity, sessionstorage about 5M, localstorage about 20M
C, only strings can be stored, the object Json.stringify () is encoded and stored
②window.sessionstorage
A, life cycle close the browser window
b, the data can be shared under the same window
③window.localstorage
A, permanent effect, unless manually deleted
b, can be multi-window sharing
④ Method Detailed
SetItem (key, value) to set the storage content
GetItem (key) Read storage content
RemoveItem (key) Delete stored content with key value
Clear () empties all stored content
Key (n) Gets the stored content by index value
⑤ Other
Websql, Indexdb
8. Application Cache
HTML5 we can easily build an offline (no network status) app, just create a cache manifest file.
① Advantages
A. Configurable resources that need to be cached
b, network-free applications are still available
C, local read cache resources, improve access speed, enhance the user experience
D, reduce requests, alleviate server burden
② Cache List
A plain text file that lists the resources that the browser should cache for offline access, and recommends using. AppCache as the suffix name, adding MIME types
AddType text/cache-manifest. AppCache
For example, we create a file named Demo.appcache, and then add the attribute manifest= "Demo.appcache" in the root element (HTML) of the page that needs to be applied for caching, and the path is guaranteed to be correct.
③manifest file format
A, top line write Cache MANIFEST
B, Cache: newline Specifies the static resources we need to cache, such as. css, image, JS, etc.
C, NETWORK: line feed Specifies the resources that need to be accessed online, using wildcard characters
D, FALLBACK: alternate resources When the cached file cannot be found./online.html./offline.html
When online is not replaced with offline
④ Other
B, multiple CACHE:NETWORK:FALLBACK can be specified:, no order limit
C, #表示注释, the cache will only be re-cached if the contents of the Demo.appcache file have changed or if the cache has been manually cleared.
D, Chrome can debug the Admin app cache via chrome://appcache-internals/tool and offline (offline) mode
9. Multimedia

HTML5 Other Supplemental content---third day