JavaScript WebAPI、DOM、事件和操作元素实例详解

2024-10-02 10:19:48

WebAPI

API：应用程序编程接口，是一些预先定义的函数，由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可

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

WebAPI：主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web API

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

DOM

文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

DOM树

DOM将HTML文档处理成树形(倒)结构，将html文档看作是一棵树，文档中的标签、标签的属性、标签的内容都是数的节点

DOM树最顶端是document，BOM最顶端是window

文档（document）一个页面当成文档
元素（element）页面中所有标签元素
节点（node）网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），每个节点都是对象，都有属性和方法

DOM获取元素方式

获取方式	用法	返回值
根据Id获取	document.getElementById(‘id')	返回指定id的元素对象，未找到返回null，存在多个id返回undefined
根据标签名	document.getElementsByTagName(‘标签名')	返回的是指定标签的动态集合，是一个类数组对象，伪数组，但不是数组。可以通过下标索引访问
根据Name获取	document.getElementByName(‘name属性值')	返回指定name的元素对象集合
根据ClassName获取（html5新增）	document.getElementByClassName(‘class属性值')	返回指定classname的元素对象集合
根据选择器获取（新增）	document.querySelector(‘选择器')	获取的是给定选择器元素，只能返回给定选择器第一个元素
根据选择器获取（新增）	document.querySelectorAll(‘选择器')	获取的是给定选择器元素，返回元素的集合

document对象属性

方法	作用
document.body	返回文档的body元素
document.title	返回文档的title元素，表示页面的标题
document.documentElement	返回文档的html元素，即HTML页面的全部信息（通过此可以将文档全部元素放进一个字符串，供别人读取分析
document.froms	返回对文档中所有From对象引用，复数形式，可以返回多个表单
document.images	返回对文档中所有的image对象，与上述一样

事件

事件：用户进行某种操作（可被JavaScript侦测到的行为），是一种“触发-响应”的机制，是实现页面交互的方式

事件三要素：

事件源：谁触发了事件事件类型：触发了什么事件事件处理程序：事件被触发后所执行的代码（函数形式）

事件的使用步骤

<body>
  <button id="btn">单击</button>
  <script>
    var btn = document.getElementById('btn')// 第1步：获取事件源
    // 第2步：注册事件btn.onclick
    btn.onclick = function () { // 第3步：添加事件处理程序（采取函数赋值形式）
        alert('弹出')
    }
  </script>
</body>

事件名=函数名（[参数]）

注意：创建按钮的方式（2种）

<input type="button" value="按钮显示文字">
<button type="button">按钮显示文字</value>

事件的类型

操作元素

操作元素内容

DOM提供的属性实现对元素内容的操作方法：

innerHTML （W3C）识别html标签。在使用时会保留编写的格式以及标签样式
innerText（非标准）不识别html标签。去掉所有格式以及标签的纯文本内容
textContent属性在去掉标签后会保留文本格式

<body>
    <div id="box">
        The first paragraph...
        <p>
            The second paragraph...
            <a href="#">third</a>
        </p>
    </div>
</body>
<script>
    var box = document.getElementById('box')
    console.log(box.innerHTML)
    console.log(box.innerText)
    console.log(box.textContent)
</script>

操作元素属性

在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性

元素中：src、href等
表单中：id、alt、title等

操作元素样式

①操作style属性：元素对象.style.样式属性名

样式属性名对应CSS样式名，但需要去掉CSS样式名里的半字线“-”，并将半字线后面的英文的首字母大写

<body>
    <div id="box"></div>
    <script>
        var ele = document.querySelector('#box'); // 获取元素对象
        ele.style.backgroundColor= 'red';
        ele.style.width = '100px';
        ele.style.height = '100px';
        ele.style.transform = 'rotate(7deg)';
    </script>
    <!-- 上述3行代码相当于在CSS中添加以下样式： -->
    <style>
        #box {
            background-color: red;
            width: 100px;
            height: 100px;
            transform: rotate(7deg);
        }
    </style>
</body>

②操作className属性：元素对象.className

在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式
访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名
className会更改元素的类名，会覆盖原先的类名
如果元素有多个类名，在className中以空格分隔

排他思想

如果有同一组元素，要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

H5自定义属性

自定义属性目的： 是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

有些自定义属性很容易引起歧义，不容易判断是元素的自带属性还是自定义属性，HTML5新增了自定义属性的规范，在HTML5中规定通过“data-属性名”的方式设置自定义属性

设置属性值：

①在HTML中设置自定义属性

data-属性名=‘值'

// 在div元素上设置data-index属性
<div data-index="2"></div>

②在JavaScript中设置自定义属性

element.setAttribute(‘属性', 值)
element.dataset.属性名=‘值'

<div></div>
<script>
    var div = document.querySelector('div');
    div.dataset.index = '2';
     div.setAttribute('data-name', 'andy');
</script>

获取属性值：

element.getAttribute()
element.dataset.属性
element.dataset[‘属性'] （有兼容性问题）

注意： dataset是一个集合，里面存放了所有以data开头的自定义属性，如果自定义属性里面包含有多个连字符（-）时，获取的时候采取驼峰命名法

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
  var div = document.querySelector('div');
  console.log(div.getAttribute('data-index'));       // 结果为：2
  console.log(div.getAttribute('data-list-name')); // 结果为：andy
  // HTML5新增的获取自定义属性的方法，只能获取“data-”开头的属性
  console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"}
  console.log(div.dataset.index);           // 结果为：2
  console.log(div.dataset['index']);        // 结果为：2
  console.log(div.dataset.listName);      // 结果为：andy
  console.log(div.dataset['listName']);  // 结果为：andy
</script>

移除属性值：

element.removeAttribute(‘属性')

<div id="test" class="footer" ></div>
<script>
    var div = document.querySelector('div');
    div.removeAttribute('id');        // 移除div元素的id属性
    div.removeAttribute('class');   // 移除div元素的class属性
</script>

具体操作元素案例见文章： JavaScript 操作元素案例练习

总结

到此这篇关于JavaScript WebAPI、DOM、事件和操作元素的文章就介绍到这了,更多相关js WebAPI、DOM、事件和操作元素内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue.js前端框架之事件处理小结

1. v-on 事件监听监听DOM事件使用 v-on 指令.该指令通常在模板中直接使用,在触发事件时会执行一些 JavaScript 代码. v-on 指令的基本用法 (1)在 HTML 中使用 v-on 指令,后面可以是所有的原生事件名称.基本用法如下: <button v-on:click="show">显示</button> 将 click 单击事件绑定到 show 方法中,单击"显示"按钮时,执行 show() 方法,show()
详解JS浏览器事件模型

什么是事件我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢? 事件驱动通俗地来说就是什么都抽象为事件. 一次点击是一个事件键盘按下是一个事件一个网络请求成功是一个事件页面加载是一个事件页面报错是一个事件浏览器依靠事件来驱动APP运行下去,如果没有了事件驱动,那么APP会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石. 一个简单的例子其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态. 我们需要根据这个事件自己去完
JavaScript中事件冒泡机制示例详析

什么是冒泡? DOM事件流(event flow )存在三个阶段:事件捕获阶段. 处于目标阶段. 事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. dom标准事件流的触发的先后顺序为:先捕
关于js的事件循环机制剖析

前言众所周知, JavaScript是单线程这一核心,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?其中的原理与事件循环机制大有关系. 在探索事件循环之前,我们得先了解浏览器执行线程~~ 浏览器的渲染进程是多线程的,浏览器每一个tab标签都代表一个独立的进程,其中浏览器内核属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等.其包含的线程有以下几种 GUI 渲染线程:负责渲染页面,解析 HTML,CSS 构成 DOM 树: JS 引擎线程:解释执行代码.用户输入和网络请求:
利用javaScript处理常用事件详解

JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件. 1.窗体事件例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>花狗在线</title> <script> window.o
JavaScript之事件循环案例讲解

js中的事件循环因为JavaScript是单线程的,同一事件只能执行一种方法,所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行,当遇见异步任务时不会被阻塞,而是将任务放入事件队列中,继续执行执行栈中的同步代码,等当前执行栈中的所有任务都执行完毕则查找事件队列中的任务,并把任务的回调函数放入执行栈中,执行其中的同步代码,如此反复形成的循环被称为事件循环. node.js node.js特点事件驱动从上向下执行代码,当遇到需要回调的地方就加入到事件队列中,主线程运行完就去执行事件队
如何利用原生JS实现触摸滑动监听事件

前言今天写一个小Demo,有个地方涉及到了左滑右滑的逻辑,本来想着用插件来着,但是想到自己好久没用原生JS写滑动的监听了,所以试着用原生JS来实现了一下,毕竟温故而知新嘛,同时做个记录.先把实现的效果贴出来: 构思想要写出丝滑的触摸滑动事件的监听,要考虑以下3个方面的逻辑: 距离: 滑动距离要大于40 时间: 滑动时间小于在0.5秒,即500毫秒内完成手指按下,拖动,离开(避免只是手指在屏幕就触发) 滑动方向: 左右滑动的条件是:X轴移动的距离大于Y轴移动的距离,为正则向左,为负则向右上下
浅谈JS和Nodejs中的事件驱动

事件驱动和发布-订阅事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式. 在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer). 主题就像调频收音机一样,向有兴趣收听该主题所说内容的观察者进行广播. 观察者可能只有一个,也可能有一百个,这都没有关系,只要主题有一些要广播的消息就够了. 请记住,事件驱动.发布-订阅和观察者模式在实践中不是一回事,但在理想情况下,它们使用相同的方法:一个实体广播一条消息,其他实体侦听该消息. 发布
JavaScript WebAPI、DOM、事件和操作元素实例详解

目录 WebAPI DOM DOM树 DOM获取元素方式 document对象属性事件事件的使用步骤事件的类型操作元素操作元素内容操作元素属性操作元素样式排他思想 H5自定义属性总结 WebAPI API:应用程序编程接口,是一些预先定义的函数,由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码.无须理解其内部工作机制细节,只需知道如何使用即可简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能 WebAPI:主要针对浏览器
JavaScript利用html5新方法操作元素类名详解

目录 1.classList属性 2.实务应用早先JavaScript处理起来特别不方便,需要先取到class属性,然后对字符串进行处理. 现在html5给所有元素增加了classList属性来操作类属性,非常方便. 1.classList属性先看如下代码: <ul class="nav"> <li class="active">栏目1</li> <li>栏目2</li> <li>栏目3&l
MongoDB 查询操作的实例详解

MongoDB 查询操作的实例详解使用find或findOne进行查询.并可以进行范围查询.数据集查询.不等式查询,以及其他的一些查询. 查询将会返回DBcursor 游标只有在你需要的时候返回文档针对游标返回的文档(结果集) 进行操作例如:忽略一定数量的结果,或者返回结果的数量,以及对结果的排序. 1.指定需要返回的键有时候仅仅对文档的某几个键值感兴趣,可以屏蔽返回的不感兴趣的键值,返回感兴趣的键值 mongos> db.blog.find({},{"name":1})
Vue.js进行查询操作的实例详解

Vue.js进行查询操作的实例详解实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>
JS监控关闭浏览器操作的实例详解

JS监控关闭浏览器操作的实例详解需求如下: 用户关闭浏览器通知后台. 方案如下: 1.采用js监控关闭浏览器操作. 2.用户关闭浏览器的时候发ajax请求到后台,执行相应的业务操作代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l
JavaScript中关于递归与回溯的实例详解

目录何为递归构成递归条件关于回溯实际业务组合问题何为递归递归作为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.需要注意的是,递归必须要用边界条件,否则很容易导致死循环构成递归条件子问题须与原始问题为同样的事,且更为简单
Node文件操作汇总实例详解

目录前言文件系统目录处理读写文件文件描述监控文件异步文件删除文件总结前言前两天我们介绍了 Nodejs 中 I/O 的重要组成部分:Buffer对象和 Stream流,今天我们介绍 Nodejs 的文件系统,包括文件和目录的读写.删除,以及监听文件和目录的修改. 文件系统 Nodejs 内置的 fs模块可与文件系统进行交互,封装了常规的 POSIX函数.POSIX(Portable Operating System Interface,可移植操作系统接口)是UNIX系统
php mysql PDO 查询操作的实例详解

php mysql PDO 查询操作的实例详解 <?php $dbh = new PDO('mysql:host=localhost;dbname=access_control', 'root', ''); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $dbh->exec('set names utf8'); /*添加*/ //$sql = "INSERT INTO `user` SET `log
Python字符串和字典相关操作的实例详解

Python字符串和字典相关操作的实例详解字符串操作: 字符串的 % 格式化操作: str = "Hello,%s.%s enough for ya ?" values = ('world','hot') print str % values 输出结果: Hello,world.hot enough for ya ? 模板字符串: #coding=utf-8 from string import Template ## 单个变量替换 s1 = Template('$x, glorio
C++利用MySQL API连接和操作数据库实例详解

1.C++连接和操作MySQL的方式系列文章: MySQL 设计和命令行模式下建立详解 C++利用MySQL API连接和操作数据库实例详解在Windows平台,我们可以使用ADO.ODBC或者MySQL API进行连接和操作.ADO (ActiveX Data Objects,ActiveX数据对象)是Microsoft提出的一个用于存取数据源的COM组件.它提供了程序语言和统一数据访问方式OLE DB的一个中间层,也就是Microsoft提出的应用程序接口(API)用以实现访问关系或非关