JavaScript Webapi Review (i)

/*
*
* JavaScript is divided into three sections:
* 1. ECMAScript standard----JS basic syntax
* 2. Dom:document Object Model Document objects
* 3. BOM: Browser Object Model
*
* DOM function: Manipulate the elements of the page
* DOM tree: The HTML page or XML file as a document, the document is an object, this document all the tags are elements, elements can also be seen as objects, tags (elements, objects) There are many, there are nested relationships, the composition of this hierarchy, can be modeled as a tree chart, abbreviated: Tree, is the DOM tree
*
* get elements:
* 2 ways:
* Retrieve elements from an entire document by ID---return an element object
* document.getElementById (the value of the id attribute)
* Gets the element based on the name of the tag-----Returns a pseudo-array of element objects
* document.getElementsByTagName (" Name of the label ");
* Manipulate the properties of the base tag
* Src,title,alt,href,id Property
* Manipulate the properties of the form label
* name,value,type,checked,selected,disabled, ReadOnly the
* element's style action
* object. Style. property = value;
* object. classname= value;
*
* action to add event to element
* Event: Just one thing, with event source, trigger and response
* * This keyword----If this is used in the event of the current element, then this is the current object
*
*
* Built-in object: System-brought object
* Custom object: Object written by yourself
* Browser object:
* DOM
* DOM object:-------> Object obtained by Dom method
*
* element: element: Label on page
Node: nodes: All content in the page, tags, attributes, text
* root element: The top-level object in the HTML tag
* Page---:d ocument
*

* Block hyperlink Default Jump event: return false;
* How to get elements
* Get elements by ID
* document.getElementById ("Value of id attribute");
* Get elements based on tag name
* document.getElementsByTagName ("Name of the label");
*
*
* Some browsers do not support, ie lower version of the browser does not support, IE8 the following
* Gets an element based on the value of the Name property
* Document.getelementsbyname (the value of the "name attribute");
* Get elements based on class-style names
* Document.getelementsbyclassname ("class-style name");
* Get elements based on selectors
* Document.queryselector ("selector"); Returns an object
* Eradicate selector get element
* Document.queryselectorall ("selector"); Returns an array, consisting of multiple elements
*
* How to style elements
* object. Style. property = value;
* object. classname= value;
*
*
* Compatibility issues with innertext and textcontent
* Current browsers support innertext, should be the standard of IE
* Textcontent itself is Firefox support, IE8 does not support
*
* The difference between innertext and innerHTML
* can set the text content of the label, if you want to set the label and content recommended to use innerHTML
* If you want to get the text in the label, InnerText, you can also use innerHTML
* If you want to get a label, there is also text---InnerHTML
*
* Actions for custom attributes
* Custom attributes: The tag does not have this attribute, in order to store the data, the programmer added the property
* Custom properties cannot be obtained directly from the DOM object or set
* Object. getattribute ("Custom attribute name"); Gets the value of the custom property
* Object. SetAttribute ("attribute name", "value"); Set custom properties and values
* Remove Custom attributes
* Object. RemoveAttribute ("Name of the attribute");
*

*
Node
* Node: All the contents of the page are nodes (tags, attributes, text: text, spaces, newline)
* Documents: Top-level objects in document---page
* Elements: All tags on the page, tags---elements--object (by Dom way to get this tag, get this object, this object is called Dom object)
* Node Properties: function: In order to obtain many nodes in the future, we get the tags (elements) in the nodes, identify the tag elements in the nodes.
* Node type: 1 tag node, 2 attribute node, 3 text node
* NodeType: node type, 1---tag node, 2----attribute node, 3---text node
* NodeName: Tag node--Uppercase tag name, attribute node---lowercase attribute name, text node---#text
* NodeValue: Label---null, value of property---property, text---text content
* IF (node.nodetype==1&&node.nodename== "P")
*
* Get the code for nodes and elements (below)
*
*
*
* Creation of elements
* Three ways to create elements
* 1. document.write ("Tag code and content"); If the element is created after the page has finished loading. The contents of the page will be wiped out.
* 2. The parent object. Innerhtml= "tag code and content";
* 3. Document.createelement ("tag name"); Get an object,
* Parent element. appendchild (child element object);
* Parent element. Inerstbefore (New child object, reference child object);
* Remove child elements
* Parent element. RemoveChild (The child element object to be killed);
*
* Event Binding: Bind multiple identical events for the same element
* Three different ways:
* 1. Object. On Event name = event handler if multiple identical events are registered in this way, the last one executes, before the IS overwritten
* my$ ("btn"). Onclick=function () {};
* 2. Object. AddEventListener ("No event name on", event handler, false);
* my$ ("btn"). AddEventListener ("click", Function () {},false);
* 3. Object. Attachevent ("event name with on", event handler function);
* my$ ("btn"). Attachevent ("onclick", function () {});
*

Three ways to bind an event to an element:
* 1.
* Object. On event type = event handler function;
* 2.IE8 not supported
* Object. AddEventListener ("Event type not on", event handler, false);
* 3. Google and Firefox do not support
* Object. Attachevent ("Event type with on", event handler function);
*
* Three ways to unbind events for an element:
* 1.
* Object. on event type =null;
* 2.
* Object. RemoveEventListener ("Event type not on", event handler name, false);
* 3.
* Object. DetachEvent ("Event type with on", event handler function);
*
* Event Bubbling: element A has element B, all have the same event, the event of the element inside is triggered, and the event of the outer element is triggered. Can be multiple elements nested
*
* Block Event bubbling:
* Two types of
* 1.
* E.stoppropagation (); E---Event Parameter object, both Google and Firefox support, IE8 does not support
* IE8 and Google support
* WINDOW.EVENT.CANCELBUBBLE=TRUE;
*
* Window.event is the event parameter object----E is the same
*
* Bom:browser Object Model Explorer---action browser
* Historical record of Back and forward History:back () back forward () forward
* Address on Address bar Operation location href property jump page, Assgin () jump page reload () Refresh replace () method replace address on address bar, no history
* Get system and browser information for Navigator useragent properties---Get system, browser information
*
*
* On the Address bar # and back
* Console.log (Window.location.hash);
* Host name and port number
* Console.log (Window.location.host);
* Host Name
* Console.log (Window.location.hostname);
* Path to file---relative path
* Console.log (Window.location.pathname);
* Port number
* Console.log (Window.location.port);
* Agreement
* Console.log (WINDOW.LOCATION.PROTOCOL);
* Search for content
* Console.log (Window.location.search);
*
Timer
* The timer will return its own ID value
* Var timeid=window.setinterval (function, time);
* Execution process: After the page is loaded, the function is executed over a period of time, repeated, unless the timer is cleaned
* WINDOW.CLEARINTERVAL (Timer ID value); Clean timer

JavaScript Webapi Review (i)