js tutorial - BOM / DOM [009]

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

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

Tags: Javascript Front-end H5

Posted on Sun, 21 Nov 2021 23:00:18 -0500 by griffith

Hot Tags

©2021 Programmer Help