javaScript（WebAPI） - 教程

1.什么是 WebAPI

2.什么是 API

API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM .所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.

3.什么是 DOM

1.DOM 树

一个页面的结构是一个树形结构, 称为 DOM 树

重要概念:

4.获取元素

这部分工作类似于 CSS 选择器的功能.

1.querySelector（选中一个元素）

2.querySelectorAll（选中一组元素）

5.事件

1.点击事件

1. 事件源：触发事件的元素，这里就是 <input> 按钮（变量 button）。
2. 事件类型：用户的操作类型，这里是 “点击”（onclick）。
3. 事件处理程序：事件触发后执行的函数（即 function() { alert("hello") }）
4. 

2.键盘按钮事件

1.按下

2.抬起

3.例题：shift

6.获取&修改元素属性

1. innerText

可以看到, 通过 innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容.

修改页面的时候也会把 span 标签当成文本进行设置

2. innerHTML

可以看到 innerHTML不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空 格和换行.

7.获取&修改表单元素属性_案例

demo6.html

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

案例：播放暂停按钮文本切换

案例：计算器实现

Document
function add(){
let add=document.querySelector('.input');
add.value=parseInt(add.value)+1;
}
function Min(){
let min=document.querySelector('.input');
min.value=parseInt(min.value)-1;
}
let btn=document.querySelector('.btn')
function Onclick(){
if(btn.value=="播放"){
btn.value="暂停"
}else{
btn.value="播放"
}
}

案例：全选/取消全选按钮

Document
我全都要
貂蝉
小乔
妲己
let all=document.querySelector(".all");
let select=document.querySelectorAll(".select");
function Selectall(){
for(i=0;i

8.获取/修改样式属性

1.行内样式操作

Document
哈哈哈
function Onclick(){
let size1=document.querySelector('div');
console.log(size1.style)
let size2=parseInt(size1.style.fontSize)+10
// size1.style.fontSize=size2+"px"
size1.style.cssText='font-size'+size2+"px"
}

下面这种要用到类名样式

2.类名样式操作

Document
.light{
background-color: aliceblue ;
color: black;
width: 100%;
height: 100%;
}
body,html{
width: 100%;
height: 100%;
}
.dark{
background-color: black;
color: white;
width: 100%;
height: 100%;
}
这是一段话
这是一段话
这是一段话
这是一段话
这是一段话
function Onclick(){
let hua=document.querySelector('div')
//如果是白天则换成黑夜，与之相反
if(hua.className=="light"){
hua.className="dark"
}else{
hua.className="light"
}
}

9.操作节点

1.节点创建

2.插入节点

Document
这是一个p标签1
这是一个p标签2
let em1=document.createElement('h1')
em1.innerHTML='这是创建的节点1'
let em2=document.createElement('h1')
em2.innerHTML='这是创建的节点2'
let div=document.querySelector('div')
div.appendChild(em1)
div.insertBefore(em2,document.querySelector('.p1'))

注意1: 如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)

注意2: 一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容.

3.删除节点

Document
1
2
3
4
let parent=document.querySelector('.container')
let child=document.querySelector('#delete')
let elemet=parent.removeChild(child)
console.dir(elemet)
parent.appendChild(child)