[JavaScript知识库] Wep APIs

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Wep APIs -> 正文阅读

[JavaScript知识库]Wep APIs

JS的组成，ECMAScript? ?和DOM（页面文档对象模型）? 和BOM（浏览器对象模型）

Wep APIs? 主要是学习浏览器页面交互功能

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

简单理解就是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

Wep API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

DOM：文档对象类型，处理HTML或XML的标准编程接口。W3C已经定义了一系列的DOM接口可以改变网页的内容、结构和样式。

文档；一个页面就是一个文档 document表示

元素：页面中所有标签都是元素，用element表示。

节点：网页中所有内容都是节点（标签、属性、文本、注释等），用node表示。

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

1、如何获取页面元素？

DOM在实际开发中主要用来操作元素

（1）可以根据ID获取: getElementByld()??document.getElementById - Web API 接口参考 | MDN (mozilla.org)

注意：因为我们文档页面从上到下加载，所以得先有标签，所以我们script写到标签的下面。

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

<body>

? ? <div id='time'>2019-9-9</div>

? ? <script>

? ? ? ?var timer= document.getElementById('time')

? ? ? ?console.log(timer)

? ? </script>

</body>

其中console.dir（timer）可以打印我们返回的元素对象，更好的查看里面的属性和方法。

（2）根据标签名获取 getElementsByTagName()返回指定标签名的对象的集合。

还可以获取某个元素（父元素）内部所有所有指定标签的子元素，父元素必须是单个对象（必须指明哪一个元素对象），获取的时候不包括父元素自己。

（3）通过HTML5新增的方法获取

<body>

? ? <div class='box'>盒子</div>

? ? <div id='nav'>

? ? ? ? <ul>

? ? ? ? ? ? <li>首页</li>

? ? ? ? ? ? <li>产品</li>

? ? ? ? </ul>

? ? </div>

? ? <script>

? ? ? ? var boxs = document.getElementsByClassName('box')

? ? ? ? console.log(boxs)

? ? </script>

</body>

返回的是伪数组

（4）querySelector（）返回指定选择器的第一个元素对象。切记里面的选择器需要加符号，类加.? ? ,id加#号

querySelectorAll（‘选择器'）返回指定选择器的所有对象

（5）获取body元素

document.body

2、事件

js使我们有能力创建动态页面，而事件是可以被js侦测到的行为。从触发到响应

网页中的每个元素都可以产生某些可以触发js的事件，例如：我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件由三部分组成：事件源、事件类型、事件处理程序

事件源：事件出发的对象，例如按钮

事件类型：如何触发？比如鼠标点击触发（onclick）经过触发等

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

<body>

? ? <button id='btn'>人</button>

? ? <script>

? ? ? ? var btn=document.getElementById('btn') ? //获取事件源

? ? ? ? btn.οnclick=function(){ ? ? ?//事件类型

? ? ? ? ? ? alert('选妃')

? ? ? ? }

? ? </script>

</body>

执行事件的步骤

（1）、获取事件

（2）、注册事件（绑定事件）

（3）、添加事件处理程序（采取函数赋值形式）

改变元素内容

innerText：不识别html标签，显示全部内容。

innerHTML：识别html标签，推荐使用。

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

案例：显示登录界面密码

核心思路：点击眼睛按钮，把密码框类型改为文本框，就可以看见里面的密码。其中一个按钮有两个状态，点击一次，切换为文本框，继续点击一次切换为密码框。算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设为0，如果是0就切换为密码框，flag设置为1。

<body>

? ? <div class='box'>

? ? ? ? <label for="">

? ? ? ? ? ? <img src="images/jia.jpg" alt="" id="eye">

? ? ? ? </label>

? ? ? ? <input type="password" name="" ?id='pwd'>

? ? ? ? <script>

? ? ? ? ? ? var eye=document.getElementById('eye')

? ? ? ? ? ? var pwd=document.getElementById('pwd')

? ? ? ? ? ? var flag=0

? ? ? ? ? ? eye.οnclick=function(){

? ? ? ? ? ? ? ? if (flag==0){

? ? ? ? ? ? ? ? ? ? pwd.type='text'

? ? ? ? ? ? ? ? ? ? eye.src='images/python.jpg'

? ? ? ? ? ? ? ? ? ? flag==1

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? pwd.type='password'

? ? ? ? ? ? ? ? ? ? eye.src='images/jia.jpg'

? ? ? ? ? ? ? ? ? ? flag==0

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? </script>

? ? </div>

</body>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-10-30 12:28:21 更:2021-10-30 12:28:33

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/10 14:28:29-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码