BOM / DOM (upper)
- Today, we start using js to manipulate html elements in browsers and pages
BOM
- BOM (browser object model): Browser 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)
- The core of BOM is window object
- window is a built-in object of the browser, which contains the methods of operating the browser
Gets the size of the browser window
-
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)
Browser pop-up layer
-
alert is a pop-up prompt box in the browser
window.alert('I am a prompt box')
-
The pop-up layer has a prompt content and only an OK button
-
After clicking the OK button, the prompt box disappears
-
confirm is to pop up a query box in the browser
var boo = window.confirm('I'm a question box') console.log(boo)
-
The pop-up layer has a query message and two buttons
-
When you click OK, you will get true
-
When you click Cancel, you will get false
-
prompt is an input box that pops up in the browser
var str = window.prompt('Please enter the content') console.log(str)
- The pop-up layer has an input box and two buttons
- When you click Cancel, you get null
- When you click OK, what you get is what you entered
Browser address information
- There is an object called location in the window
- It is specially used to store the information in the address bar of the browser
location.href
-
location.href this attribute stores the url address information in the browser address bar
console.log(window.location.href)
- Will encode the Chinese programming url format
-
location.href can also be assigned to it
window.location.href = './index.html' // This page will jump to the address you gave later
location.reload
-
The location.reload() method will reload the page again, which is equivalent to refreshing
window.location.reload()
- Note: do not write in the global, otherwise the browser will always be in the refresh state
Browser history
- There is an object called history in the window
- It is specially used to store history information
history.back
-
history.back is used to return the history, that is, to return to the previous page, which is equivalent to the history on the browser ⬅️ Button
window.history.back()
- The premise is that you must have a previous record, or you will not go back even if you have been on this page
history.forword
-
history.forword is to go to the next history record, that is, to the next page, which is equivalent to the page on the browser ➡️ Button
window.history.forward()
- The premise is that you have had a fallback operation before, otherwise you are now the last page and there is no next page
Browser version information (understand)
- There is an object in the window called navigator
- It is specially used to obtain browser information
navigator.userAgent
-
navigator.userAgent is the overall information of the browser obtained
console.log(window.navigator.userAgent) // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
navigator.appName
-
navigator.appName gets the name of the browser
console.log(window.navigator.appName)
navigator.appVersion
-
navigator.appVersion gets the version number of the browser
console.log(window.navigator.appVersion)
navigator.platform
-
navigator.platform obtains the operating system of the current computer
console.log(window.navigator.platform)
onload event for browser
-
This is no longer an object, but an event
-
It is executed after all resources on the page are loaded
window.onload = function () { console.log('The page has been loaded') }
Write js in the head in the html page
<html> <head> <meta charset="UTF-8" /> <script> // When this code is executed, the body has not been loaded // At this time, we can't get the div in the body // You need to use the window.onload event window.onload = function () { // This function will be executed after the page is loaded // Then, when the DOM elements of the page have been loaded, we can get the div } </script> </head> <body> <div></div> </body> </html>
Write js at the end of the body in the html page
<html> <head> <meta charset="UTF-8" /> </head> <body> <div></div> <script> // When this code is executed, the body has been loaded // You can get the div here. It doesn't matter whether you write window.onload or not window.onload = function () { // This function will be executed after the page is loaded // Then, when the DOM elements of the page have been loaded, we can get the div } </script> </body> </html>
onscroll event for browser
-
This onscroll event is triggered when the browser's scroll bar scrolls
-
Or start when the mouse wheel rolls
window.onscroll = function () { console.log('The browser scrolled') }
- Note: the premise is that the height of the page should exceed the window of the browser
Browser scrolling distance
- The content in the browser can be scrolled, so we can get the scrolling distance of the browser
- Think about a question?
- Did the browser really scroll?
- In fact, our browser doesn't scroll. It's always there
- What is rolling? This is our page
- So, in fact, the browser didn't move, but the page went up
- Therefore, this is not simply the content of the browser, but the content of our page
- So instead of using the window object, you are using the document object
scrollTop
-
Gets the distance the page scrolls up
-
There are two acquisition methods
- document.body.scrollTop
- document.documentElement.scrollTop
window.onscroll = function () { console.log(document.body.scrollTop) console.log(document.documentElement.scrollTop) }
- Both get the distance the page scrolls up
- difference:
- Internet Explorer
- When there is no DOCTYPE declaration, use either of these
- When there is a DOCTYPE declaration, only document.documentElement.scrollTop can be used
- Chrome and FireFox
- When there is no DOCTYPE declaration, use document.body.scrollTop
- When there is a DOCTYPE declaration, use document.documentElement.scrollTop
- Safari
- Do not use either. Use a separate method window.pageYOffset
- Internet Explorer
scrollLeft
-
Gets the distance the page scrolls to the left
-
There are also two ways
-
document.body.scrollLeft
-
document.documentElementLeft
window.onscroll = function () { console.log(document.body.scrollLeft) console.log(document.documentElement.scrollLeft) }
-
The difference between the two is the same as the previous scrollTop
-
timer
- In js, there are two kinds of timers, countdown timer and interval timer
Countdown timer
-
Count down how long it takes to execute the function
-
Syntax: setTimeout (function to be executed, how long will it be executed later)
-
The function will be executed after the time you set
var timerId = setTimeout(function () { console.log('I did') }, 1000) console.log(timerId) // 1
- Time is calculated in milliseconds. 1000 milliseconds is 1 second
- Therefore, the function will be executed 1 second after the page is opened
- If you only execute it once, you won't execute it anymore
- The return value is the number of timers in the current page
Interval timer
-
How often is the function executed
-
Syntax: setinterval (function to be executed, interval time)
var timerId = setInterval(function () { console.log('I did') }, 1000)
- As before, the time is calculated in milliseconds
- The function is executed every 1 second
- As long as it is not closed, it will be executed all the time
- The return value is the number of timers in the current page
Return value of timer
-
When setting the timer, its return value is part of setTimeout and setInterval
-
As long as there is a timer, it is a number
var timerId = setTimeout(function () { console.log('Countdown timer') }, 1000) var timerId2 = setInterval(function () { console.log('Interval timer') }, 1000) console.log(timerId) // 1 console.log(timerId2) // 2
off timer
-
We just mentioned a timer ID, which means that this timer is the first timer on the page
-
This timerId is the number used to turn off the timer
-
We have two ways to turn off the timers clearTimeout and clearInterval
var timerId = setTimeout(function () { console.log('Countdown timer') }, 1000) clearTimeout(timerId)
- When off, the timer will not be running
var timerId2 = setInterval(function () { console.log('Interval timer') }, 1000) coearInterval(timerId2)
- After shutdown, the timer will not execute
-
In principle
- clearTimeout close setTimeout
- clearInterval close setInterval
-
But in fact, they can be used in general. They can be mixed
var timerId = setTimeout(function () { console.log('Countdown timer') }, 1000) // Turn off the countdown timer clearInterval(timerId) var timerId2 = setInterval(function () { console.log('Interval timer') }, 1000) // Turn off interval timer clearTimeout(timerId2)
DOM (upper)
- DOM (document object model): Document Object Model
- It's actually some ability to manipulate tags in html
- What can we do
- Get an element
- Remove an element
- Create an element
- Add an element to the page
- Bind some events to the element
- Gets the properties of the element
- Add some css styles to the element
- ...
- The core object of DOM is the docuemnt object
- document object is a built-in object in the browser, which stores various methods specially used to operate elements
- DOM: the tag in the page. After we get it through js, we will call this object DOM object
Get an element
- Get the tags in the page through js code
- After we get it, we can manipulate these tags
getElementById
-
getElementById gets the tag by its id name
-
Because the id is unique in a page, what you get is an element
<body> <div id="box"></div> <script> var box = document.getElementById('box') console.log(box) // <div></div> </script> </body>
- What you get is the div tag with id box in the page
getElementsByClassName
-
getElementsByClassName is the name of the class that used the tag to get the tag
-
Because the class names of multiple elements in the page may be the same, a group of elements is obtained
-
Even if you get only one class, you also get a group of elements, but there is only one DOM element in this group
<body> <div calss="box"></div> <script> var box = document.getElementsByClassName('box') console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script> </body>
- What you get is a set of elements, a data structure that looks like an array, but it is not an array, but a pseudo array
- This group of data is also arranged according to the index, so we need to use the index to get the div accurately
getElementsByTagName
-
getElementsByTagName is the name of the tag used to get the tag
-
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 is also a group of elements, but there is only one DOM element in this group
<body> <div></div> <script> var box = document.getElementsByTagName('div') console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script> </body>
- Like getElementsByClassName, we get an element that looks like an array
- You must use an index to get an accurate DOM element
querySelector
-
querySelector gets elements in the form of selectors
-
In other words, it is obtained according to the selector when we write css
-
This method can only get one element, and it 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(docuemnt.querySelector('.box')) // Get the first element with box class name in the page console.log(document.querySelector('#Box ') / / get the first element with id box in the page
querySelectorAll
-
querySelectorAll gets elements in the form 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(docuemnt.querySelectorAll('.box')) // Get all elements with box class names in the page
- What you get is a set of data, and you also need to use the index to get each DOM element accurately
Operation properties
- After we get the tags in the page through various ways of getting elements
- We can directly manipulate the attributes of DOM elements and display the effect directly on the page
innerHTML
-
Gets the HTML structure inside the element
<body> <div> <p> <span>hello</span> </p> </div> <script> var div = document.querySelector('div') console.log(div.innerHTML) /* <p> <span>hello</span> </p> */ </script> </body>
-
Set the content of the element
<body> <div></div> <script> var div = document.querySelector('div') div.innerHTML = '<p>hello</p>' </script> </body>
- After setting, a p element will be nested inside the div element in the page
innerText
-
Get the text inside the element (only the text content can be obtained, not the html tag)
<body> <div> <p> <span>hello</span> </p> </div> <script> var div = document.querySelector('div') console.log(div.innerText) // hello </script> </body>
-
You can set the text inside the element
<body> <div></div> <script> var div = document.querySelector('div') div.innerText = '<p>hello</p>' </script> </body>
- After setting, the < p > Hello < / P > will appear in the div element as a text instead of parsing P into a label
getAttribute
-
Get an attribute of an element (including custom attributes)
<body> <div a="100" class="box"></div> <script> var div = document.querySelector('div') console.log(div.getAttribute('a')) // 100 console.log(div.getAttribute('class')) // box </script> </body>
setAttribute
-
Set an attribute to the element (including custom attributes)
<body> <div></div> <script> var div = document.querySelector('div') div.setAttribute('a', 100) div.setAttribute('class', 'box') console.log(div) // <div a="100" class="box"></div> </script> </body>
removeAttribute
-
Directly remove an attribute of an element
<body> <div a="100" class="box"></div> <script> var div = document.querySelector('div') div.removeAttribute('class') console.log(div) // <div a="100"></div> </script> </body>
style
-
Specifically used to add css styles to elements
-
All added are inline styles
<body> <div></div> <script> var div = document.querySelector('div') div.style.width = "100px" div.style.height = "100px" div.style.backgroundColor = "pink" console.log(div) // <div style="width: 100px; height: 100px; background-color: pink;"></div> </script> </body>
- The div in the page will become a width and height of 100, and the background color is pink
className
-
The name of the class specifically used to manipulate the element
<body> <div class="box"></div> <script> var div = document.querySelector('div') console.log(div.className) // box </script> </body>
-
You can also set the class name of the element, but it is a full coverage operation
<body> <div class="box"></div> <script> var div = document.querySelector('div') div.className = 'test' console.log(div) // <div class="test"></div> </script> </body>
- When setting, whether there is a class name or not, it will be overwritten by the set value