Day30 JS notes BOM and DOM 2021.09.24

javaScript Three major components ：DOM、BOM、ECMAScript

ECMAScript： Basic grammar 、 data type 、 Variable 、 Operator ...

BOM：Browser Object Model Browser object model , Provides a set of methods for operating the browser , The object is Window;

BOM To get the size of the browser window （window Omission , The unit is px, Only read , Cannot be modified ）

Method 1：( Include scroll bar )

- Height of browser window window.innerHeight

- The width of the browser window window.innerWidth

Method 2：( No scrollbars , The size of the scroll bar needs to be recalculated ,document Represents a document object ,document.documentElement Express html file )

- document.documentElement.clientWidth

- document.documentElement.clientHeight

Browser pop-up layer ：alert、prompt、confirm

Browser address bar Method ：

- window.location.href = ' Jump to address ' Opening the current page will automatically jump to the new address

- window.location.reload(true) Parameters can be chosen The current page is always loaded ( Don't write in the overall situation )

- window.location.search Find the carrying parameters in the address bar

Browser history Method ：（ There must be a click to jump operation ）

- history.back() function -- One page back

- history.forward() function -- One page ahead

- history.go( The number ) function -- Forward or backward specified number of pages （ Negative numbers go back , Forward in positive numbers ）

Browser version information Method ：

window.navigator Record some information about the browser

Browser Events Method ：

1.load Express loading , When all the contents in the page are loaded, execute （ It is suggested to write at the bottom of the page , The code is executed in sequence ）

2.scroll This event will be triggered when the browser scroll bar scrolls ( common )

3.resize This event will be triggered when the browser window changes

- In the label , Think of events as attributes of tags οnclick=" function ()"

- binding id id. event = function(){}

- window.onXXX( Event name ) = function(){}

The distance between the scroll bar and the browser ：（ There's a compatibility problem ）

- Distance from top document.documentElement.scrollTop

- Distance from left side document.documentElement.scrollLeft 

Compatible writing :

- document.documentElement.scrollTop || document.body.scrollTop

- document.documentElement.scrollLeft || document.body.scrollLeft

Screen size screen

- window.screen.width/height Width height initial small

- screen.availWidth/Height Usable Visual range

Timer ：window.setInterval(function(){ Code snippet to execute }, Number of milliseconds )

- After the timer runs, it can be cleared manually clearInterval( The name of the timer / Return value of timer )

Time delayer ：setTimeout( function , Number of milliseconds )

-  Clear the delayer clearTimeout()

DOM：（ be based on document）document object model Document object model

Common acquisition dom Structural approach : document. Method

- According to... In the label id Property acquisition document.getElementById('id Name ')

- Get... According to the class name in the tag document.getElementsByClassName('class Name ')

- Get... According to the tag name document.getElementsByTagName(' The tag name ')

- according to name Property acquisition document.getElementsByName('name Name ')

A simple and easy way to get (css Selector mode )

- document.querySelector('css Selectors ') Get the first one that meets the condition

- document.querySelectorAll('css Selectors ') Get all that meet the conditions

 dom Attribute operation ：

- increase : dom Elements .setAttribute(' Property name ',' Property value ')

- Delete : dom Elements .removeAtttribute(' Property name ')

- Change : dom Elements .setAttribute(' Property name ',' Property value ')

- check : dom Elements .getAttribute(' Property name ')

dom Get content ：

1.dom Elements .innerHTML = ' Imported values '    （ Get the text in the structure , Text can be set , Resolvable tags ）

2.dom Elements .innerText        （ Get the text in the structure , Text can be set , Unresolved tags ）

3.dom Elements .outerHTML      （ You can get the text in the structure but have labels , Text can be set , Resolvable tags ）

  Operation of class name ： adopt js Add a class name to the tag

- dom Elements .className = ' Class name ' add to

- dom Elements .className = '  ' Delete

Element style operation ： adopt js Add attributes and attribute values to elements

- If css Attribute only has one English word , With the help of the acquisition method of the object ：dom Elements .style.css attribute = 'css Property value '

- If css Attribute has more than one English word ：

- dom Elements .style.css Attribute hump naming = 'css Property value '

- dom Elements .style['css attribute '] = 'css Property value '

  Operation of form elements ：

- Get the values in the form dom Elements .value