Web APIs 主要学习 DOM 和 BOM

Web APIs are typically used with JavaScript, although this doesn’t always have to be the case.

一、Web API

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

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

因为 Web API 很多，所以我们将这个阶段称为 Web APIs。

二、DOM 介绍

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

2.1 DOM树

在这里插入图片描述DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

  • 文档：一个页面就是一个文档，DOM中使用document表示
  • 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
  • 元素节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
    在这里插入图片描述

2.2 获取元素

根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串，代表了所要查找的元素的唯一ID.
返回值：DOM Element 对象 或 null

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

document.getElementsByTagName(‘标签名’);
返回带有指定标签名的对象的集合。

element.getElementsByTagName()
获取某个元素(父元素)内部所有指定标签名的子元素.
指定的元素的子树会被搜索，不包括元素自己。

	<script>
        // element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>

注意：

  1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
  2. 得到元素对象是动态的
  3. 如果获取不到元素,则返回为空的伪数组

通过 HTML5 新增的方法获取

  1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
  1. document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
  1. document.querySelectorAll(‘选择器’); // 根据指定选择器返回

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);

获取特殊元素（body，html）

获取body元素

doucumnet.body // 返回body元素对象

获取html元素

document.documentElement // 返回html元素对象

三、事件基础

事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

3.1 事件三要素

1、 事件源 （谁）：事件被触发的对象
2、 事件类型 （什么事件）
3、 事件处理程序 （做啥）

例：
① 获取事件源
② 注册事件（绑定事件）
③ 编写事件处理程序（采取函数赋值形式）

var btn = document.getElementById('btn');
btn.onclick = function() {
 alert('你好吗'); 
};

3.1.2 常见的鼠标事件

在这里插入图片描述

四、操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。

4.1 改变元素内容

element.innerText

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区