BOM and DOM operations

BOM And DOM operation

 BOM	 Browser object model >>>: Use js Operating the browser 
 DOM	 Document object model >>>： Use js Operation front page 

1.BOM operation

 window.open()			 Open a new window 
 window.close()			 Close the current window 
 history.forward()		 One page ahead 
 history.back()			 One page back 
 location.href()		 obtain URL
 location.href='URL'	 Jump to blade assignment page 
 location.reload()		 Reload page 

2.DOM Find label for operation

 ` Prefix keyword  document`
 
  Basic search ( The core )
 document.getElementById            according to ID Get a tag 
 document.getElementsByClassName    according to class Property acquisition 
 document.getElementsByTagName      Get the tag collection according to the tag name 
 
 ` If our js The code needs a tag on the page to be loaded   Then the js The code should be written in body The lowest part of the interior or leading into the outside js file `

  Indirect search 
 parentElement             Parent node label element 
 children                  All sub tags 
 firstElementChild         The first child tag element 
 lastElementChild          The last child tag element 
 nextElementSibling        Next brother tag element 
 previousElementSibling    Last brother tag element 
 

3. Node operation

var aEle = document.createElement('a');  #  Create a label 
aEle.setAttribute('href','https://www.mmzztt.com/')  
#  Set properties 
aEle.innerText = ' It's not good ?'  #  Set content text 
document.getElementsByTagName('p')[0].appendChild(aEle)  
#  Dynamic addition 
""" Make sure you know what you're dealing with """
imgEle.getAttribute('title')  #  Get tag attributes 

 innerText
 	 Without the assignment symbol is to get the internal text 
 	 The assignment symbol is used to set the built-in text 
 	  Unrecognizable HTML label 
 innerHTML
 	 Without the assignment symbol is to get the internal label + Text 
 	 Adding the assignment symbol is to set the built-in label + Text 	 

4. Get value operation

  Ordinary text data acquisition 
 	 Label object .value
  Special file data acquisition 
 	 Label object .value		 Just get a file address 
 	 Label object .files[0]	 Get single file data 
 	 Get objects .files		 Get all file data 

5.class operation

 classList						 See all the classes 
 classLIst.remove(cls)			 Delete specified class 
 classLIst.add(cls)				 Add the class 
 classLIst.contains(cls)		 There is returned true, Otherwise return to false
 classLIst.toggle(cls)			 Delete if it exists , Otherwise, add 

6. Style operation

  Label object .style. Property name  =  Property value 

7. event

  Just give HTML Element add custom function 
  How to bind Events 1
 	<button onclick="func()"> Am I </button>
    <script>
        function func() {
    
            alert(123)
        }
    </script>
 
  How to bind Events 2
 	<button id="d1"> Choose me </button>
    <script>
        // 1. Find labels first 
        var btnEle = document.getElementById('d1')
        // 2. The binding event 
        btnEle.onclick = function () {
    
            alert(456)
        }
    </script> 		

8. Built in parameters this

 this It refers to the currently operated object itself 
  Use... Inside the function body code of the event 
 	btnEle.onclick = function () {
    
            alert(456)
            console.log(this)
        }