BOM:

1. Concept: Browser Object Model Browser Object Model

• Encapsulate the components of the browser into objects.

1. Form:

   • Window: Window object
   • Navigator: Browser Object
   • Screen: Display screen object
   • History: Historical Record Object
   • Location: Address Bar Object

2. Window: Window object

   1. Establish

   2. Method

      1. Methods related to pop-up boxes:
         alert() displays a warning box with a message and a confirmation button. A kind of
         confirm() displays a dialog box with a message and confirmation and cancellation buttons.

         * If the user clicks the OK button, the method returns true     
         * If the user clicks the Cancel button, the method returns false  

         prompt() displays a dialog box that prompts the user for input.
         Return value: Gets the value entered by the user

      2. Method related to opening and closing:
         ==close == Close the browser window.

         • Who calls me, who I shut down?

         ==open == Open a new browser window

         • Return a new Window s object

      3. Ways related to timers
         ==setTimeout() == Call a function or evaluate an expression after a specified number of milliseconds.

         * Parameters:
             1. js code or method object
             2. Millisecond value
            * Return value: Unique identifier used to cancel the timer

      clearTimeout() cancels timeout set by the setTimeout() method.
      setInterval() calls a function or evaluates an expression in milliseconds for a specified period.
      ==clearInterval() == Cancel timeout set by setInterval().

   ​

   1. Attributes:
      1. Get other BOM objects:
         history
         location
         Navigator
         Screen:
      2. Getting DOM objects
         document
   2. Characteristic
      • Windows objects do not need to be created and can be used directly by Windows. window. method name ();
      • Windows references can be omitted. Method name ();

3. Location: Address Bar Object

   1. Create (obtain):
      1. window.location
      2. location
   2. Method:
      • reload() reloads the current document. Refresh
   3. attribute
      • href sets or returns the full URL.

   ==case==

4. History: Historical Record Object

   1. Create (obtain):
      1. window.history
      2. history
   2. Method:
      • back() loads the first URL in the history list.
      • forward() loads the next URL in the history list.
      • Go (parameter) loads a specific page in the history list.
        • Parameters:
          • Positive Number: Several Historic Records Forward
          • Negative Number: Backward Several Historic Records
   3. Attributes:
      • length returns the number of URL s in the current window history list.

DOM:

• Concept: Document Object Model Document Object Model

  • The components of markup language documents are encapsulated as objects. These objects can be used to perform CRUD dynamic operations on markup language documents

• The W3C DOM standard is divided into three different parts:

  • Core DOM - Standard model for any structured document
    • Document: Document object
    • Element: Element object
    • Attribute: Attribute object
    • Text: Text object
    • Comment: Annotation object
    • Node: Node object, the other five parent objects
  • XML DOM - Standard Model for XML Documents
  • HTML DOM - Standard Model for HTML Documents

• Core DOM model:

  • Document: Document object

    1. Create (get): In the html dom model, you can use window s objects to get
       1. window.document
       2. document
    2. Method:
       1. Get Element objects:
          1. getElementById(): Gets the element object based on the id attribute value. id attribute values are generally unique
          2. getElementsByTagName(): Get element objects by element name. The return value is an array
          3. getElementsByClassName(): Get the element objects based on the value of the Class attribute. The return value is an array
          4. getElementsByName(): Get the element objects based on the name attribute value. The return value is an array
       2. Create other DOM objects:
          createAttribute(name)
          createComment()
          createElement()
          createTextNode()
    3. attribute

  • Element: Element object

    1. Acquisition/creation: Acquisition and creation through document
    2. Method:
       1. removeAttribute(): Delete attributes
       2. setAttribute(): Set properties

  • Node: Node object, the other five parent objects

    • Feature: All dom objects can be considered as a node
    • Method:
      • CRUD dom tree:
        • appendChild(): Adds a new child to the end of the node's list of child nodes.
        • removeChild(): Delete (and return) the specified child node of the current node.
        • replaceChild(): Replace a child node with a new node.
    • Attributes:
      • parentNode returns the parent of the node.

    ==case==

• HTML DOM

  1. Setting and Acquisition of Label Body: innerHTML
  2. Using attributes of html element objects
  3. Control element style
     1. Use the style attribute of the element to set it
        Such as:
        // Modify Style Mode 1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size--> fontSize
        div1.style.fontSize = "20px";
     2. Define the style of the class selector in advance, and set its class attribute value through the element's className attribute.

Event monitoring mechanism:

• Concept: After certain components are executed, some code execution is triggered.
  • Event: Some operations. For example: click, double-click, press the keyboard and move the mouse
  • Event Source: Components. For example, the button text input box.
  • Listener: Code.
  • Registered listener: Combines events, event sources, and listeners. When an event occurs on the event source, it triggers the execution of a listener code.
