HTML 5 new API

New DOM manipulation methods

1. Get the DOM element method

Gets a single element, and the argument can be any selector

Document. querySelector(" selector ");Copy the code

<body>
  <div id="wrap1" class="wrap"></div>
  <div id="wrap2" class="wrap"></div>

  <script>
    let oDiv = document.querySelector('#wrap1');
    console.log(oDiv);  
       
    let cDiv = document.querySelector('.wrap');
    console.log(cDiv); 
       
  </script>
</body>
Copy the code

Document.queryselector () can retrieve the DOM element of any selector. When there are two identical class tags, the dom element of the first class tag is retrieved.

A method to get multiple DOM elements

Document. QuerySelectorAll (' selector ');Copy the code

  <div id="wrap1" class="wrap"></div>
  <div id="wrap2" class="wrap"></div>

  <script>
    let oDiv = document.querySelectorAll('.wrap');
    console.log(oDiv);  Wrap [div#wrap1.wrap, div#wrap2.wrap]
    oDiv.forEach((ele, index) = > {
      console.log(ele); / / output < div id = "wrap1" class = "wrap" > < / div > < div id = "wrap2" class = "wrap" > < / div >
    })
  </script>
</body>
Copy the code

The code above shows that when we use the document. The querySelectorAll () to obtain a dom element, we get is an array, we can use method of array, such as the forEach loop out all the dom elements.

2. Class operations

ClassList action class

Add class class

ODiv. ClassList. Add (' the name of the class ');Copy the code

Delete the class class

ODiv. ClassList. Remove (' the name of the class ');Copy the code

Tests for the presence of this class

ODiv. ClassList. The contains (' the name of the class ');Copy the code

Switch class class

ODiv. ClassList. Toggle (' the name of the class '); // Delete the class if it exists, add the class if it does notCopy the code

3. Data -* Custom attributes

Add a custom attribute name to an element using data-custom attribute name. Once added, properties can be set via JS or or.

Code demo:

<body>
  <div class="box" data-name="list"></div>

  <script>
    let oDiv = document.querySelector('.box');
    oDiv.dataset.name = 'list1';
    console.log(oDiv);  // <div class="box" data-name="list1"></div>
    oDiv.dataset.age = '18';
    console.log(oDiv);  // <div class="box" data-name="list1" data-age="18"></div>
  </script>
</body>
Copy the code

From the code above,

When we customize the property name

Odiv.dataset. Name = 'new dataset ';Copy the code

Set custom properties

Odiv.dateset. Custom attribute name = 'Custom attribute value ';Copy the code

So, data-* is useful, let’s define a toggle TAB function, to appreciate the unique charm of data-* :

<body>
  <button class="btn" data-btn="list1">Switch 1</button>
  <button class="btn" data-btn="list2">Switch 2</button>
  <button class="btn" data-btn="list3">Switch 3</button>

  <div class="list1">1</div>
  <div class="list2">2</div>
  <div class="list3">3</div>

  <script>
    let oBtn = document.querySelectorAll('.btn');
    oBtn.forEach(ele= > {
      ele.onclick = function () {
        let oDiv = document.querySelectorAll('div');
        oDiv.forEach(ele= > {
          ele.style.display = 'none';
        })
        document.querySelector(`.${ele.dataset.btn}`).style.display = 'block'; }})</script>
</body>
Copy the code

Specific effect can copy the code to run their own view.

File to read

File uploading is done through the File form control of type Input Type, and reading is done through the FileReader constructor.

upload

Through form controls

<input type="file" name="" />
Copy the code

read

Reading is done through the FileReader constructor.

Common methods of FileReader

ReadAsBinaryString: Reads the file as binary code
ReadAsDataURL: Reads the file as DataURL
ReadAsText: Reads a file as text

FileReader provides events

Onabort: Triggered when reading a file is interrupted
Onerror: Triggered when there is an error in reading a file
Onload: Triggered when reading the file is complete, only after reading the file successfully
Onloadend: Triggered when reading the file is complete, regardless of success or failure
Onloadstart: Triggered when file reading starts
Onprogress: Reading the file

Here’s an example:

<body>
  <input type="file" />

  <script>
    // Get the DOM element
    let fileInp = document.querySelector('input');
    fileInp.onchange = function() {
      // Get the file
      let file = this.files[0];
      // Create a reader
      let reader = new FileReader();
      // Start reading
      reader.readAsText(file);
      // Listen for file read status
      reader.onload = function() {
        console.log(reader.result); }}</script>
</body>
Copy the code

The local store

HTML5 Web storage is a better storage method than cookie. The traditional way uses Document. Cookie for storage, but because its storage size is only about 4KB, parsing is also complicated. So HTML5 brings us localStorage and sessionStorage two localStorage methods.

localStorage

Features:

Permanent storage
Multi-window sharing
The capacity is about 20MB

Common methods:

<script>
    window.localStorage.setItem(key, value);   // Set the contents to be stored
    window.localStorage.getItem(key);          // Get the storage content
    window.localStorage.removeItem(key);       // Delete the storage
    window.localStorage.clear();               // Clear the content
</script>
Copy the code

sessionStorage