2.web JavaScript Web API

一、WebAPI

WebAPI使用JS完成一些有意义的工作，JS运行在浏览器中，可以增删查改浏览器允许其操作的数据；webAPI包含了 DOM + BOM

DOM：Document Object Model(文档对象模型)

BOM：Browser Object Model

1.DOM树

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

• 文档: 一个页面就是一个 文档, 使用 document 表示
• 元素: 页面中所有的标签都称为 元素. 使用 element 表示
• 节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示

2.文档中查找节点

2.1document.querySelector(···) 和 document.querySelectorAll(···)

参数是CSS中选择器，#id，#class，p，div···

    
    


    
你好
    
hello
    
世界
    
2022-5
        
28
    
5-28

 3.文档中修改节点属性

修改文本属性时用.textContent

修改class时，可以使用.class.add("类名")、.class.remove("类名")、.class.contains("类名")

    
    


    
你好
    
hello
    
世界
    
2022-5
         
28
    


    
5-28

二、操作元素

 1.获取/修改元素内容

1.1 innerText

 innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容. 修改页面的时候也会把 span 标签当成文本进行设置

    
    



    
hello

1.2 innerHTML

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

    
    



    
hello

2.获取/修改元素属性

可以通过 Element 对象的属性来直接修改, 就能影响到页面显示效果

 3.获取/修改表单属性

• 例1： 点击播放会切换成暂停，点击暂停就会切换成播放

三、操作节点

1.新增节点

1. 创建元素节点document.createElement() 方法

2. 把元素节点插入到 dom 树中 

• 2.1element.appendChild(aChild)方法，将节点插入到指定节点的最后一个孩子之后
• 2.2使用 insertBefore 将节点插入到指定节点之前

插入的节点可以对属性正常赋值

• 例1： 

 

• 例2：

    
    



    
11
    
22
    
33
    
44

3.删除节点

使用 removeChild 删除子节点

•  例1：

    
    



    
11
    
22
    
33
    
44

 四、事件

JS通过事件响应和用户交互，例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件,通过对这些事件的响应，可以完成特定的功能(例如单击按钮时弹出对话框，将鼠标指针移动到文本上改变文本的颜色等)

例1：改变背景颜色

• 点击按钮背景色就会改变

• btn.addEventListener("click",改变背景色);和btn.onclick = 改变背景色;的效果是一样的

    
    


    点击改变背景颜色
    

例2：显示当前时间

• 点击按钮显示当前时间
• 使用setInterval()是会一直刷新的

    
    


    点击获取当前时间
    

 五、代码举例

1.猜数字

• 输入一个数字，当小于随机生成的数字会显示猜小了，当大于随机生成的数字会显示猜大了，当等于随机生成的数字会显示正确并且显示出这个数字是多少，由于每次都把输入.value置空，所以输入数字按下按钮或者回车后，在输入栏是看不到数字的

  
  



猜数字

// 1. 生成随机数字
// Math.random() 返回的是0-1的数字
var 随机数 = parseInt(Math.random() * 100)

// 2. 为按钮绑定点击事件，事件处理函数是结果判断
// 3. 给 input 绑定一个键盘按下的事件
var 按钮 = document.querySelector('#btn');
var 输入 = document.querySelector('#text');
var 结果区 = document.querySelector('#result');
function 结果判断() {
    // 1. 读取用户的输入
    var 用户输入的数字 = parseInt(输入.value);

    输入.value = '';
    if(用户输入的数字 >0 && 用户输入的数字<100){
        if (用户输入的数字 < 随机数) {
            结果区.innerHTML += '
猜小了
';
        } else if (用户输入的数字 > 随机数) {
            结果区.innerHTML += '
猜大了
';
        } else {
            结果区.innerHTML += '
正确，该数字是'+用户输入的数字+'
';
        }
    }
}
输入.onkeypress = function(e) {
    if (e.key === 'Enter') {
        结果判断();
    }
}
按钮.onclick = 结果判断;