👀 这是我参与「第四届青训营」笔记创作活动的的第8天！

😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻1、Web API 和 API 的区别

让我们先了解一下什么是API

🍻1.1、API的概念

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

举例解释什么是API。例如， C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。 javascript中有一个函数alert()可以在页面弹一个提示框，这个函数就是js提供的一个弹框工具。这些工具（函数）由编程语言提供，内部的实现已经封装好了，我们只要学会灵活的使用这些工具即可。

🍻 1.2、 Web API的概念

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

现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框，直接使用 alert(‘弹出’)

MDN 详细 API : developer.mozilla.org/zh-CN/docs/…

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

此处的 Web API 特指浏览器提供的一系列API(很多函数或对象方法)，即操作网页的一系列工具。例如：操作html标签、操作页面地址的方法。

🍻 1.3、 API 和 Web API 总结

API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。
Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）。
学习 Web API 可以结合前面学习内置对象方法的思路学习

🍻2、文档对象模型（DOM）

🍻2.1、DOM概述

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。

一个 web 页面是一个文档。这个文档可以在浏览器窗口或作为 HTML 源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM） 提供了对同一份文档的另一种表现，存储和操作的方式。 DOM 是 web 页面的完全的面向对象表述，它能够使用如 JavaScript 等脚本语言进行修改。

W3C DOM 和WHATWG DOM标准在绝大多数现代浏览器中都有对 DOM 的基本实现。许多浏览器提供了对 W3C 标准的扩展，所以在使用时必须注意，文档可能会在多种浏览器上使用不同的 DOM 来访问。

🍻2.2、HTML DOM 树形结构

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有的标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签，属性，文本，注释）

DOM把以上内容都看做是对象

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

🍻2.2、获取页面元素

DOM 在我们实际生活中只要是为例操作元素，要操作元素就得先获取元素，一般常见获取元素得方法有以下几种：

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

🍻2.2.1、根据 ID 获取

通过getElementById() 方法获取

该Document方法 getElementById() 返回一个Element对象，该对象表示其id属性与指定字符串匹配的元素。由于元素 ID 在指定时必须是唯一的，因此它们是快速访问特定元素的有用方法。

句法：

getElementById(id)

参数

要定位的元素的 ID。ID 是区分大小写的字符串，在文档中是唯一的；只有一个元素可以有任何给定的 ID。

返回值

Element描述与指定 ID 匹配的 DOM 元素对象的对象，或者如果null在文档中没有找到匹配的元素。

🍻2.2.2、根据标签名获取

通过**getElementsByTagName() ** 方法获取

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法

document.getElementsByTagName(tagname)

说明

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。它只搜索作为指定元素的后代的元素。返回的是获取过来元素对象的集合，以伪数组的形式储存.

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

提示和注释

注释：传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

个人建议： 如果需要操作某个特定的元素，使用 getElementById() 方法将更为有效。

还可以获取某个元素（父级）内部所有指定的标签名的子元素

elmement.getElementsByTagName()

注意： 父元素必须是单个对象（必须指明是那一给元素对象），获取是不包括父元素自己

🍻2.2.3、通过 HTML5 新增的方法获取

通过getElementsByClassName() 方法获取

定义和使用

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

语法

document.getElementsByClassName(*classname*)

参数

参数	类型	Description
classname	String	必须。你需要获取的元素类名。多个类名使用空格分隔，如 "test demo"

通过querySelector() 方法获取

定义和用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

语法

document.querySelector(*CSS selectors*)

参数值

参数	类型	描述
CSS 选择器	String	必须。指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。

通过querySelectorAll() 方法获取

定义与用法

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

提示: 你可以使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后你可以遍历所有元素，从而获取你想要的信息。

语法

elementList = document.querySelectorAll(selectors);

elementList 是一个静态的 NodeList 类型的对象。
selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。

属性值

参数	类型	描述
CSS 选择器	String	必须。指定一个或多个匹配 CSS 选择器的元素。可以通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素。多个选择器使用逗号(,)分隔。

🍻2.2.4、特殊元素获取

1、获取body 元素

document.body

2、获取html 元素

document.documentElement

🍻2.3、事件基础

什么是事件

js使我们有能力去创建动态页面，事件就是可以被js侦测到的行为简单理解就是用户操作鼠标或者键盘后，触发了js事件，然后产生对应的机制比如我们点击一个按钮，弹出对话框

简单得说事件是触发响应机制

