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()
Open a new window
window.open("http://www.baidu.com","")
close()
dialog box
Alert message prompt box
Confirm (prompt) Message confirmation
Confirm and cancel, prompt message (true/false)
prompt()
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()
Syntax:
var timerId = setTimeout(function(){
console.log('Countdown timer')
},1000)
clearTimeout(timerId)effect:
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
Syntax:
var timerId2 = setInterval(function(){
console.log('Interval timer')
},1000)
clearInterval(timerId2)effect:
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 console.log(windowHeight) var windowWidth = window.innerWidth console.log(windowWidth)
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:
document.body.scrollTop
document.documentElement.scrollTop
window.onscroll = function(){
console.log(document.body.scrollTop)
console.log(document.documentElement.scrollTop)
}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
document.body.scrollLeft
document.documentElement.scrollLeft
window.onscroll = function(){
console.log(document.body.scrollLeft)
console.log(document.documentElement.scrollLeft)
}8. Back to the top (case)
2, history object (history)
1. Get the history object
window.history
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'
Example:
function nextHistoryPage(){
window.history.forward()
}
function preHistoryPage(){
window.history.back()
}
<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
Example:
<div id='box'></div>
<script>
var box = document.getElementById('box')
console.log(box) //<div id='box'></div>
</script>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
Example:
<div class='box'></div>
<script>
var box = document.getElementsByClassName('box')
console.log(box) // [<div></div>]
console.log(box[0]) // <div class='box'></div>
</script>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
Example:
<div></div>
<script>
var box = document.getElementsByTagName('div')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
</script>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 ')
queryselector()
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
Example:
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 pagequerySelectorAll()
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
Example:
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 pageWhat 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
<div>
<p><span>hello</span></p>
</div>
<script>
var div = document.querySelector('div')
console.log(div.innerHTML) //<p><span>hello</span></p>
</script>Set element content
<div></div>
<script>
var div = document.querySelector('div')
div.innerHTML = '<p>hello</p>'
</script>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)
<div>
<p><span>hello</span></p>
</div>
<script>
var div = document.querySelector('div')
console.log(div.innerText) //hello
</script>
You can set the text inside the element
<div></div>
<script>
var div = document.querySelector('div')
div.innerText = '<p>hello</p>'
</script>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