One 、 Inherit

1、 Abstract base class （ abstract class ）

(1) Some classes cannot be instantiated , Special for inheritance of other classes , Such classes are called abstract base classes .

Be careful ： stay javascript There is no method defined in abstract base class .
For example, ：

class Person{
    
	  constructor(){
    }
	  show(){
    }
			     }
	   new Person() ---  Instantiation   
class Animal{
    
	           constructor(){
    }
			   eat(){
     console.log(' be at  table ')}
			   sleep(){
    }
			}
	   
let a1 = new Animal() ---  Instantiation 
a1.eat()

We can see Person、Animal They're all abstract base classes , Instantiation has no practical significance , Specifically used to derive methods defined by subclasses in abstract base classes , It will be overridden in its subclasses ( rewrite ), Generally, methods in abstract base classes have no concrete implementation .

(2)Javascript Implementing abstract classes in ： stay js There is no syntax specifically supporting abstract classes in , But it can go through new.target To achieve .

class Animal{
    
    constructor(){
    
        if(new.target===Animal){
    //new.target Represents the type of object created .
            throw new Error(' Abstract class cannot be instantiated ')
        }
    }
    eat(){
    }
    sleep(){
    }
}
let a1 = new Animal()// Create an instantiation of an abstract base class （ Instantiation of an abstract class ）, Error reporting processing will occur 

2、super What to pay attention to when using

(1)super Represent the base class in the process of class inheritance

(2) Use super What should we pay attention to when we do this

A、super It can be used in the constructor of derived classes （ Call the constructor of the base class ）.
B、 In a derived class, you can use super Call the member methods of the base class .
C、 In the constructor of a class , Cannot call super() Before using this.

class Animal{
    
    constructor(){
    
        if(new.target===Animal){
    //new.target Represents the type of object created .
            throw new Error(' Abstract class cannot be instantiated ')

        }
    }
    eat(){
    }
    sleep(){
    }
}
class Dog extends Animal{
    
    constructor(nickName){
    
        super()// Use... In subclass construction methods 
        this.nickName=nickName// Must be in super after , because super First call the parent class and base class methods , It will report an error before .
    }
    eat(){
    
        super.eat()
        console.log(' The dog is gnawing at a bone ')
    }
    sleep(){
    
        console.log(' The dog sleeps on the ground ')
    }
}
let d1 = new Dog(' Little black ');
d1.eat();
d1.sleep();

D、 If the constructor is explicitly defined in the derived class , Or you must call super（）, Or return an object in it .

class Vehicle{
    }// As the base class 
class Car extends Vehicle{
    
    constructor(){
    // Explicitly define the construction method 
     super()// or , call super() Method , Otherwise, the report will be wrong 
  
    }
}
let c1 = new Car()
console.log(c1)

class Vehicle{
    }// As the base class 
class Car extends Vehicle{
    
    constructor(){
    // Explicitly define the construction method 
    return {
    }// or , Use return  Return an object , Otherwise, the report will be wrong  
    }
}
let c1 = new Car()
console.log(c1)

Two 、DOM

1.WebAPI

WebAPI: The browser provides a set of interfaces to operate browser functions and page elements ( Include DOM、BOM).

2、javascript The composition of

（1） Core grammar ：ECMAScript5 – ECMAScript2015(ES6) – ECMAScript2016
（2）DOM： Document object model
（3）BOM： Browser object model

3、DOM(Document Object Model)

DOM(Document Object Model)： Document object model ,W3C The recommended markup language is HTML. stay DOM Zhongba HTML The document is regarded as a tree structure , Tags in the document 、 Attributes of the tag 、 The content of the tag is the node of the tree .

（1） file (document): A page is （html file ） It's just a document .
（2） Elements （element)： All tags in the page are elements .
（3） node （node): All elements in the page （ Include element nodes 、 Attribute node 、 Content node 、 Comment nodes, etc ) Nodes are objects , There are properties and methods .

4、DOM Application .

(1) adopt document Get the elements of the page
A、 adopt id Get page elements

doucument.getElementById(‘id Property value ’), Because of the element id Attribute values cannot be repeated , So the method returns an object .

<!--  State support for H5 -->
<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1"> Xi'an University of Posts and Telecommunications </p>
</body>
<script> let st = document.getElementById('p1') console.log(st.innerHTML) </script>
</html>

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1"> Xi'an University of Posts and Telecommunications </p>
</body>
<script> let st = document.getElementById('p1') console.log(st) </script>
</html>

B、 Get the element from the tag name

