JS的Wed APIs-CFANZ编程社区

1. Web APIs和Js基础关联性

1.1 Js的组成

请添加图片描述
1.2 JS和wed apis阶段关联性

JS基础阶段

我们学习的是ECMAScript标准规定的基本语法
要求掌握JS基础语法
只是学习基本语法，做不了网站交互效果
目的是为了JS后面课程打基础，做铺垫

Web APIs基础阶段

web APIS是W3C组织的标准
web APIS我们主要学习DOM和BOM
web APIs是我们JS所独有的部分
我们主要学习页面交互功能
需要使用JS基础的课程内容做基础

—JS基础学习ECMAscript基础语法为后面做铺垫，Web APIs 是JS的应用，大量使用JS基础语法做交互效果。

2. API和Web API

2.1 API

概念: API(Application Programming Interface 应用程序编程接口): 是一种预先定义的函数, 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力, 而无需访问源码, 或理解内部工作机制的细节。

2.2 Web API

概念: Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。

3. DOM

3.1 DOM简介

DOM的概念: 文档对象模型(Document Object Model): 是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准接口. 用来改变页面的内容,结构和样式.

3.2 DOM树 请添加图片描述

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

DOM把以上内容看作是对象。

3.3 获取元素

根据元素ID获取: var element = document.getElementById(id);
一. 参数:
1. element是一个Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
2. id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
二. 返回值: 返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。
三. console.dir(): 打印我们返回的元素对象, 更好的查看里面的属性和方法
根据标签名获取: var elements =
document.getElementsByTagName(name);
1. elements是一个由发现的元素出现在树中的顺序构成的动态的HTML集合
2. name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。
3. element.getElementsByTagName(name); 通过element和标签名称获取页面元素对象
根据类名获取：var element=document.getElementByClassName(‘类名’)
根据指定选择器返回第一个元素document.querySelector(‘选择器’)
根据指定选择器返回: document.querySelectorAll(‘选择器’)
获取body元素: document.body
获取html元素: document.documentElement。

4. 事件基础

4.1 事件简介
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript检测到的行为. 简单理解: 触发 – 响应机制

4.2 事件三要素
事件源: 事件被触发的对象谁按钮

事件类型: 如何触发什么事件比如鼠标经过还是点击

事件处理程序: 通过一个函数赋值的方式完成。

4.3 执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS初体验</title>
    <style>
        input {
            outline: none;
            width: 200px;
            border: 1px solid pink;
            color: #aaa;
        }
    </style>
</head>
<body>
    <input type="text" value="邮箱/ID/手机号">
    <script>
        let register = document.querySelector('input');
        register.onfocus = function () {
            if(this.value === '邮箱/ID/手机号'){
                this.value = '';
            }else {
                this.style.color = '#333';
            }
        }
        register.onblur = function () {
            if(this.value.trim()===''){
                this.value = '邮箱/ID/手机号';
                this.style.color = '#aaa';
            }else {
                this.style.color = '#333';
            }
        }
    </script>
</body>
</html>

5. 操作元素复习案例

<body>
    <button>显示当前系统事件</button>
    <div></div>
    <script>
        var button = document.querySelector('button');
        var div = document.querySelector('div');
        button.onclick = function () {
            div.innerText = getDate();
        }
        function getDate() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let dates = date.getDate();
            let arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
            let day = date.getDay();
            return year+'年'+month+'月'+dates+'日 '+arr[day];
        }
    </script>
</body>

请添加图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" id="text">
</form>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var textInput = document.getElementById("text");

    /* 当文本框获取焦点，文本框背景为红色 */
    textInput.onfocus = function () {
        this.style.background = "red";
    };

    /* 当文本框失去焦点，文本框背景为绿色 */
    textInput.onblur = function () {
        this.style.background = "green";
    };
</script>
</body>
</html>

6. 节点操作

节点概述：一般地, 节点至少拥有nodeType(节点类型), nodeName(节点名称)和nodeValue(节点值)这三个基本属性

元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3 (文本节点包含文字, 空格, 换行等)

父级节点: element.parentNode
子节点:

element.childNodes : 不常用
element.children: 所有子元素节点
parentNode.firstElementChild: 第一个子元素节点
parentNode.lastElementChild:最后一个子元素节点
parentNode.children[0]: 第一个子元素节点
parentNode.children[parentNode.children.length-1]: 最后一个子元素节点

兄弟节点

node.nextSiBing: 下一个兄弟节点
node.previousSiBing: 上一个兄弟节点
node.nextElementSiBing: 下一个兄弟元素节点
node.previousElementSiBing: 上一个兄弟元素节点

创建节点

创建元素节点: document.createElement(‘li’)

添加节点

node.appendChild(child): node是爸爸, child是孩子, 追加
parentNode.insertBefore(child,referenceNode): 在referenceNode前面插入

删除节点

node.removeChild(child) 复制节点(克隆节点)
node.cloneNode(): 返回调用该方法节点的一个副本, 如果参数为true会拷贝里边的内容

动态创建元素区别

document.write(): 直接将内容写入页面的内容流, 但是文档流执行完毕, 则会导致页面全部重绘
element.innerHTML: 是将内容写入某个DOM节点, 不会导致页面全部重绘
document.createElement(): 创建多个元素效率稍低一点点,但是结构更清晰

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    /* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
    window.onkeydown = function (event) {
        /* 解决兼容性问题 */
        event = event || window.event;

        if (event.keyCode == 65) {
            console.log("true");
        } else {
            console.log("false");
        }
    };
</script>
</body>
</html>