This is the 27th day of my participation in the August More Text Challenge

Hi, I’m Ken

Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).

This blog is suitable for just contactJSAnd the friends who want to review after a long time.

🌊🌈

On the JavaScript DOM

6.1 _Web API description

A Web API is a set of interfaces that browsers provide to manipulate browser functions and page elements.

For example, console.log(), which is often used in previous studies, is an interface. The console object represents the browser’s console, and its log() method is called to output debugging information in the console.

6.1.1_ Getting acquainted with Web API

The JavaScript language consists of three parts: ECMAScript (JavaScript syntax), BOM(Page Document Object Model) and DOM (Browser Object Model). Among them, ECMAScript is the core of JavaScript language, which includes the basic JavaScript syntax, array, function and object, which is the basis of JavaScript. The Web API includes BOM and DOM.

In the basic stage of learning JavaScript, I learned the basic syntax of ECMAScript, paving the way for learning Web API. The Learning Web API phase is the actual application of JavaScript. In this stage, you will make extensive use of JavaScript basic syntax to achieve web interaction.

6.1.2_Relationship between Web API and API

1. API

Application Programming Interfaces (apis) are predefined functions that are provided by software to developers to help them implement certain functions. Developers don’t need access to the source code, don’t need to understand the details of its inner workings, just know how to use it. For example, develop a mobile app for beauty camera. The app requires you to tune up the camera on your phone to take pictures, and without an API it would have been impossible to develop. So, in order to enable other applications to access the phone’s camera, the phone’s operating system opens up a set of apis, which are then turned into a function that can be called directly by the app’s development tools. Directly call the function can be completed to call the camera, get the picture taken by the camera and other functions. The developer’s main job is to consult the API documentation to understand how the API is used.

2. Web API

The Web API is a browser-specific API that is encapsulated as an object in JavaScript. You can use the Web API by calling the properties and methods of the object. In previous studies, you often used console.log() to output debugging information in the console, where the console object is a Web API.

Case: Use the document.title property to get or set the page title, use the document.write method to write the page content,

document.title = 'Set new title';// Set the page title
console.log (document.title);// Get the page title
document.write ('
 Page content 
');// Write the string to the page
Copy the code

6.2 _DOM profile

6.2.1_ What is DOM

Document Object Model (DOM) is a standard programming interface recommended by W3C to deal with extensible markup language (HTML or XML).

The W3C defines a series of DOM interfaces that allow you to obtain, access, set tag attributes and styles for all elements in an HTML document. In real development, interactive pages such as box size changes, TAB bar switching, shopping cart functionality, and so on, all rely on the DOM.

6.2.2 _DOM tree

DOM treats HTML documents as tree structures, so it is called document tree model. It maps documents into tree structures and processes them through node objects. The results of processing can be added to the current page.

The tree

After the above figure shows the relationship between nodes in the DOM tree, we will explain the proper nouns in DOM as follows:

  • Document: A page is a document.
  • Elements: All tags in a page are elements.
  • Node: All contents in a web page are nodes in the document tree (such as element nodes, attribute nodes, text nodes, comment nodes, etc.). DOM treats all nodes as objects with their own properties and methods.

That’s the end of today’s introductory study

Peace

🌊🌈

A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms A Ken HTML, CSS introduction guide (16) _ multimedia technology

Suggest collection 】 【 HTML dry share | challenge the shortest possible time to take you into the HTML (18) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (19) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (20)

Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (10)

🌊🌈 About postscript:

Thank you for reading, I hope to help you if there is a flaw in the blog, please leave a message in the comment area or add contact information in the home page of the personal introduction of private chat I thank every little partner generous advice

Original is not easy, “like” + “attention” thanks for your support ❤