The concept of the API

  • Apis (Application Programming Interfaces) are predefined functions designed to provide applications and developers with the ability to access a set of routines based on a piece of software or hardware without having to access the source code or understand the details of the inner workings.
  • Any development language has its own API
  • API characteristics Input and output (I/O)
  var max = Math.max(2.3.4);
Copy the code
  • API usage: console.log(” ABC “);

The concept of Web API

  • Browsers provide a set of apis (BOM and DOM) for browser functionality and page elements
  • Learning objective: Learn how to call the apis provided by common browsers.
  • Learning Aid MDN: developer.mozilla.org/zh-CN/docs/…

The composition of javaScript

  • Javascript includes: ECMAScript and Web APIs
    • Web APIs include BOM and DOM
  • As shown in the figure:

ECMAScript – The heart of JavaScript

  • Defines the syntax of javascript
  • At the heart of JavaScript, ECMAScript describes the basic syntax and data types of the language. ECMAScript is a set of standards that define a language regardless of implementation.

BOM – Browser object model

  • Browser Object Model, a set of apis for manipulating browser functions
  • You can use the BOM to operate browser Windows, such as pop-up boxes, control browser hops, and obtain the resolution.

DOM – Document object Model

  • Document Object Model, a set of apis for manipulating page elements
  • DOM can think of HTML as a tree of documents, and you can manipulate nodes in the tree through the API provided by DOM.

Introduction of the DOM

DOM concept

  • Document Object Model is a standard programming interface recommended by W3C to deal with extensible Markup Language. It is a platform – and language-independent application programming interface (API) that dynamically accesses programs and scripts to update their content, structure, and style of WWW documents (currently, HTML and XML documents are defined through the documentation section). Documents can be further processed, and the results can be added to the current page.
  • DOM is a tree-based API document that requires the entire document to be represented in memory during processing.

The DOM tree

  • Document: A web page can be called a document
  • Nodes: Everything in a web page is a node (tags, attributes, text, comments, etc.)
  • Element: Tags in a web page
  • Attribute: Indicates the attribute of the tag
  • As shown in the figure:

Operations that the DOM often does

  • Access to elements
  • Operating on an element (setting its properties or calling methods)
  • Dynamically creating elements
  • Events (when to act accordingly)

The DOM gets the page element

  • Why get page elements?
  • For example, if we want to operate a certain part of the page (show, hide, animation), we need to obtain the corresponding element of the part before we proceed with the subsequent operation.

Gets the element by ID

  • Method: Call the getElementById method of the Document object.
  • Parameter: String id attribute value.
  • Return value: the element object with the corresponding ID name.
  • Note:
    • Due to theId names are uniqueSome browsers support direct access to elements using id names, but this is not a standard way and is not recommended. 
        // If there are multiple elements with the same id name, only the top one will be selected
  <p id = "box"> This is a box </p>// Using the id name is not recommended
  box.style.background = "pink";
  // Recommended
  var box = document.getElementById("box");
  box.style.background = "pink";
Copy the code
    • If js comes before the HTML structure, the structure will not be loaded and the element with the corresponding ID cannot be obtained.

Gets the element by tag name

  • Method: Call the getElementsByTagName method of the Document object
  • Parameter: Label name of a string type.
  • Return value: Array of element objects with the same name.
  • Note:
    • You manipulate data in the same way you manipulate arrays
    • The elements obtained internally by the getElementsByTagName method are added dynamically

Gets the tag element inside the element object

  • You can also call the getElementsByTagName method from within the element object. For example, a div element object can also call the getElementsByTagName method
  • Purpose: Narrow the selection of elements, similar to descendant selectors in CSS

Gets the element by name

  • Method: Call the getElementsByName method of the Document object
  • Parameter: Name attribute of string type
  • Return value: An array of element objects with the same value as the name attribute
  • Not recommended: There is a compatibility problem in IE and Opera. Elements with the same ID attribute value will be selected.

Gets elements by class name

  • Method: Call the getElementsByClassName method of the Document object.
  • Parameter: the class property value of a string type
  • Return value: an array of element objects with the same class property value
  • Browser compatibility problem: Internet Explorer 8 or later is not supported

Gets elements based on the selector

  • Method 1: Call the querySelector method of the Document object and use the CSS selector to select the first qualified tag element
  • Method 2: Call the querySelectorAll method of the Document object and use the CSS selector to select all qualified tag elements
 // Note that the selector gets the element method, which needs to be written after the HTML structure
 // Basic structure
 <div id = "box1">
   <p class = "para">hh</p>
   <p class = "para">ww</p>
 </div>
 // Only the first p tag will be selected
 var para = document.querySelector("#box1 .para");
 // All labels that match the criteria will be selected
 var para = document.querySelectorAll("#box1 .para");
 NodeList(2)[p.para,p.para]
Copy the code
  • Arguments: selectors in string CSS
  • Note: Similar to id selection, need to write after HTML, load complete before execution
  • Browser compatibility problem: Internet Explorer 8 or later is not supported

conclusion

  • Master, no compatibility issues
    • getElementById()
    • getElementsByTagName()
  • To understand
    • getElementsByName()
    • getElementsByClassName()
    • querySelector()
    • querySelectorAll()