document.getElementsByTagName(' Tag name ‘） The return values are all collections of objects , It's an array of classes , Out of commission push() Method , But it can be accessed in the way of array name with index .

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1"> Xi'an University of Posts and Telecommunications </p>
    <p> Xi'an Petroleum University </p>
    <p> Xi'an University of Technology </p>
    <p> Xi'an University of Technology </p>
    <p> Xi'an University of Finance and Economics </p>
</body>
<script> let arr =document.getElementsByTagName('p') console.log(arr[1]) </script>
</html>

C、 According to the label name Attribute get element .

document.getElementsByName(‘name Property name ’) Labeled name Attribute values can be repeated , So the return value of this method is set , It's an array .

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <span name="s1"> Journey to the west </span>
    <span name="s1"> Water margin </span>
    <span name="s1"> The romance of The Three Kingdoms </span>
    <br><br><br>
    <label><input type="checkbox" name="fuit" value=" Apple "> Apple </label>
    <label><input type="checkbox" name="fuit" value=" watermelon "> watermelon </label>
    <label><input type="checkbox" name="fuit" value=" grapes "> grapes </label>
</body>
<script> let arr =document.getElementsByName('s1')// Returns a collection of objects  console.log(arr) console.log(Array.isArray(arr)) let arr1 = document.getElementsByName('fuit')// Returns a collection of objects  arr1[1].checked = true // Express ' watermelon ' Selected by default  </script>
</html>

(2)HTML5 New method of getting elements in

A、document.querySelector(‘#id’)： according to id Make a selection

<body>
    <p id="p1"> Xi'an University of Posts and Telecommunications </p>
    <p> Xi'an Petroleum University </p>
    <p> Xi'an University of Technology </p>
    <p> Xi'an University of Technology </p>
    <p> Xi'an University of Finance and Economics </p>
</body>
<script> let pt = document.querySelector('#p1') console.log(pt) </script>

B、document.querySelectorAll(‘ Tag name or .class Property value ’)： According to the tag name or class Attribute value selection .

<body>
    <p id="p1"> Xi'an University of Posts and Telecommunications </p>
    <p> Xi'an Petroleum University </p>
    <p class="pt"> Xi'an University of Technology </p>
    <p class="pt"> Xi'an University of Technology </p>
    <p class="pt"> Xi'an University of Finance and Economics </p>
   -->
</body>
<script> let ps = document.querySelectorAll('.pt')// This is a class selector , Pay special attention to the previous points, which cannot be omitted  console.log(ps) </script>

You can see that there are three nodes , As shown in the figure below ：

C、document.getElementsByClassName('class Property value ’）： according to class Attribute value selection .

<body>
    <span class="one"> Chinese language and literature </span>
    <span class="one"> mathematics </span>
    <span class="two"> English </span>
    <span class="two"> chemical </span>
</body>
<script> let one = document.querySelectorAll('.one');// Use class selector  let two = document.getElementsByClassName('two') // Give Way ' Chinese language and literature ' Bold font  one[0].style.fontWeight = 'bold' // Give Way ‘ mathematics ’ The background color of is red  one[1].style.backgroundColor = 'red' </script>

(3)document Object properties
A、title： Title of the page

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1"> Xi'an University of Posts and Telecommunications </p>
    <p> Xi'an Petroleum University </p>
    <p class="pt"> Xi'an University of Technology </p>
    <p class="pt"> Xi'an University of Technology </p>
    <p class="pt"> Xi'an University of Finance and Economics </p>
</body>
<script> document.title='DOM object ' console.log(document.title) </script>
</html>

B、body： Page body Elements

<body>
    <p id="p1"> Xi'an University of Posts and Telecommunications </p>
    <p> Xi'an Petroleum University </p>
    <p class="pt"> Xi'an University of Technology </p>
    <p class="pt"> Xi'an University of Technology </p>
    <p class="pt"> Xi'an University of Finance and Economics </p>
 <script> console.log(document.body) </script>

C、forms： Form elements of the page

<body>
     <form>
          full name ：<input type="text">
          Gender ：<input type="text">
     </form>
</body>
<script> console.log(document.forms) </script>

D、images： Image elements of the page

<body>
   <img src="../images/002.png" width="300" height="300x">
</body>
<script> console.log(document.images) </script>

E、document.Element： Go back to html Elements

3、 ... and 、 event

event ： Can be Javascript Listening behavior , It's a kind of ‘ Trigger — Respond to ’ A mechanism of . It plays a very important role in web page interaction .

1、 The three elements of the event ：

(1) Event source ： The element that triggered the event ( Who triggered the event )
(2) Type of event ： What kind of event triggered ( single click 、 double-click 、 Mouse movement …)
(3) Event handler ： Also known as event response function , The code executed when the event is triggered .

for example ： Click... For button binding （click) event , When you click the button, a message pops up .
Writing a ：

<body>
    <button id="btn"> I'm the button </button>
    <script> // Get button elements  let btn = document.querySelector('#btn')// Compatibility should be considered in this method , Some do not support  // Bind the button click event ： btn.onclick = function(){
       alert(' You click the button ') } /*  Event source ： Button （btn)  Event type ：click( Click events )  Event handler ： function  */ </script>
</body>

Write two ：

<body>
    <button id="btn" onclick="show()"> I'm the button </button>
    <script> function show(){
       alert(' You have a button ') } /*  Event source ： Button （btn)  Event type ：click( Click events )  Event handler ： function  */ </script>
</body>

2、 Operate the contents of page elements

（1）innerHTML: Contents of start tag and end tag , Spaces and line breaks are preserved , as well as html label .

<body>
    <div id="box">
         Xi'an University of Posts and Telecommunications 
        <p>
             E-commerce major 
            <a href="http://www.xianyd.com">&nbsp;&nbsp;&lt;Hellow World</a>
        </p>
    </div>
    <script> let box = document.querySelector('#box') console.log('box Of innerHTML:',box.innerHTML) </script>
</body>

（2）innerText: Text content of start tag and end tag , Remove spaces and line breaks , Escape some special characters .(\lt The symbol is “<")

<body>
    <div id="box">
         Xi'an University of Posts and Telecommunications 
        <p>
             E-commerce major 
            <a href="http://www.xianyd.com">&nbsp;&nbsp;&lt;Hello World</a>
        </p>
    </div>
    <script> let box = document.querySelector('#box') console.log('box Of innerText:',box.innerText) </script>
</body>

（3）textContent: Text content of start tag and end tag , Keep spaces and wrap , Escape some special characters .

<body>
    <div id="box">
         Xi'an University of Posts and Telecommunications 
        <p>
             E-commerce major  <a href="http://www.xianyd.com">&nbsp;&nbsp;&lt;Hello World</a>
        </p>
    </div>
    <script> let box = document.querySelector('#box') console.log('box Of textContent:',box.textContent) </script>
</body>

3、 Properties of the operation element

Properties of the operation element ： stay javascript Operation element in HTML label .

practice 1： Click the scenery button , The picture of landscape button appears , Click the dog button , A picture of the dog appears .

<body>
    <button id="fengjing" > scenery </button>
    <button id="dog"> puppy </button>
    <br><br>
    <img src="../images/001.png" alt="" title=" scenery " width="300" height="200">
    <script> let fengjing = document.querySelector('#fengjing')// adopt id Select the scenery button  let dog = document.querySelector('#dog')// adopt id selection dog Button  let img=document.querySelector('img')// Select by tag name img label  fengjing.onclick = function(){
       img.src = '../images/001.png' img.title='fengjing' } dog.onclick = function(){
       img.src="../images/002.png" img.title='dog' } </script>
</body>

practice 2： There's a... In the page button And a single line text box .
requirement ：① At the beginning button Is not available .② When the text box gets the focus and begins to enter content ,button Become available .③ The text loses focus , Button not available

<body>
    <button id="btn" > Button </button>
    <br><br>
    <input type="text" id="wenben">
    <script> let btn=document.querySelector('#btn') btn.disabled=true let wenben=document.querySelector('#wenben') // wenben.οnclick=function(){
       // btn.disabled=false // } wenben.onfocus = function(){
      // Text box gets focus  btn.disabled=false // Button available  } wenben.onblur=function(){
      // The text box loses focus  btn.disabled=true // Button not available  } </script>

</body>

4、 The style of the operation element

(1) Operating elements style attribute

Format ： Element object .style. Style property name

Be careful ：javascript Style attribute names and CSS The style attribute names of are different ; Remove the original CSS Style attribute name ‘-’, Capitalize the first character of the following word .（eg:font-size Change it to fontSize）

Example ： adopt javascript Set up div Of style attribute .

<body>
    <div id="box"></div>
    <script> let box = document.querySelector('#box') box.style.width = '300px' box.style.height = '300px' box.style.backgroundColor='red' box.style.transform='rotate(30deg)' </script>
</body>

(2) Operating elements className attribute

Format ： Element object .className

<style> .first{
       width:150px; height: 160px; background-color: pink; } .change{
       width: 100px; height: 100px; background-color: red; color: white; } </style>
<body>
    <div class="first"> Xi'an University of Posts and Telecommunications </div>
    <script> //1. Get elements  let box = document.querySelector('.first') //2. Bind an... To the element click event ; change box The style of  box.onclick = function(){
       this.className = 'change'//this Refers to box } </script>
</body>

practice ： Make a registration page

<style> .box{
       width: 400px; height:300px; margin: 100px auto; } input{
       height:20px; } .pass{
       margin-top:20px; } #eye{
       position: relative; top:5px; right:30px; width: 24px; } .ok{
       color:green; } .fail{
       color:red; } </style>
<body>
    <div class="box">
        <div class="user">
        <label> user name ：<input type="text" id="txt"> <span class="msg" ></span></label>
      </div>
        <div class="pass">
         The secret &nbsp;&nbsp;&nbsp;&nbsp; code :
        <input type="password" id="pwd">
        <img src='../images/close.png' alt="" id="eye">
    </div>
</div>
     
<script> let txt =document.querySelector('#txt') let pwd = document.querySelector('#pwd') let msg =document.querySelector('.msg') let img=document.querySelector('#eye') // Set up pictures and input Of type attribute  txt.onblur =function(){
       // Loss of focus produces  if(this.value==='abc'){
       msg.innerHTML=' User name available ' msg.className='ok' }else{
       msg.innerHTML=' The user name is not available ' msg.className='fail' } } let flag = 0// Tag variable , by 1 Yes, show password ,0 So hide the password  eye.onclick = function(){
       if(flag == 0){
       pwd.type = 'text' this.src = '../images/open.png' //this Represents the current element  flag = 1 }else{
       pwd.type = 'password' this.src = '../images/close.png' flag = 0 } } </script>   
</body>