• Common events:
  1. Click Events:
     1. onclick: click event
     2. ondblclick: Double-click event
  2. Focus events
     1. onblur: losing focus
     2. onfocus: Elements get focus.
  3. Load events:
     1. onload: A page or an image is loaded.
  4. Mouse events:
     1. The onmousedown mouse button is pressed.
     2. The onmouseup mouse button is released.
     3. The onmousemove mouse is moved.
     4. Move the onmouseover mouse over an element.
     5. The onmouseout mouse moves away from an element.
  5. Keyboard events:
     1. onkeydown A keyboard key is pressed.
        
     2. One of the keyboard keys on Keyup is released.
     3. onkeypress A keyboard key is pressed and released.
  6. Selection and change
     1. The content of the onchange domain is changed.
     2. onselect text is selected.
  7. Form events:
     1. The onsubmit confirmation button is clicked.
     2. The onreset reset button is clicked.

DOM Event Binding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<img id="myImage1" src="img/off.gif"/>
</body>
<script type="text/javascript">
    function changeSrc2() {
        alert("Or me?")
    }
    var myImage1 = document.getElementById("myImage1");
    myImage1.onclick = changeSrc2;
</script>
</body>
</html>

Case lights on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lamp switch</title>
</head>
<body>
<img id="light" src="img/off.gif"/>
<script>
    /*
         Analysis:
             1.Getting Picture Objects
             2.Binding Click Events
             3.Switch pictures with each click
                 * Rules:
                     * If the light is on, switch the picture to off.
                     * If the light is off, switch the picture to on
                 * Complete with flag Tags
      */
    //Getting objects
    var light = document.getElementById("light");
    var flag = false;
    //Binding Click Events
    light.onclick = function (ev) {
        if (!flag) {
            light.src = "img/on.gif";
            flag = true;
        } else {
            light.src = "img/off.gif";
            flag = false;
        }
    }
</script>
</body>
</html>

Open a new window

<input type="button" value="click" name="bt" id="bt">

<script>
    // var flag = window.confirm("Make sure to delete! "";
    // alert(flag);
    // var a= prompt("Please enter a user name");
    // alert(a);
  var as=  document.getElementById("bt");
  as.onclick=function () {
      open("https://www.baidu.com";//Open a new window
  }

</script>

Close the newly opened window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="open" name="bt" id="bt">
<input type="button" value="Close" name="bt2" id="bt2">
<script>
    // var flag = window.confirm("Make sure to delete! "";
    // alert(flag);
    // var a= prompt("Please enter a user name");
    // alert(a);
    var as = document.getElementById("bt");
    var newWindows;
    as.onclick = function () {
        newWindows = open("https://www.baidu.com";//Open a new window
    }
    var as1 = document.getElementById("bt2");
    as1.onclick = function () {
        newWindows.close();//Close
    }
</script>
</body>
</html>

Disposable timer

    setTimeout(fun, 3000);
    function fun() {
        alert("boom")
    }

setInterval Cyclic Timer

    setInterval(fun,2000)
    function fun() {
        alert("boom")
    }

Cancel timer

    var a = setInterval(fun, 2000)
    function fun() {
        alert("boom")
    }
    clearInterval(a);

Return to home page in 5 seconds

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>automatic skip</title>

</head>
<body>
<p align="center">
    <span id="num" style="color: red">5</span>After seconds, automatically jump to the home page...
</p>
<script>
    var num1 = 5;
    var n = document.getElementById("num");
    var as = setInterval(fun, 1000)
    function fun() {
        num1--;
        if (num1 == 0) {
            location.href = "https://www.baidu.com"
            clearInterval();
        } else
            n.innerHTML=num1+"";
    }
</script>
</body>
</html>

Remove adding new nodes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        border: red solid 1px;

    }
#div1{
    width: 200px;
    height: 200px;
}
    #div2{
        width: 100px;
        height: 100px;
    }
    #div4{
        width: 100px;
        height: 100px;
    }


</style>
<body>
<div id="div1">div1
    <div id="div2">div2</div>
</div>
<br>
<br>

<br>
<a id="delete" href="javascript:void(0);"> Delete child nodes</a>
<a id="add" href="javascript:void(0);"> Add child nodes</a>
<script>
    var byId = document.getElementById("delete");
    byId.onclick = function () {
        var byId1 = document.getElementById("div1");
        var byId2 = document.getElementById("div2");
        byId1.removeChild(byId2);
    }
    /**
     *
     Hyperlink function:
     1.Can be clicked: Style
     2.Click and jump to the url specified by href
     Requirements: Retain 1 function and remove 2 functions
     Implementation: href="javascript:void(0);"
     */
    var byId_add = document.getElementById("add");
    byId_add.onclick = function () {
        var byId1 = document.getElementById("div1");
        var div3= document.createElement("div");
        div3.setAttribute("id","div4")
        byId1.appendChild(div3);
    }


</script>
</body>
</html>