review:
The splice() method is used to add or remove elements from an array.
**Note:** This method will mutate the original array.
- Delete an array:
splice(starting position, number of deleted items)
For example: 1
let arr = ['red', 'green', 'blue']
arr.splice(1,1) // 删除green元素
console.log(arr) // ['red, 'blue']
- Add element
splice(starting position, delete number, add array elements)
let arr = ['red', 'green', 'blue']
//arr.splice(1, 0, 'pink') // 在索引号是1的位置添加 pink
//console.log(arr) // ['red', 'pink', 'green', 'blue']
arr.splice(1, 0, 'pink', 'hotpink') // 在索引号是1的位置添加 pink hotpink
console.log(arr) // ['red', 'pink', 'hotpink', 'green', 'blue']
Web APIs - Day 1 Notes
Understand the structure of DOM and master its basic operations, and experience the role of DOM in development
- Know the relationship between ECMAScript and JavaScript
- Understand the related concepts of DOM and the essence of DOM is an object
- Master the basic methods of finding nodes
- Master the operation of node attributes and text
- Ability to create scheduled tasks using intermittent functions
introduce
Knowing the relationship between ECMAScript and JavaScript, Web APIs are browser extension functions.
Strictly speaking, most of the knowledge we learn in the JavaScript stage belongs to the knowledge system of ECMAScript. ECMAScript is referred to as ES. It provides a set of language standard specifications, such as variables, data types, expressions, statements, functions and other grammatical rules. Specified by ECMAScript. The browser implements most of the ECMAScript specifications and extends some practical functions on this basis. These extended contents are called Web APIs.
ECMAScript is the real JavaScript that runs in the browser and then combined with Web APIs. The core of Web APIs is DOM and BOM.
Extended reading: The ECMAScript specification is constantly being updated, and there are many different versions. The early version numbers were numerically numbered, such as ECMAScript3 and ECMAScript5. Later, due to the rapid update speed, the year was used as the version number, such as ECMAScript2017, ECMAScript2018. This format, ECMAScript6 was released in 2015 and is often called EMCAScript2015.
Further reading on the history of JavaScript .
Know the concepts related to DOM, establish a preliminary understanding of DOM, learn the basic operations of DOM, and understand the role of DOM
DOM (Document Object Model) treats each tag element of the entire HTML document as an object. This object contains many properties and methods. By operating these properties or calling these methods, dynamic updates to HTML can be achieved. In order to realize web pages Provide technical support for special effects and user interaction.
In short, DOM is used to dynamically modify HTML, with the purpose of developing web page special effects and user interaction.
Observe a small example:
In the above example, when the user clicks the [Start] or [End] button respectively, it can be observed through the debugging window on the right that the content of the html tag is constantly changing, which is achieved through the DOM.
concept
DOM tree
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
文本
<a href="">链接名</a>
<div id="" class="">文本</div>
</body>
</html>
As shown in the figure below, the HTML document is intuitively represented in a tree structure, which we call a document tree or DOM tree. The document tree intuitively reflects the relationship between tags.
DOM node
Nodes are components of the document tree. Each node is a DOM object , which is mainly divided into element nodes, attribute nodes, text nodes, etc.
- [Element node] is actually an HTML tag. As shown in the figure above
head, ,div,bodyetc. all belong to element nodes. - [Attribute node] refers to the attributes in the HTML tag, such as the attribute
aof the taghrefand the attributedivof the tag in the figure aboveclass. - [Text node] refers to the text content of HTML tags, such as
titlethe text in tags. - [Root node] specifically refers to
htmlthe label. - other…
document
documentIt is a built-in JavaScript object specifically used for DOM. This object contains several properties and methods and documentis the core of learning DOM.
<script>
// document 是内置的对象
// console.log(typeof document);
// 1. 通过 document 获取根节点
console.log(document.documentElement); // 对应 html 标签
// 2. 通过 document 节取 body 节点
console.log(document.body); // 对应 body 标签
// 3. 通过 document.write 方法向网页输出内容
document.write('Hello World!');
</script>
The above lists documentsome of the properties and methods of the object. Let us first have documentan overall understanding of it.
Get DOM object
- querySelector The first element that meets the condition
- querySelectorAll returns a pseudo array of elements that meet the conditions
- Learn about other ways
- getElementById
- getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM - 查找节点</title>
</head>
<body>
<h3>查找元素类型节点</h3>
<p>从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。</p>
<ul>
<li>元素</li>
<li>元素</li>
<li>元素</li>
<li>元素</li>
</ul>
<script>
const p = document.querySelector('p') // 获取第一个p元素
const lis = document.querySelectorAll('li') // 获取第一个p元素
</script>
</body>
</html>
Summarize:
- document.getElementById specifically obtains element type nodes and
idsearches based on the attribute of the tag. - Any DOM object contains the nodeType attribute, which is used to detect node types.
Manipulate element content
Dynamically change the content of the web page by modifying the text content of the DOM.
innerTextAdd/update text content to any tag position, tags contained in the text will not be parsed.
<script>
// innerText 将文本内容添加/更新到任意标签位置
const intro = document.querySelector('.intro')
// intro.innerText = '嗨~ 我叫李雷！'
// intro.innerText = '<h4>嗨~ 我叫李雷！</h4>'
</script>
innerHTMLAdd/update text content to any tag position, and the tags contained in the text will be parsed.
<script>
// innerHTML 将文本内容添加/更新到任意标签位置
const intro = document.querySelector('.intro')
intro.innerHTML = '嗨~ 我叫韩梅梅！'
intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'
</script>
htmlSummary: It is recommended to use the tag if the text content contains it innerHTML, otherwise it is recommended to use innerTextthe attribute.
##Manipulate element attributes
There are 3 ways to modify attributes:
Common attribute modifications
- Can be modified directly through the attribute name, the most concise syntax
<script>
// 1. 获取 img 对应的 DOM 元素
const pic = document.querySelector('.pic')
// 2. 修改属性
pic.src = './images/lion.webp'
pic.width = 400;
pic.alt = '图片不见了...'
</script>
Control style properties
styleApply [Modify Style] to dynamically modify the style by modifying the inline style attributes.
styleThe data type of the attribute itself obtained through the element node is also an object. For example box.style.color, box.style.widthit is used to obtain the values of colorand widthof the CSS style of the element node respectively.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习 - 修改样式</title>
</head>
<body>
<div class="box">随便一些文本内容</div>
<script>
// 获取 DOM 节点
const box = document.querySelector('.intro')
box.style.color = 'red'
box.style.width = '300px'
// css 属性的 - 连接符与 JavaScript 的 减运算符
// 冲突，所以要改成驼峰法
box.style.backgroundColor = 'pink'
</script>
</body>
</html>
Any tag has stylean attribute, and stylethe style of the web page tag can be dynamically changed through the attribute. If you encounter cssthe character in the attribute -, you need to -remove it and change the letters following it to uppercase. If background-coloryou want to write it asbox.style.backgroundColor
- Manipulate class name (className) Manipulate CSS
If there are many styles to be modified, it would be cumbersome to modify them directly through the style attribute. We can use the CSS class name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习 - 修改样式</title>
<style>
.pink {
background: pink;
color: hotpink;
}
</style>
</head>
<body>
<div class="box">随便一些文本内容</div>
<script>
// 获取 DOM 节点
const box = document.querySelector('.intro')
box.className = 'pink'
</script>
</body>
</html>
Notice:
1. Since class is a keyword, use className instead.
2.className is to replace the old value with the new value. If you need to add a class, you need to keep the previous class name.
- Control CSS through classList operation class
In order to solve the problem that className easily overwrites the previous class name, we can append and delete class names through classList.
<!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>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.active {
width: 300px;
height: 300px;
background-color: hotpink;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<script>
// 1.获取元素
// let box = document.querySelector('css选择器')
let box = document.querySelector('div')
// add是个方法 添加 追加
// box.classList.add('active')
// remove() 移除 类
// box.classList.remove('one')
// 切换类
box.classList.toggle('one')
</script>
</body>
</html>
Manipulate form element attributes
In many cases, the properties of a form also need to be modified. For example, if you click on the eye, you can see the password. The essence is to convert the form type into a text box.
Normal attributes and values are no different from other tag attributes.
Get: DOM object.Attribute name
Settings: DOM object.property name = new value
<!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>
<input type="text" value="请输入">
<button disabled>按钮</button>
<input type="checkbox" name="" id="" class="agree">
<script>
// 1. 获取元素
let input = document.querySelector('input')
// 2. 取值或者设置值 得到input里面的值可以用 value
// console.log(input.value)
input.value = '小米手机'
input.type = 'password'
// 2. 启用按钮
let btn = document.querySelector('button')
// disabled 不可用 = false 这样可以让按钮启用
btn.disabled = false
// 3. 勾选复选框
let checkbox = document.querySelector('.agree')
checkbox.checked = false
</script>
</body>
</html>
Custom properties
Standard attributes: Tags are born with attributes such as class id title, etc. You can directly use dot syntax operations such as: disabled, checked, selected
Custom properties:
Special data-custom attributes were introduced in HTML5
Tags always start with data-
All DOM objects are obtained as dataset objects.
<!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>
<div data-id="1"> 自定义属性 </div>
<script>
// 1. 获取元素
let div = document.querySelector('div')
// 2. 获取自定义属性值
console.log(div.dataset.id)
</script>
</body>
</html>
Intermittent function
Know the role of intermittent functions and use intermittent functions to create scheduled tasks.
setIntervalIt is a built-in function in JavaScript. Its function is to automatically and repeatedly execute another function at a fixed interval, also called a timer function.
<script>
// 1. 定义一个普通函数
function repeat() {
console.log('不知疲倦的执行下去....')
}
// 2. 使用 setInterval 调用 repeat 函数
// 间隔 1000 毫秒，重复调用 repeat
setInterval(repeat, 1000)
</script>
word of the day
| word | illustrate | explain |
|---|---|---|
| setInterval | timer | setInterval(repeat, 1000) |