JS DOM (Document Object model) and BOM (browser object model)

In JS, it is important to manipulate the DOM (Document object Model) object and the BOM (Browser object model) objects. Dom mainly includes the properties and methods of HTML documents, such as the operation of HTML nodes, the manipulation of CSS and the monitoring and processing of HTML events. The BOM does not include some browser-related properties and methods.

Dom Knowledge points
1. Change the elements and attributes of the page
A, the method to get the element:
document.getElementById ()
document.getElementsByTagName ()
Document.getelementsbyclassname ()
b, JS output HTML content
document.write ();
C, get and modify the contents of the element:
document.getElementById (ID). InnerHTML
document.getElementById (ID). innerhtml=new HTML;
D, get and modify the attribute values of the element:
document.getElementById (id). Attribute
document.getElementById (ID). attribute=new value;
E, add HTML tags: document.createelement
F. Add HTML text content: document.createTextNode
G, additional elements: Document.appendchild ();
H. Remove child elements from parent element: Parent.removechild (children)

2. Change the style of the page element
A. Modify CSS styles:
document.getElementById (ID). style.property
document.getElementById (ID). style.property=new style;

3. Monitoring and processing of page element events
Common events:
OnLoad: Run script when document is loaded
Onblur: Run script when window loses focus
Onfocus: Run script when window gets focus
OnChange: Run script when element changes
OnSubmit: Run script when submitting form
OnKeyDown: Run the script when you press the key
onkeypress: Runs the script when the key is pressed and released
OnKeyUp: Run the script when the key is released
OnClick: Run script when Mouse is clicked
OnDblClick: Run the script when you double-click the mouse
OnMouseDown: Run script when mouse button is pressed
OnMouseMove: Run script when mouse pointer moves
onmouseout: Run script when mouse pointer moves out of element
onmouseover: Run script when mouse pointer moves above element
OnMouseUp: Run script when the mouse button is released
Onabort: Run script when abort event occurs

BOM Knowledge points
A, window
window.open (): Open a new window
Window.close (): Close the current window
Window.moveto (): Move the current window
Window.resizeto (): Adjusts the size of the current window
b, Interior height and width of the window
Standard browser:
Window.innerheight
Window.innerwidth
For Internet Explorer 8, 7, 6, 5:
Document.documentElement.clientHeight or Document.body.clientHeight
Document.documentElement.clientWidth or Document.body.clientWidth
C, Screen object
Screen.availwidth: Available screen widths
Screen.availheight: Available Screen height
D, Address bar object
Domain name of the Location.hostname:web host
Location.pathname: The path and file name of the current page
Location.port: Port of Host (80 or 443)
Location.protocol: The Web protocol used (HTTP///https://)
History.back (): Same as clicking back button in browser
History.forward (): Same as clicking the button in the browser forward
E, the information that the browser comes with
Navigator.appversion: Browser version
Navigator.platform: Browser Platform
Navigator.useragent: Browser user-agent Header

F, Timer-related
SetInterval () and clearinterval interval for a few seconds loop execution/purge timer
SetTimeout and Cleartimeout () interval seconds (single)/clear timer

Tags: JS Development
Source: JS DOM (Document Object model) and BOM (browser object model)

JS DOM (Document Object model) and BOM (browser object model)