First, the introduction of web API
(1) Web API is a set of browser functionality and operation of page elements provided by the browser API (BOM and DOM).
(2) API is an interface to provide for our programmers to help us achieve certain functions, we will use it, do not tangle how internal implementation.
(3) Web API is mainly aimed at providing an interface to the browser, the main target in the browser to do interactivity.
(4) Web API generally have input and output (transfer function parameters and return values), Web API are many methods (functions).
(5) API (Application Programming Interface, Application Programming Interface) is the number of pre-defined function.
Two, DOM concepts
(1) the Document Object Model Document Object Model
(2) Function: page elements for operating
Third, the query element (acquisition element)
(1) The id acquisition element objects: document .getElementByld (id name);
(2) The tags get the elements set of objects: document getElementByTagName (tag name);.
div.getElementByTagName（）；
(3) The class name acquired elements collection of objects: document.getElementsByClassName (class name);
(4) The name attribute to get the object set: document.getElementsByName ();
(5) The selector acquires: document.querySelector (selector) is acquired by a target;
document.querySelectorAll () is a set of the acquired object;
Four , Events
1, three elements : (1) Event Source: Trigger elements of the object event;
(2) Event Type: What to trigger an event;
(3) event handler: Trigger events are you doing;
2, event types : (1) click: Click event;
(2) focus: focus events;
(3) blur: lost focus event;
(4) input: receiving events form class changes;
(5) mouseover: move the mouse events;
(6) mouseout: mouse out of the event;
Five , operating element object properties
1, the non-form elements : (1) element.innerText = '' provided in the text of the label;
(2) element.innerHTML = '' of setting tab;
(3) element.src = '' set image path;
(4) element.title = '' provided the title hover image displayed on the prompt text;
(5) element.href = '' modify href attribute of a tag;
2, form elements : (1) input.value = '' disposed within a form;
(2) input.type = '' form of the type set;
(3) input.disabled = true if disabled;
(4) input.checked = true if selected;
3, the style of operation : (1) style property to set: elenment.style attribute name = '' here attribute name hump nomenclature;.
Features: setting relatively small number of styles, high weight, may receive variables;
(2) Set class name: element.className = '' will cover the original content;
Features: Comparison of the number of set patterns, the weight is not high, can not receive variables; 2019-09-14