返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript深入介绍WebAPI的用法
  • 564
分享到

JavaScript深入介绍WebAPI的用法

2024-04-02 19:04:59 564人浏览 独家记忆
摘要

目录什么是webapiDOM获取元素querySelectorquerySelectorAll事件事件三要素操作元素获取/修改元素内容获取/修改元素属性获取修改表单元素属性什么是WE

什么是WEBapi

WebAPI就是 DOM API + BOM API

DOM

W3C标准给我们提供了一系列的函数,让我们可以操作:网页内容、网页结构、网页样式、

一个网页的页面结构如:

<html>

<head>

<title> 标题 </title>

</head>

<body>

<a href=" ">链接</a>

<h1>我的标题</h1>

</body>

</html>

几个重要概念:

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

获取元素

类似于CSS选择器的功能

querySelector

var elem = document . querySelector ( selectors );

querySelectorAll

<div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
    console.log(elems);
</script>

事件

事件三要素

1. 事件源 : 哪个元素触发的

2. 事件类型 : 是点击 , 选中 , 还是修改 ?

3. 事件处理程序 : 进一步如何处理, 往往是一个回调函数 .

操作元素

获取/修改元素内容

innerText

使用示例:

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取 div 内部内容
    console.log(div.innerText);
    // 修改 div 内部内容, 界面上就会同步修改
    div.innerText = 'hello js <span>hello js</span>';
</script>

innerHTML

Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代 使用示例:

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取页面内容
    console.log(div.innerHTML);
    // 修改页面内容
    div.innerHTML = '<span>hello js</span>'
</script>

获取/修改元素属性

//修改属性
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    img.onclick = function () {
        if (img.src.lastIndexOf('rose.jpg') !== -1) {
            img.src = './rose2.png';
       } else {
            img.src = './rose.jpg';
       }
   }
</script>
//获取属性
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    // console.dir(img);
    console.log(img.src);
    console.log(img.title);
    console.log(img.alt);
</script>

获取修改表单元素属性

表单 ( 主要是指 input 标签 ) 的以下属性都可以通过 DOM 来修改

  • value: input 的值.
  • disabled: 禁用
  • checked: 复选框会使用
  • selected: 下拉框会使用
  • type: input 的类型(文本, 密码, 按钮, 文件等)

代码示例:

<input type="button" value="播放">
<script>
    var btn = document.querySelector('input');
    btn.onclick = function () {
        if (btn.value === '播放') {
            btn.value = '暂停';
       } else {
            btn.value = '播放';
       }
   }
</script>

到此这篇关于javascript深入介绍WebAPI的用法的文章就介绍到这了,更多相关JavaScript WebAPI内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript深入介绍WebAPI的用法

