This is the 10th day of my participation in the August More Text Challenge

☆☆☆ Consider the old and learn the new! Today learn to consolidate js content (BOM browser object model)! Come on! Do do do

Can serve as a beginner’s learning route, can refer to, learning progress is not particularly driven! Keep updating,

With their own understanding, simple and comprehensive summary of the basic knowledge points, most of the content for the vernacular content, the foundation of the foundation of the foundation to deepen understanding!

Consolidate the basic knowledge of learning JavaScript, deepen the understanding of memory, to build a solid foundation to high-rise! Come on

For more details on learning – recommended view MDN-JavaScript documentation, (little Red Book/white paper/blue book /..) Learn to advance!

Let’s get started! Take it seriously!

1, comb the knowledge learned yesterday

  • An Array of Array

    • Array manipulation:
    • Array to heavy
    • Array sort: 1. Bubble 2. Select
    • Array New function: forEach indexOf Map filter Reduce

  • String:

    Operation method:

    • charAt
    • charCodeAt
    • String.fromCharCode
    • indexOf  lastIndexOf
    • substr(start,length)  sunstring(start,end)
    • replace
    • String. The split
    • Array. The join
    • trim()
    • toLowerCase  toUpperCase

  • Math

    • random()
    • Math.ceil()
    • Math.floor() Math.round()
function rand(min, max) {
  return Math.round(Math.random() * (max - min) + min)
}
Copy the code

  • Date

    • var d1 =  new Date();

    • var d2 = new Date(“2018-09-08”);

    • Time difference: (d1.getTime()-d2.getTime()) / 1000

    • Time setting:

      d1.setDate( d.getDate() + 3 );

BOM Browser Object Model

The window object

2.1 Window object method:

The window object can be omitted from all property and method calls.

All global variables are properties of the Window object

All global functions are methods of the window object

2.2 Three pop-up dialog boxes:

  • confirm()A confirmation box pops up and clicking OK returns true and clicking Cancel returns False
  • alert()A warning box is displayed
  • prompt()An input box pops up

2.3 Two Timers:

SetInterval (task to execute, interval) Execute clearInterval() continuously

  • Usage:

    SetInterval (function(){}, interval)

  • Use 2:

    Function function name (){}

  • Use 3:

    SetInterval (” function name ()”, interval)

    SetTimeout (task to perform, interval time); The delay timer automatically stops only once

    ClearTimeout () is the same as setInterval()

  • Timer features:

    The code behind the timer executes the code inside the timer before executing it (a phenomenon called asynchrony)

var num = 10
setTimeout(function () {
  alert(num)
  undefined
  var num = 20
  alert(num)
  20
}, 1000)
alert(num)
10
Copy the code

2.4 A pop-up window:

The open(” URL “,”_blank”,” window appearance “) method returns the window object that pops up

Appearance: “width = 200; height=200; left=30; top=90”

The open() method pops up a window that can interoperate with the main window (extension)

Close () closes the window

The window.opener property gets the parent window object

3, Document object document window.document

Before you do anything, find someone.

Find page elements:

Document.getelementbyid () looks for elements that are unique

QuerySelector compatibility issues

  • GetElementsByTagName (” Tag name “) Tag name

    The element to be searched is a set (pseudo-array). The subscript must be used starting at 0, and the subscript [0] is also used when an element is found.

  • GetElementsByClassName () Class name compatibility problem “HH”

  • GetElementsByName () via the name value “qx”

  • QuerySelectorAll (CSS selector) Compatibility issue “.hh””#hh””h1”

  • The document body for the body

  • Document. The title for the title

  • Document. The search for head head

  • Document.documentelement Finding the document root is equivalent to HTML (no document.html)

4. How does JS manipulate page elements

4.1 Operation Style:

Usage:

Obj. Style. Style = valueCopy the code
obj.style.cssText = 'width:200px; height:200px; background-color:red'

obj.className = 'the name of the class'
Copy the code

4.2 Operation Attributes:

Obj. Property = value

4.3 Operation Content:

Tags:

  • InnerHTML parses HTML tags
  • innerText
  • OuterHTML manipulates the object itself (breaking the page structure) form: value

Location object Address object

5.1 Page Hopping:

location = “url”

Location. Href = “URL” set the page to jump to get the page address bar information: location.href

location.assign(“url”)

Location.replace (” URL “) replaces the content of the current page (backtracking is not possible)

5.2 Page Refresh:

location.reload()

6, history Historical record object (understanding)

Forward: history.go(1) or history.forward()

Back: history.go(-1) or history.back()

Refresh: history. The go (0)

Read more:

Review of previous updates

【 Relearn JS】 Learn every day to consolidate the foundation:

Day1: js initialization

[DAY2] Various operators,

[DAY3] Data type,

【day4】 Loop structure & Conditional statement,

【 DAY5 】 function (key),

【 DAY6 】 Scope & event

【day7】 Object & Array method summary,

[day8] String method & partial sort,

【 DAY9 】Math object & Encapsulation function,

Preview: Come on, dream chasers

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period, consolidate the foundation, early into Dachang!

It’s not easy to keep it up, and it’s not easy to keep it up. You’re great!

Calm Down & Carry On!