Javascript learning materials - week2-day5

Posted by Caesar on Tue, 07 Dec 2021 05:14:30 +0100

1, window object

1.BOM   Browse object model

    In fact, it is some ability to operate the browser

            What can we do:

            - Get some browser related information (window size)

            - Operate the browser for page Jump

            - Gets information about the current browser address bar

            - Operate the scroll bar of the browser

            - Browser information (browser version)

            - Let the browser display a pop-up box (alert/confirm/prompt)

2.BOM   The core of is the window object

    window is a built-in object of the browser, which contains the methods of operating the browser

3.window core object

Common methods:


        Open a new window




    dialog box

        Alert message prompt box

        Confirm (prompt)   Message confirmation  

            Confirm and cancel, prompt message (true/false)


            Pop up the input box to receive the information you entered and return

    * Note: the window object is the root object of the browser. When using its attribute method or sub object, you can not add window

4. Timer

    Application:   We can see that there is a special effect of "picture rotation" on the home page of many websites. The picture is changed every 2s, and a timer is used here.

            Timers have a wide range of uses, such as picture rotation, online clock, pop-up advertising, etc. anything that is automatically executed is probably related to timers.

    1) setTimeout()   And   clearTimeout()


var timerId = setTimeout(function(){

                console.log('Countdown timer')




            Countdown timer

                Execute the code in the callback function at the specified time

                Return timer object

            In JavaScript, we can use the setTimeout() method to set the function called "once". clearTimeout() can be used to cancel the execution of the setTimeout() method.

    2) sentInterval()   And   clearInterval()  

        Cycle execution timer


 var timerId2 = setInterval(function(){

                console.log('Interval timer')




            Executes the code in the callback function in a specified time cycle

            In JavaScript, we can use the setInterval() method to set the function of "repeated" calls. clearInterval() can be used to cancel the execution of the setTimeout() method.

5. Browser window size

    innerHeight and innerWidth

    These two methods are used to obtain the width and height of the browser window (including the scroll bar)    

var windowHeight = window.innerHeight


var windowWidth = window.innerWidth


6. Browser scroll event (onscroll)

    This onscroll event is triggered when the browser's scroll bar scrolls

    Or mouse wheel scrolling trigger      

   window.onscroll = function(){

            console.log('The browser scrolled')


7. Browser scrolling distance

    Using the document object

    scrollTop gets the distance the page scrolls up

    Two acquisition methods:                




                window.onscroll = function(){




    Difference: when IE, Google and Firefox have DOCTYPR statements, they all use document.documentElement.scrollTop

    scrollLeft   Gets the distance the page scrolls to the left                




                window.onscroll = function(){




8. Back to the top (case)

2, history object (history)

1. Get the history object


2. Method:

        back()   Load the previous url in the history object list

        forward()   Load the next url in the history object list

        go()     Load a specific url in the history object list

        history.back() == history.go(-1)     Browser 'back'

        history.forward() == history.go(1)     Browser 'forward'


 function nextHistoryPage(){



        function preHistoryPage(){



        <a href='javascript:nextHistoryPage()'>next page</a>

        <a href='javascript:preHistoryPage()'>previous page</a>

3, Location object (location)

1. Common attribute: location.href

        Get the url address of the current page: window.location.href

2. Common methods:

        Reload the current document: location.reload()

4, DOM

1.DOM document object model

    The ability to manipulate the attributes, styles and contents of html tag elements using javascript code

2.document object (document object)

3. Operation element content

    1) Get element

        How to get elements

    2) Change element content

4. How to get elements

    getElementById('id property value ')

        The id of the tag is obtained by the id name of the tag

        The id is unique in a page, so what you get is an element


 <div id='box'></div>


                var box = document.getElementById('box')

                console.log(box)    //<div id='box'></div>


            What you get is the div tag whose id is box in the page

    getElementsByClassName('class attribute ')

        Get the class name of the tag by the class name of the tag

        Because the class names of multiple elements in the page may be the same, a group of elements is obtained

        Even if there is only one class, it also gets a group of elements, but there is only one DOM element in this group


 <div class='box'></div>


                var box = document.getElementsByClassName('box')

                console.log(box)    // [<div></div>]

                console.log(box[0]) // <div class='box'></div>


            What you get is a set of elements, a data structure that looks like an array, but not an array, but a pseudo array

            This group of data is also arranged according to the index, so you need to use the index to get this div accurately

    getElementsByTagName('tag name ')

        The name of the label is obtained by the label name of the label

        Because there may be multiple elements in the page with the same tag name, a group of elements is obtained

        Even if there is only one tag name, it also gets a group of elements, but there is only one DOM element in this group




                var box = document.getElementsByTagName('div')

                 console.log(box)    // [<div></div>]

                console.log(box[0])  // <div></div>


            Like getElementsByClassName, we get an element that looks like an array

            You must use an index to get an accurate DOM element

    getElementsByName('name attribute ')


        Is to get elements in the way of selectors

        That is, it is obtained according to the selector that writes css

        This method can only get one element and is the first element in the page that meets the condition


   console.log(document.querySelector('div'))  //Gets the first div element in the page

   console.log(document.querySelector('.box'))  //Gets the element of the first box class name in the page

   console.log(document.querySelector('#box'))   // Get the first element with id named box in the page


        Is to get elements in the way of selectors

        This method can get all the elements that meet the conditions and return them in the form of a pseudo array


 console.log(document.querySelectorAll('div'))  //Get all div elements in the page

 console.log(document.querySelectorAll('.box'))  //Get all elements with box class names in the page

            What you get is a set of arrays, and you also need to use the index to get the exact DOM elements

5. Pseudo array

    Similarities: length attribute

    difference:   Cannot use push, pop

6. Operation element content

    innerHTML   (html tag content < span > content < / span >)

            Gets the HTML structure inside the element                





      var div = document.querySelector('div')

      console.log(div.innerHTML)  //<p><span>hello</span></p>                              


            Set element content                



        var div = document.querySelector('div')

        div.innerHTML = '<p>hello</p>'


                After setting, a p element will be nested inside the div element in the page

    innerText   (plain text content)     Content)

            Get the text inside the element (only the text content can be obtained, not the html tag)              





       var div = document.querySelector('div')

       console.log(div.innerText)  //hello



            You can set the text inside the element                



       var div = document.querySelector('div')

       div.innerText = '<p>hello</p>'


                After setting, the < p > Hello < / P > will appear in the div element as a text instead of parsing P into a label

    value   Form content

Topics: Javascript Front-end ECMAScript html