事件有三部分：事件源，事件类型，事件处理程序

事件源 ：事件被触发的对象

事件类型 ：如何触发什么事件比如鼠标点击、经过、按下等。

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

步骤：

1.获取事件源

2.绑定事件注册事件

3.添加事件处理程序

鼠标事件类型

事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	鼠标按钮被按下时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	鼠标按键被松开时发生
mousemove	鼠标在某个元素上时持续发生
mouseleave	当鼠标指针移出元素时触发
mouseenter	当鼠标指针移动到元素上时触发。
contextmenu	在用户点击鼠标右键打开上下文菜单时触发

🍻2.4、操作元素

改变元素里面的内容、结构和样式。

通过innerText（）方法操作

定义和用法

innerText 属性设置或返回指定节点及其所有子节点的文本内容。

如果设置 innerText 属性，将删除所有子节点，并将其替换为包含指定字符串的单个文本节点。

注释: 此属性与 textContent 属性类似，但有一些区别:

textContent 返回所有元素的文本内容，而innerText返回所有元素的内容，除了
innerText 不会返回使用 CSS 隐藏的元素的文本 (textContent 将返回)。试一试 »

提示: 要设置或返回元素的HTML内容，请使用 innerHTML 属性。

语法

返回节点的文本内容:

*node*.innerText

设置节点的文本内容:

*node*.innerText = *text*

属性值

值	类型	描述
text	String	指定节点的文本内容

通过innerHTML()方法操作

定义和用法

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

语法

HTMLElementObject.innerHTML=*text*

区别

innnerText不识别html标签取出空格和换行

innerHTMl 识别html标签保留空格和换行（使用更多）

这两个属性是可读的可以获取元素里面的内容

案例

结果

表单元素的属性操作

利用DOM可以操作以下表单属性：

type,value,checked,selected,disabled

<script>
        //1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2.注册事件 处理程序
        btn.onclick = function () {
            // input.innerHTML = '点击了'; //这个是普通盒子 比如div 标签里面的内容
            //表单里面的值 文字内容是通过value 来修改的
            input.value = '被点击了';
            //如果想要某个表单被禁用 不能再点击disabled 我们想要这个按钮被禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
            

        }
  </script>

🍻2.5、仿京东显示隐藏密码明文案例

HTML

<!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>
    <link rel="stylesheet" href="./demo2.css">
</head>
<body>
    <div class="box">
        <label for="">
            <img src="./闭眼.png" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
</body>
<script src="./demo2.js"></script>
</html>

CSS

.box{
    position: relative;
    width: 400px;
    border-bottom: 1px solid #ccc;
    margin: 100px auto;
}
.box input{
    width: 370px;
    height: 30px;
    border: 0;
    outline:  none;
}

.box img{
    width: 24px;
    position: absolute;
    top: 15px;
    right: 2px;
}

JavaScript

var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag=0;

eye.onclick=function(){
    if(flag==0){
    eye.src='./睁眼.png';
    pwd.type='text';
    flag=1;
    }
    else{
        eye.src='./闭眼.png';
        pwd.type='password';
        flag=0;
    }
}

效果展示

🍻2.6、总结

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

今日的JavaScript基础知识学习就到此为止了，这是我第五天学习JavaScript，前几天都是JavaScript的基础，今天学习了DOM文档对象模型，和获取元素的方法以及理解了事件基础和一些操作元素的方法。

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

文档对象模型（DOM）学习 | 字节青训营笔记

👀 这是我参与「第四届青训营 」笔记创作活动的的第8天！

🍻1、Web API 和 API 的区别

🍻1.1、API的概念

🍻 1.2、 Web API的概念

🍻 1.3、 API 和 Web API 总结

🍻2、文档对象模型（DOM）

🍻2.1、DOM概述

🍻2.2、HTML DOM 树形结构

🍻2.2、获取页面元素

🍻2.2.1、根据 ID 获取

🍻2.2.2、 根据 标签名 获取

🍻2.2.3、 通过 HTML5 新增的方法 获取

🍻2.2.4、 特殊元素 获取

🍻2.3、事件基础

🍻2.4、操作元素

🍻2.5、仿京东显示隐藏密码明文案例

🍻2.6、总结

👀 这是我参与「第四届青训营」笔记创作活动的的第8天！

🍻2.2.2、根据标签名获取

🍻2.2.3、通过 HTML5 新增的方法获取

🍻2.2.4、特殊元素获取