本文链接: https://www.lsjlt.com/news/151395.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript深入介绍WebAPI的用法
    目录什么是WebAPIDOM获取元素querySelectorquerySelectorAll事件事件三要素操作元素获取/修改元素内容获取/修改元素属性获取修改表单元素属性什么是We...
    99+
    2024-04-02
  • JavaScript深浅拷贝的介绍
    本篇内容介绍了“JavaScript深浅拷贝的介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!了解拷贝背后的过程,避免不必要的错误,Js专...
    99+
    2023-06-07
  • 深入了解SpringBoot中@ControllerAdvice的介绍及三种用法
    目录浅析@ControllerAdvice1.处理全局异常2.预设全局数据3.请求参数预处理浅析@ControllerAdvice 首先,ControllerAdvice本质上是一个...
    99+
    2023-02-06
    SpringBoot @ControllerAdvice用法 @ControllerAdvice用法 SpringBoot @ControllerAdvice
  • JavaScript中setAttribute用法介绍
    JavaScript中的setAttribute()方法用于设置指定元素的属性值。语法:element.setAttribute(attributeName, attributeValue)参数说明:- attributeName:要设...
    99+
    2023-08-09
    javascript
  • JavaScript中的遍历用法介绍
    本篇内容介绍了“JavaScript中的遍历用法介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!对象遍历...
    99+
    2024-04-02
  • K8s准入控制Admission Controller深入介绍
    目录K8s 的准入控制器是什么K8s 中的请求处理流程什么是准入控制器(Admission Controller)为什么需要准入控制器 Admission Controller准入控...
    99+
    2024-04-02
  • Django中login_required装饰器的深入介绍
    前言 Django提供了多种装饰器, 其中login_required可能是经常会使用到的。 这里介绍下四种使用此装饰器的办法。 当然, 在使用前, 记得在工程目录的settings.py中设置好LOGIN...
    99+
    2022-06-04
    Django login_required
  • 由浅入深介绍 Python Websocket 编程
    目录 1. 为什么使用 Websocket 1.1 websocket 协议简介1.2 基本原理 2. 如何用 Python 搭建 Websocket 服务2.1 安装websocket...
    99+
    2023-09-04
    websocket python 网络协议 javascript
  • Vue中混入mixin的用法介绍
    目录基础使用选项合并自定义合并规则全局混入总结什么是混入? 混入通过注入配置项到vue实例用来提升复用性 基础使用 const myMixin = { creat...
    99+
    2022-11-13
    Vue mixin Vue 混入
  • javaScript深拷贝和浅拷贝的简单介绍
    目录基本数据类型在数据结构当中引用数据类型浅拷贝-深拷贝浅拷贝浅拷贝小结深拷贝结尾源码地址在了解深拷贝和浅拷贝之前,我们先梳理一下: JavaScript中,分为基本数据类型(原始值...
    99+
    2024-04-02
  • Golang中goroutine和channel使用介绍深入分析
    目录1.goroutine-看一个需求2.进程和线程介绍3.并发和并行4.Go协程和Go主线程5.设置Golang运行的CPU数6.channel(管道)看需求1.goroutine...
    99+
    2023-01-13
    Go goroutine与channel Go goroutine Go channel
  • JavaScript语法介绍是怎样的
    本篇文章给大家分享的是有关JavaScript语法介绍是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。JavaScript 是一个 脚本...
    99+
    2024-04-02
  • JavaScript中的深拷贝和浅拷贝的详细介绍
    这篇文章主要介绍“JavaScript中的深拷贝和浅拷贝的详细介绍”,在日常操作中,相信很多人在JavaScript中的深拷贝和浅拷贝的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,...
    99+
    2024-04-02
  • 深入浅出Shell编程 Shell变量介绍
    •深入浅出Shell编程: Shell 变量 ◦1 系统变量 ◦2 Shell用户变量 ■2.1 基础 ■2.2 使用技巧 ■2.3 shell 中的数组 ◦...
    99+
    2022-06-04
    深入浅出 变量 Shell
  • 深入介绍Spring框架及故障排除
    目录Spring的缺点不可理解性按注释编程故障排除为什么是Spring IoC?选择其他人在说什么结论前言: 曾几何时,Spring框架提供了比J2EE更轻量级和更灵活的解决方案。即...
    99+
    2024-04-02
  • Java中List集合的深入介绍(超级推荐!)
    目录1,Java集合介绍2,List介绍2.1 ArrayList集合2.2 LinkedList集合3,List常用方法3.1 ArrayList 基本操作3.2 LinkedLi...
    99+
    2024-04-02
  • 深入理解Spring中bean的生命周期介绍
    以ApplocationContext上下文单例模式装配bean为例,深入探讨bean的生命周期:(1).生命周期图:(2).具体事例:person类实现BeanNameAware,BeanFactoryAware接口public clas...
    99+
    2023-05-31
    spring bean 生命周期
  • JavaScript中的Object介绍及作用
    本篇内容介绍了“JavaScript中的Object介绍及作用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
  • JavaScript中null的介绍以及用法是怎样的
    本篇文章给大家分享的是有关JavaScript中null的介绍以及用法是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。JavaScrip...
    99+
    2024-04-02
  • CSS放入网页的方法介绍
    本篇内容介绍了“CSS放入网页的方法介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!CSS放入网页的几种...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作