1.BOM Overview Browser Object modal: The browser object model. Browser object: Window object. The Window object is automatically created each time <body> or <frameset> appears. Window Top-level parent class--Child: History Location Navigator-screen 2. Window's Properties innerheight: Height of the document display area, excluding the height of the toolbar's menu bar Innerwidth:ie does not support the general notation of excluding scroll bars: var x =window.document.body.clientwidt H//Document display width var y = document.body.clientheight//height of document display Outerheight:var x =window.document.body.outerheight ; Outerwidth:var y =window.document.body.outerwidth;self: The same as the Window object parent: Is the object that opens the Windows, the important opener: Is the parent window object that opens the window, Important 2 cases Use Opener:1. Page 2 opened with the Winodw.open () method. Hyperlink (the target property inside is set to _blank) 2 cases using the Parent:1.iframe frame 2.frame frame frames[ ]: Array type, a collection of window objects that represent child windows, which can be indexed by frames[to the Window object of the Subwindow. Example: Parent-child window cross-reference. The open method is a page that opens. dialog box: 1) message box alert (); 2) Confirm box confirm (); 3) input box prompt (); Timer: setTimeout, setinterval Timer: 1.setTimeout (): Call only 1 times 2.setInterval (): Call 1 times every time 3. History object A. Forward () Advance B. Back () Backward C. Go (n) positive number is forward,Negative numbers are backwards. 4. Location object. 1.href properties: Refers to the Close method of the window.location.href= ' Demo_window object to which you want to connect to another URL. html '; two, window.location= ' Demo_ The Close method of the Window object. html '; 2.reload method: Refresh the notation: Window.location.reload (); 5. Common Events * Events (mastering, understanding the timing of each event) mouse movement event * OnMouseMove ( Event): The mouse move incident is an event object. Fixed name * onmouseover: Mouse hover event Mouse Hover event: This occurs when the mouse moves over a control: writing this in that tag represents the tag object this.style.backgroundColor: When a property in a style sheet is called, it should be removed if there is a horizontal bar in the middle of the property. Example: When the mouse moves to the P tab, the P tag changes style (see Demo01_ mouse hover event. html) * onmouseout: Mouse out event Mouse move event: When the mouse moves away from the control, see the example (Demo_02_ mouse-over event. html; * Mouse Click event onclick: An example occurs when the mouse clicks a control: When the button is clicked, the string "crown texted" is displayed in <p> see (demo03_ mouse click event. html) <script>function init () {btn1.onclick=function () {//To BTN1 button register a click event var img = document.getElementById ("img"); img.style.display= "None"; This.disabled= "true";//the button is set to non-clickable, gray, this represents btn1}btn2.onclick=function () {var img = document.getElementById ("img"); img.style.display= "block";//call CSS style with style or directly with the property var btn1 = document.getElementById ("btn1"); Btn1.removeattribute (" Disabled ");//Delete Btn1 property}function Fun (obj) {obj.value = "Sina";} function Add () {var add = document.getElementById ("add");//Call HTML with innerhtmladd.innerhtml= " ';} function Remove () {var btn3 = document.getElementById ("Btn3"); Btn3.removeattribute ("onclick");}} </script>
JS Note 02