Table of contents
| The concept of document, element and node
Obtained through the new method of HTML5
Special element acquisition (body html)
The three elements of the event
Refresh the webpage to execute certain events automatically
| Overview
After learning JS, we need to learn WebAPIs about JS! Just like after learning Java, it is as natural to start learning Servlet, JDBC, SSM, SpringBoot...
WebAPIs use JS to obtain elements (such as tags, etc.) in web pages, and then add some interactive effects such as [events, operations, updates, dynamic effects] to these elements.
To put it this way:
for the backend, Java is the foundation, Servlet is the backend foundation, and the framework is the actual application of the backend; for the frontend, HTML and CSS are for building and beautifying static web pages, JS is the foundation, and frameworks such as Vue are for making Practical applications of web pages coming to life.
Phases and importance of this chapter
-
The first chapter learns the basic grammar of JS, but it is far from enough to learn the basic grammar. We also need to learn the related operations of web page elements and respond to the relevant instructions of the web page.
-
JS is composed of: ECMAScript, DOM, BOM. This chapter is about DOM
-
The role of DOM is to realize page interaction function
-
To learn this chapter, the required pre-knowledge: Html, CSS, JavaScript basic grammar knowledge
What is DOM
DOM is a JS web API (Application Programming Interface)
Target
| The concept of document, element and node
| get element
Get by ID
-
It should be noted that our script tag must be written after the statement where the element is created. [I will learn how to upgrade the script to the head in the future]
-
id needs to be enclosed in single quotes, indicating a string
-
Returns an element object
The syntax for getting an element by ID:
document.getElementById('id');Use console.dir() to print the element object we obtained to better view the properties and methods in the object.
Get by tag name
-
What is returned is a collection of obtained element objects (not strings) . pseudo-array. (with index and length); no matter whether the page has only one li or no elements, the result is a pseudo-array.
-
Because what we get is a collection of objects, we need to traverse if we want to operate the elements inside
-
get element object is dynamic
Syntax to get element by tag name:
document.getElementsByTagName('标签名');
How to get "li under ol"? You can replace document with elements
It should be noted that the obtained ol is a pseudo-array, we need to use ol[0] to get a single element , instead of using the entire pseudo-array as document
var ol = document.getElementsByTagName('ol');
ol[0].getElementsByTagName('li');
Obtained through the new method of HTML5
example
Special element acquisition (body html)
doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象| Event Basics
The three elements of the event
Event Source → Event Type → Event Handler
click event
Click the button to pop up a pop-up window (get element object btn → event type onclick → event handler function(){ //... })
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};code example
<!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>
<button id="btn">Click me</button>
<script>
//获取事件源：元素对象
var btn = document.getElementById('btn');
//绑定事件
btn.onclick = function(){
//事件处理程序
alert('おはようございます！');
}
</script>
</body>
</html>Cursor gain/lose focus events
Event: get focus onfocus lose focus onblur
Application case: when the mouse cursor is placed in the text box, the default text disappears (difference from placeholder: placeholder needs to input text to display)
[ More other events ]
Refresh the webpage to execute certain events automatically
We don't need to add a trigger event, in this case, it is equivalent to the default trigger event. That is: when the webpage is refreshed, JS will be executed automatically
